知识点
- 列表渲染
- 事件处理器
- 表单
- 生命周期
列表渲染
- 概念
- 用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
- 基本例子
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
- 数组更新注意点
- 变异方法
- Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新.方法如下 :push(),pop(),shift(),unshift(),splice(),sort(),reverse()
- 重塑数组
- 不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组.方法如下:filter(), concat(), slice()
- 数组更新
//this.hobby[2] = '呵呵' //不行 //Vue.set(this.hobby, 2, '呵呵') //方法一 this.hobby.splice(2,1,'哈哈')
- 变异方法
事件处理器
- 1.事件传参
- 2.访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
- 3.事件修饰符(事件捕获机制:https://segmentfault.com/q/1010000005875549)
- 4.键值修饰符
表单
1.v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
2.当v-model绑定值和value相同时,表示选中
-
3.修饰符
- .lazy : 失去焦点时才发生更新
- .number : 转化为字符串
- .trim : 自动过滤用户输入的首尾空格
生命周期
beforeCreate(){
console.log('创建之前,beforeCreate....');
},
created(){
console.log('创建完成了，created...');
},
beforeMount(){
console.log('挂载之前,beforeMount....');
},
mounted(){
console.log('挂载完成了,mounted....');
},
beforeUpdate(){
console.log('更新之前，beforeUpdate....');
},
updated(){
console.log('更新后，updated....')
},
beforeDestroy(){
console.log('销毁前，beforeDestroy...')
},
destroyed(){
console.log('销毁后，destroyed....');
}
