一、回顾指令
v-bind 单向绑定解析表达式,可简写为 :xxx
v-model 双向数据绑定
v-for 遍历数组、对象、字符串
v-on 绑定事件监听,可简写为 @
v-if 条件渲染(动态控制节点是否存在)
v-else 条件渲染(动态控制节点是否存在)
v-show 条件渲染(动态控制节点是否展示)
二、内置指令
v-text指令
1.作用:向其所在的节点中渲染文本内容
2.与插值语法的区别:v-text会替换节点中的内容 {{xx}}则不会
<div id="root">
<h2>{{name}}</h2>
<h2 v-text="name"></h2>
<h2 v-text="str"></h2>
</div>
<script>
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data:{
name:'尚硅谷',
str: '<h2>你好啊</h2>'
}
})
</script>
v-html指令
1.作用:向指定节点中渲染包含html结构的内容
2.与插值语法的区别:
(1).v-html会替换掉节点中所有的内容,{{xxx}}则不会
(2).v-html可以识别html结构
v-html存在安全性问题!!
<div id="root">
<h2>{{name}}</h2>
<h2 v-text="name"></h2>
<h3 v-html="str"></h3>
</div>
<script>
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data:{
name:'尚硅谷',
str: '<h2>你好啊</h2>'
}
})
</script>
v-cloak指令
v-cloak指令(没有值)
1.本质是一个特殊属性,vue实例创建完毕并接管容器后,会删掉v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-once指令
1.v-once所在的节点在初次动态渲染后,就视为静态内容了
2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能
<div id="root">
<h2 v-once>初始化的n值是:{{n}}</h2>
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
<script>
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data: {
n: 1
}
})
</script>
v-pre指令
1.跳过其所在节点的编译过程
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译
<div id="root">
<h2 v-pre>vue很简单</h2>
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
<script>
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data: {
n: 1
}
})
</script>