6,Vue的第六个实例:反应数据绑定
<!DOCTYPE html>
<html lang =“en”>
<HEAD>
<meta charset =“UTF-8”>
<meta name =“viewport”content =“width = device-width,initial-scale = 1.0”>
<meta http-equiv =“X-UA-Compatible”content =“ie = edge”>
<TITLE>反应数据绑定</ TITLE>
<script src =“https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js”> </ script>
</ HEAD>
<BODY>
<! - Vue.js的核心是一个反应式数据绑定系统,它使得保持数据和DOM同步非常简单 - >
<! - 我们运用某些vue语法将DOM“绑定”到底层数据。一旦创建了绑定,DOM就会与数据保持同步。无论何时修改数据,DOM都会相应地更新 - >
<div id =“example-1”>
您好{{name}}!
</ DIV>
<SCRIPT>
var exampleData = {
名称:'Vue.js'//与数据绑定,直接对数据的操作,DOM同步更新
//怎么感受到变化?打开浏览器开发者控制台并进行修改exampleData.name。您应该看到上面呈现的示例相应地更新
}
var exampleVM = new Vue({
el:'#example-1',
data:exampleData
})
</ SCRIPT>
</ BODY>
</ HTML>
结果:
7,Vue的第七个实例:反应数据绑定
<!DOCTYPE html>
<html lang =“en”>
<HEAD>
<meta charset =“UTF-8”>
<meta name =“viewport”content =“width = device-width,initial-scale = 1.0”>
<meta http-equiv =“X-UA-Compatible”content =“ie = edge”>
<TITLE>反应数据绑定2 </ TITLE>
<script src =“https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js”> </ script>
</ HEAD>
<BODY>
<div id =“example-2”>
<! - v-if指令v-表示它们是Vue.js提供的特殊属性
它们会对呈现的DOM应用特殊的反应行为。
所以我们不仅可以将DOM文本绑定到数据,还可以将DOM的结构绑定到数据
还有很多其他指令,每个指令都有自己的特殊功能
- >
<p v-if =“greeting”>你好!</ p>
</ DIV>
<SCRIPT>
var exampleVM2 = new Vue({
el:'#example-2',
数据:{
问候:是的
}
})
</ SCRIPT>
</ BODY>
</ HTML>
结果:
8,Vue的第八个实例:计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算属性</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<!-- 模板用于描述视图的结构,不要加入太多的逻辑,
这可能使它们变得臃肿和难以维护,这就是Vue.js仅将绑定表达式限制为一个表达式的原因。
对于需要多个表达式的任何逻辑,您应该使用计算属性。 -->
<body>
<div id="example">
a={{a}}, b={{b}}
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
a: 1
},
// 计算
computed: {
b: function() {
// this指向vm实例
return this.a + 1
}
}
})
</script>
</body>
</html>
结果: