Vue 02
开始之前 再回忆一下es5 es6中的数组操作方法,在vue和react 中会大量运用
1. arr.filter((item,index)=> 条件 )ES5 返回新数组 不改变原数组
返回值为true就把该元素添加到新数组里面
发回值为false 就不添加该元素
而arr.splice 则改变原数组
2.ES5 arr.map(item,index) =>条件) 用来操作数组 并放回一个新数组
question: map和forEach 的区别?
answer: forEach不会返回数据,对数组操作会改变原数组
而map不会改变原数组数据,而是返回一个新数组.
3.ES5 arr.some((item,index) =>条件) 检查数组中某些值是否符合条件,只要有一个值符合条件 返回值则为true
4.ES5 arr.every((item,index) =>条件) 检查数组中所有值是否符合条件,只有全部符合条件才为true
5. ES6 arr.find((item,index) =>条件) 返回通过第一个数组元素的值
6. ES6 arr.findIndex((item,index) =>条件)返回通过测试的第一个元素的索引
07 json-server(自己制作一个后台的接口文档数据库)
resetFul风格的接口文档
1 同一个接口 /user
1) get 查询
2) post 添加
3) delete 删除
4) put 更新
1 安装 npm i json-server -g
2 创建一个数据库 组路径自定义 ./data/db.json
3 json-server db.json路径
4 查询 get请求
baseURL = http://192.168.1.137:3000
method get
url /user
可选参数
username string 用户名
password string 密码
success:
[
{username:"",password:"",id},
]
fail
[]
5. 添加 post请求
method post
url /user
必须参数
username string
password string
08 生命周期
生命周期 组件从创建到销毁 (钩子函数) 自动就触发
1 创建前 beforeCreate 获取不到data
2 创建后 created
3 挂在前 beforeMount
4 挂在后 mounted
5 更新前 beforeUpdate
6 更新后 updated
7 销毁前 beforeDestroy
8 销毁后 destroyed
09 watch 监听
1 自动触发 监听对象或者数值发生发生改变的 时候会自动执行函数
2 两种写法
1 普通监听 只能监听原始类型数据 number string boolean ..
watch: {
// 函数名字就是监听数据的变量名 (data里面的数据名字)
n() {
this.yf = this.n >= 10 ? 20 : 0;
},
},
2 深度监听 引用类型
user: {
//函数名字别改
handler() {
console.log("user_ok");
},
deep:true, 设置深度监听
immediate: true, //初始化的时候执行
},
10 computed 计算属性
1 函数名 不能与 data和methods里面的属性和方法重复
2 必须要有返回值 return
3 使用的时候不需要加括弧()
4 一般情况下与watch使用区别不大
computed: {
yf() {
// console.log("ok");
return this.money >= 58 ? 0 : 6;
},
},
11 watch,computed,methods 区别
1 作用一直 修改数据 处理业务逻辑
2 methods 它的使用 一般都是主动调用 通过自调用或者和事件一起用
3 watch 和 computed 是自动调用的 监听了数据改变自动执行函数
4 选择watch还是computed
1 如果一个属性影响多个值 选择用watch合适
2 不需要渲染的触发的时候用watch
其它全用computed
12 修饰符
1 事件修饰符
1 .stop 阻止冒泡
2 .prevent 阻止默认
3 .self 只有点击自己本身的时候触发
4 .once 触发一次
5 .capture 捕获阶段
6 .passive 滚动
7 .native
2 键盘修饰符
@keyDown.数字 keyCode 码
@keyDown.键名 (不是所有的键名都能用)
3 鼠标修饰符
.left
.right
.middle
4 v-model 修饰符 (表单)
v-model.lazy 把input事件修改 change事件
v-model.number 转数字
v-model.trim 去首位空格
13 组件 特别特别重要 ()
组件名字 如果驼峰命名 例如 myHeader <my-header> <myHeader></myHeader>错误
1 全局组件
Vue.component('组件名',{ data(){ return {} }, template:"模板" 模板值识别一个子元素 }) <组件></组件>
2 局部组件 -- 注册再使用
const myHeader = { data(){ return {} }, template:"模板" 模板值识别一个子元素 } new Vue({ components:{ myHeader } }) <my-header></my-header>
3 template 只识别一个子元素
1 template :"<button></button>" 2 template :"id" <template id="id"></template> 3 template :"id" <script type="text/template"></script>