文章目录
计算属性
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