v-bind
v-bind用来绑定数据
相关用法
（1）动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
（2）在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。
（3）动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
按常规vue中写v-bind >>>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="hello">
<h1>{{say}}</h1>
<a href="{{link}}">baidu</a>
</div>
<script>
var a = new Vue({
el: '#hello',
data: {
say: "hellochanke",
link: "https://www.baidu.com"
}
})
</script>
</body>
</html>
运行结果如图:
但是点击baidu后，出现错误的页面
在Vue中如何解决这个超链接跳转错误的问题？
在 href 中是不支持{{}}的，我们必须换个方式，就用到了v-bind进行绑定
写法： v-bind:href="link"
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="hello">
<h1>{{say}}</h1>
<a v-bind:href="link">baidu</a>
</div>
<script>
var a = new Vue({
el: '#hello',
data: {
say: "hellochanke",
link: "https://www.baidu.com"
}
})
</script>
</body>
</html>
之后再次点击baidu,运行结果正确
v-once
写法:
<h1>{{say}}</h1>
相关解释
(1)只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
(2)通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
按常规vue中写v-once >>>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="hello">
<span v-once>你当前看见的这条信息只被渲染一次，之后再遇到渲染时会被当做静态内容跳过: {{msg}}</span>
</div>
<script>
var a = new Vue({
el: '#hello',
data: {
msg:"不负韶华，砥砺前行"
}
})
</script>
</body>
</html>
v-html
双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：
html内容渲染 >>>
相关解释
（1）更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
（2）如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
按常规vue中写v-html >>>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="hello">
<h1 v-html="display"></h1>
</div>
<script>
var a = new Vue({
el: '#hello',
data: {
display:"<span style='color:red;'>12345</span>"
}
})
</script>
</body>
</html>
运行结果如图所示:
特别注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
跨站点脚本（XSS）是一种通常在Web应用程序中发现的计算机安全漏洞。XSS攻击使攻击者能够将客户端脚本注入其他用户查看的网页中。攻击者可能会使用跨站点脚本漏洞来绕过诸如同源策略之类的访问控制。 XSS的影响范围从微小的滋扰到严重的安全风险，其范围取决于脆弱站点处理的数据的敏感性以及站点所有者网络实施的任何安全缓解措施的性质。
