版权声明：转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84742432
模板语法
插值可以标签中的内容替代为对应数据对象上 name 属性的值。无论何时，绑定的数据对象上 name 属性发生了改变，插值处的内容都会更新。{{}}会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令。(v-text等同与{{}})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{name}}</div>
<div v-text="name"></div>
<div v-html="name"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
name: '<h1>Dell</h1>'
}
})
</script>
</body>
</html>
计算属性和侦听器
- 计算属性
在computed内中定义一个fullName的方法用于返回姓和名，计算属性具有缓存功能，即只有 firstName 或者 lastName 发生改变时才会重现渲染DOM，通过计算属性的get和set也可以实现数据改变时的重现渲染，因为数据改变时set方法会被调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性和侦听器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
{{age}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
firstName: "Dell",
lastName: "Lee",
age: 28
},
// 计算属性
computed: {
fullName: function() {
console.log("计算了一次");
return this.firstName + " " + this.lastName;
}
}
// computed: {
// fullName: {
// get: function() {
// return this.fullName = this.firstName + " " + this.lastName;
// },
// set: function(value) {
// var arr = value.split(" ");
// this.firstName = arr[0];
// this.lastName = arr[1];
// }
// }
// }
})
</script>
</body>
</html>
- 侦听器
我们通过watch来实现自定义的侦听器，当firstName或者lastName发生改变时页面就会重现渲染
...
// 侦听器
watch: {
firstName: function() {
console.log("计算了一次");
this.fullName = this.firstName + " " + this.lastName;
},
lastName: function() {
console.log("计算了一次");
this.fullName = this.firstName + " " + this.lastName;
}
}
...
- 总结
计算属性和侦听器都可以实现缓存，减少不必要的性能浪费，但是用侦听器实现计算属性可以实现的功能，代码会很冗余，所以在侦听器和计算属性都可以解决问题时，一般计算属性的效果更好