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

偏执的太偏执、 2022-05-20 03:18 285阅读 0赞

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

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

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

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

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

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

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

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

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

v-html

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

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

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

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

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的静态方法