这节课我们讲一下vue的一大特性——数据驱动，通俗来说数据驱动就是我们在开发过程中只要关心数据是什么，然后把数据绑定到模板里，vue会自动把我们的数据显示在页面上，而不用我们去直接操作dom。
我们看一个例子就明白了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
const vueApp = Vue.createApp({
data() {
return {
message: '托尼，你好',
}
},
template: `
<div>{{message}}</div>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
我们data里有一个数据叫message，它的值是'托尼，你好'，然后在模板里我们通过双花括号把这个数据放到了这里，表示我们要把message的值在这个位置显示。这里data是一个方法，返回了一个对象，大家先不用理解为什么这么写，现在只要记住就行了。
打开页面，我们就会看到'托尼，你好'几个字显示出来了。
然后介绍一个生命周期函数，mounted，可以先理解为页面加载完成以后自动调用的方法，跟原生的window.onload类似，把这个回到函数加到我们的代码中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
// 数据绑定
const vueApp = Vue.createApp({
data() {
return {
message: '托尼，你好',
}
},
mounted() {
console.log('页面加载完成')
},
template: `
<div>{{message}}</div>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
打开开发者工具，我们看到控制台输出了'页面加载完成'，说明mounted这个函数已经被自动调用了。
下一步我们要修改一下显示的文字，在原生的开发中，我们要用getElementById的方式先获取到相应的dom元素，然后再设置它的的innerHTML来改变它的内容了。
现在用vue就方便很多，完全不用操作dom，只要改变数据就行了，下面就是完整的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
// 数据绑定
const vueApp = Vue.createApp({
data() {
return {
message: '托尼，你好',
}
},
mounted() {
console.log('页面加载完成')
setTimeout(() => {
this.message = '1秒后变成钢铁侠'
}, 1000)
},
template: `
<div>{{message}}</div>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
我们加了一个计时器，在页面加载完一秒后，让托尼变成了钢铁侠
非常简单方便，只用了一行，这里this.message就是data里面的message，vue提供给我们一个方便的写法，直接用this就可以访问和修改data里面的数据。其实是this.$data.message的简写方式，在以后的开发过程中，也全部都是使用简写的方式。
现在我们初步体验了一下数据驱动的方便、简介，建议大家自己动手歇一歇，这次教程就到这里了。
网友评论