vue学习 day two

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

1. v-if:他是真正的条件渲染，因为它在确保切换过程中，条件块内的时间监听器和子组件适当地被销毁和重建，同时它也是惰性的（即如果初始渲染时条件为假，那么不会开始渲染，直到条件最后一次变为真，才会开始渲染条件块）
2. v-show:无论初始条件是什么，元素总是会被渲染，并且只是简单的基于css进行切换（改变display的属性值）
3. 一般来说，使用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)
	}
}