Vue阶段学习知识点总结（一）
因为只是对学过的知识的回顾和总结，所以不涉及太多的实例
Vue指令总结：（只针对我目前学过的）
v-bind: 动态的绑定数据，简写为 :
v-on:监听DOM事件，简写为@
v-for:对一组数据循环生成对应的结构
v-if:根据表达式的值的真假条件渲染元素和移出元素
v-show:根据表达式的真假条件，切换元素的CSS属性——display属性
v-text:更新元素的textContent,可替代{ {}} (对比)
{
{msg}}两者的不同就是，使用{ {}}时，如果数据过多，当数据没有加载完成，页面中会出现{ {}},而使用v-text就不会出现这种情况
v-html
- 更新元素的innerHTML
- 不使用这个指令，插入的html结构不作为模板编译，作为文本显示
- 不要插入不安全的html结构（否则容易受XSS攻击）
v-cloak:隐藏未编译的Mustache标签直到实例准备完毕
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。(可以解决{ {}}出现的bug)
示例：
{
{ message }}
不会显示，直到编译结束。
v-once
- 只渲染一次，随后数据改变将不再重新渲染，视为静态内容，用于优化更新
Vue将数据对象和DOM进行绑定，彼此之间互相产生影响，DOM的改变也会引起数据的变化
v-model:
- 在表单元素上创建双向数据绑定
- 会根据控件类型自动选取正确的方法来更新元素交互的值
- 负责监听用户的输入时间以更新数据
注意：
- 会忽略所有表单元素的value、checked、selected特性的初始值
- 将Vue实例的数据作为数据来源
- 需要在数据对象中声明初始值
二、class和style绑定（这个明天会详细的聊聊哈，今天就先忽略）
三、计算属性：
计算属性定义在computed中，它不是方法，属性值是函数的返回值
把对处理函数的逻辑抽离在计算属性中，是的模板更加轻量易读
计算属性的值会被缓存，并根据依赖的数据变化而重新计算
为什么要使用计算属性？
模板是为了描述视图的结构，模板中放入太多逻辑，导致模板过重且难以维护。
在计算一个计算属性时，Vue.js更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效
计算属性的使用：
- 取值：触发get函数，默认设置的函数
- 赋值：触发set函数
注意：
- 计算属性挂载实例上
- 计算属性对应的函数this都指向实例
- 计算属性会把结果缓存，可在模板中重复使用
对计算属性的操作：
1、只给计算属性一个函数，默认这个函数是取值的时候触发，这个函数是get函数
简单的看个小例子：
var vm = new Vue({
el:"#wrap",
data:{
name:"donna",
list:[1,2,3,4,5,6]
},
computed:{//计算属性挂载在实例上
//计算属性对应的函数this都指向实例
reverseMessage(){
//计算属性会把结果换缓存，可在模板中重复使用
return this.name.split('').reverse().join('')
},
newList(){
return this.list.map(item=>item*2).filter(item=>item<10)
}
}
});上面的computed中也可以是这样的：
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}2、计算属性默认只有 getter ，不过在需要时也可以提供一个 setter ：
设置值：set(){}
取 值：get(){}
computed:{
selectedAll:{
get(){//取值
let isAll = this.data.every(item=>{
return item.checked;
})
return isAll;
},
set(newValue){//设置值
this.data.forEach(item=>{
item.checked = newValue;
});
}
}}四、数组的变异
Vue中提供了数组的变异方法，使用这些方法将会触发视图更新
- push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vm.list.push(1000);//会改变原数组，所以会触发视图更新
不能视图触发更新视图
- 利用索引直接设置一个项时、修改数组长度时（通过下标修改值不可以）
vm.list[0] = "donna";//不可以，不会触发视图更新
vm.list.splice(0,1,"donna");//用这种方法替换上面的操作，可以触发视图更新
五、data对象中添加属性的方法：
data对象中的数据都会被转换为getter/setter，所以当数据发生变化时，自动更新在页面中，如果没有定义某个属性，那么就不能检测属性的变化
注意：对象不能是Vue实例，或者Vue实例的根数据对象
1、Vue.set(target,prop,value)；//调用vue的静态方法
- 设置对象的属性，如果对象是响应的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开Vue不能检测属性被添加的限制
2、vm.$set(target,prop,value);//调用实例上的方法$set
3、vm.choose = Object.assign({},vm.choose,{name:"donna"});//替换对象。
删除一个对象的方法：$delete(target,prop)
六、事件系统
v-on:可以用v-on指令监听DOM事件，简写为@
- 事件处理函数：事件处理函数写在methods中
- 在模板中不传参，只写上函数的名字，函数第一个参数是事件处理函数
- 在模板中不传参，需要动手在模板中使用$event传入事件对象
注意：事件处理函数中的this指向都是指向实例
事件修饰符：
方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
语法：v-on:事件名.修饰符 = "事件处理函数"
事件修饰符：.stop 、 .prevent 、.capture、.self、.once
按键修饰符： .enter 、.tab、.delete、.esc、.space、.up、.down、.left、.right