vue.js(5)学习 值插入（数据绑定）
文章目录
1、文本绑定（值插入）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test1">
<p>修改都数据: {{ msg }}</p>
<p>修改都数据: <span v-once>数据: {{ msg }}</span></p>
</div>
</body>
</html>
<script>
var test1 = new Vue({
el: '#test1',
data: {
msg: '值1'
}
})
//修改，但是这次修改，v-once 这个就不会变化了。
test1.msg = "变化2"
</script>
效果：
| 名称 | 介绍 |
|---|---|
| 文本：普通插值 | 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) |
| 文本：一次性地插值 | 通过使用 v-once 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新。 |
2、原始 HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test1">
<p>展示数据: {{ msg }}</p>
<p>展示数据: <span v-html="msg"></span></p>
</div>
</body>
</html>
<script>
var test1 = new Vue({
el: '#test1',
data: {
msg: '<span> 我是带 “ html标记 ” 的文本 </span>'
}
})
</script>
效果：
| 名称 | 介绍 |
|---|---|
| 原始 HTML：普通插值 | 使用 v-html 指令 |
（PS : 站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。）
3、Attribute
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test1">
<div v-bind:id="myId"></div>
<button v-bind:disabled="button1disabled">按钮1</button>
</div>
</body>
</html>
<script>
var test1 = new Vue({
el: '#test1',
data: {
button1disabled: "disabled",
myId: 1
}
})
</script>
效果：
Mustache 语法 ( 用大括号 “{{msg}}” 这种语法 ) 不能作用在 HTML 标记内，遇到这种情况应该使用 v-bind
| 名称 | 介绍 |
|---|---|
| Attribute：插入值 | 使用 v-bind |
（PS : 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 元素中。）
4、使用 JavaScript 表达式
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test1">
<div>
初始：{{num}}
</div>
<div>
表达式变化：{{num+1}}
</div>
</div>
</body>
</html>
<script>
var test1 = new Vue({
el: '#test1',
data: {
button1disabled: "disabled",
myId: 1,
num: 1
}
})
</script>
效果：
插入表达式的时候，要注意：
1、每个绑定都只能包含单个表达式
2、模板表达式都被放在沙盒中，只能访问全局变量的一个白名单
