vue学习 day two
条件渲染
v-if:指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回true时被渲染
v-else:你可以使用这个指令来表示else块
<p v-if="flag">我是孙猴子</p>
<p v-else>你是傻猴子</p>
data(){
return {
flag:true
}
}
v-show:条件性的展示元素的选项
<h1 v-show='od'>hello!</h1>
v-if VS v-show
- v-if:他是真正的条件渲染,因为它在确保切换过程中,条件块内的时间监听器和子组件适当地被销毁和重建,同时它也是惰性的(即如果初始渲染时条件为假,那么不会开始渲染,直到条件最后一次变为真,才会开始渲染条件块)
- v-show:无论初始条件是什么,元素总是会被渲染,并且只是简单的基于css进行切换(改变display的属性值)
- 一般来说,使用v-if会有较大的切换开销(因为在使用过程中,元素被不断渲染和注销),使用v-show有较大的初始渲染开销(所有的标签都进行渲染)如果在运行条件很少改变时,建议使用v-if 如果需要非常频繁的切换,则可以使用v-show
列表渲染
用v-for指令把一个数组映射成一组元素
<ul>
<li v-for=""item initems>{{ item.message }}</li>
</ul>
data(){
return {
items:[{message:'Foo'},{message:'Bar'}]
}
}
维护状态:当Vue正在更新使用v-for渲染的元素列表时,它默认使用”就地更新“的策略。如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保他们在每个索引位置上正确渲染
为了给vue一个提示,一边它能跟踪每个节点的身份,从而重用和排序现有元素,你需要为每项提供一个唯一的keyattribute:
<div v-for="(item,index) in items" :key="item.id|index">
内容
<>
事件处理
监听事件:我么可以理解为如何添加一个事件 我们可以使用v-on指令(通常缩写为@符号)来监听DOM事件,并在除法事件时执行一些javascript。用法为v-on:click=”methodName“或者使用快捷方式@click=”methodName“
<button @click="counter + 1">Add 1</button>
data(){
return {
counter:0
}
}
事件处理方法:然而许多事件处理逻辑会更为复杂,所以直接把javascript代码写在v-on指令中时不可行的。因此v-on还可以接收一个需要调用的方法名称。
<button @click="greet">Greet</button>
methods:{
greet(event){
//event 是原生 DOM event!!!
if(event){
alert(event.target.tagname)
}
}
}
内联处理器中的方法:事件传递参数
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
methods:{
say(message){
alert(message)
}
}