Vue阶段学习知识点总结（一）

因为只是对学过的知识的回顾和总结，所以不涉及太多的实例

Vue指令总结：（只针对我目前学过的）

v-bind: 动态的绑定数据，简写为 :

v-on:监听DOM事件，简写为@

v-for:对一组数据循环生成对应的结构

v-if:根据表达式的值的真假条件渲染元素和移出元素

v-show:根据表达式的真假条件，切换元素的CSS属性——display属性

v-text:更新元素的textContent,可替代{{}} (对比)

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

两者的不同就是，使用{{}}时，如果数据过多，当数据没有加载完成，页面中会出现{{}},而使用v-text就不会出现这种情况

v-html

更新元素的innerHTML
不使用这个指令，插入的html结构不作为模板编译，作为文本显示
不要插入不安全的html结构（否则容易受XSS攻击）

v-cloak:隐藏未编译的Mustache标签直到实例准备完毕

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。(可以解决{{}}出现的bug)
示例：

<style>
[v-cloak] {
  display: none;
}
</style>
<div v-cloak>
  {{ message }}
</div>

不会显示，直到编译结束。

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

Vue阶段学习知识点总结（一）

猜你喜欢