当我们需要将一组数据循环渲染到页面上的时候,需要用到列表渲染
例如下面,讲一段活动列表,渲染到页面上面:
var list = [
{
title:"吃饭"
},
{
title:"睡觉"
},
{
title:"打豆豆"
}
];
// 列表渲染
new Vue({
el: ".main",
data:{
list:list,
}
});
根据一组数组的选项列表进行渲染
语法:
value,key in items
value,key of items
当我们需要监听DOM上面的操作的时候,需要用到事件处理器,例如一个按钮的点击事件
用来监听DOM事件触发代码
语法
v-on:eventName="eventHandle"
简写语法
@
事件处理函数
写在Vue对象的methods中进行统一管理
事件对象
在事件处理函数中获取
内联事件处理函数执行,传入事件对象
事件处理函数只有纯粹的逻辑判断,不处理DOM事件的细节的时候使用
如:阻止冒泡、取消默认行为、判断按键
事件修饰符的位置
v-on:eventName.修饰符
修饰符
.stop .prevent .capture .self .once
按键修饰符
.enter .tab .delete .esc .space .up .dowm .left .right .ctrl .alt .shift .meta .键位
根据表达式的值用来显示或者隐藏元素
元素会被在页面中,只根据表达式的值进行css切换
语法
v-show="表达式"
除了vue内置的指令之外还可以自己设置指令
选项对象的directives属性
{
directives:{}
}
update被绑定元素所在的模板更新的时候调用
钩子函数中的参数
el:指令所绑定的元素,可以用来直接操作DOM
binding:一个对象
value:指令的绑定值
为什么需要使用计算属性?模板是为了描述视图结构的,模板中放入太多逻辑,导致模板过重且难以维护。
在计算一个计算属性的时候,Vue.js更新他的依赖列表病缓存结果,只要当其中一个依赖发生了变化,缓存的结果才无效。
语法
在选项对象中{
...
computed:{}
}
由于这几天都在做同一个项目,所以直接做笔记了
在这节里面,主要讲了一个数据的监控,比如当你的数据发生改变的时候,你需要对他进行实时的保存
语法:
选项对象的directives属性
{
watch:{}
}
例如:对list属性进行监控
new Vue({
el: ".main",
data:{
list:list,
....
},
// 监控属性
watch:{
list:function(){
store.save("data",this.list);
}
}
}
在上面的监控当中,我们可以监控得到list的变化。这里需要注意的是,list是一个对象数组,这里监控的只是list内数组,但是对于数组内对象的改变却无法监控,这个时候就需要深度监控了。如果需要深度监控,需要这样:
new Vue({
el: ".main",
data:{
list:list,
....
},
// 监控属性
watch:{
list:{
handler:function(){
store.save("data",this.list);
},
deep:true
}
}
}