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>