VUE计算属性、修饰符、diff渲染机制、数组操作

计算属性

html

 var app13 = new Vue({
        el:'#app-13',
        computed:{
            count:function(){
                return this.a+this.b;
            }
        },
        data:{
            a:12,
            b:16
        }
    })

vue

<div id='app-13'>
        <h1>13.计算属性</h1>
        <span>{{count}}</span>
    </div>

get、set方法

computed:{
count:{
set:function(){
//set方法
},
get:function(){
//get方法
return ‘’;
}
}
},

v-on修饰符

stop阻止冒泡

<button @click.stop="click_func"><button>

lazy修饰符

在用户输入回车或失去焦点再去执行双向绑定，刷新vuedata数据

<input type="text" v-model="message.lazy">

number

input增加number修饰符会自动将输入值转化为数值类型

trim

自动过滤内容左右两边的空格

diff与渲染机制

使用for循环的时候，如果在数组中插入一个值在加载页面的时候他会重新生成dom节点，如果想要只增加插入的那条数据dom则可以指定key就可以复用节省界面的开销

<ul>
    <li v-for="item in rows" :key="item">{{item}}</li>
</ul>

数组操作

具有响应式的方法

pop() 删除数组中的最后一个元素
shift()删除数组中第一个元素
push()数组最后添加元素
unshift()在数组最前方添加元素
splice()可以删除元素、添加元素、替换元素
reverse()数组反转
sort()排序

没有响应式的方法

通过索引修改值不是响应式的

github 例子地址

https://github.com/1142235090/study_vue