vue指令

vue指令

Vue是一套用于构建用户界面的渐进式框架

​ 可以被设计为自底向上逐层应用，它的核心只关注视图层，并且便于与第三方库和既有项目的整合

• 自底向上逐层引用的意思 ： 从基层开始做起，先把基础的东西写好，在逐层添加效果和功能

v-text ： 输出纯文本，不解析。模板语法

<div id="app">
	<div v-text="msg"></div>
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			msg : 'hello'
		}
	})
</script>

v-html：输出解析过后的内容 直接在网站上动态渲染HTML文件是非常危险的，容易导致XSS攻击，永不用在用户提交的内容上。

<div v-html="msg"></div>

v-if 、v-else-if、v-else ：条件选择

<div v-if="age <= 7">幼年</div>
<div v-else-if="age > 7 && age <=14">少年</div>
<div v-else-if="age > 14 && age <= 25">青年</div>
<div v-else>壮年</div>

v-if：当值为布尔值时，内容显示或隐藏 ，true时正常显示，false时此行代码在内存中 直接被销毁，若内容会经常显示隐藏，不建议使用v-if，影响性能

<div v-if="false">if显示</div>

v-show：它的值为布尔值，值为true时正常显示，值为false时代码隐藏。若内容经常显示或隐藏，建议使用v-show，因为它通过css样式中的display值来显示或隐藏，性能比v-if要好。

<div v-show="false">show显示</div>

v-for：循环 (item,index) in 名称 item和index位置不可调换，分别代表属性和下标

<ul>
	<li v-for="(item,index) in list">{{index}},{{item}}		</li>
</ul>

v-on：绑定事件监听 缩写：’@’

<button type="button" @click="handleClick">按钮</button>

v-bind：单向绑定事件 缩写：’:’

<a :href="link.url">{{link.name}}</a>

v-module：双向绑定事件

<input v-model="link.url" />

v-pre：原样输出，不输出值

<div v-pre>{{age}}</div>

v-cloak：这个指令保持在元素上直至编译结束

<div v-cloak>{{age}}</div>

v-once：只渲染一次

<div v-once>{{age}}</div>