這節(jié)課我們講一下vue的一大特性——數(shù)據(jù)驅(qū)動扼褪，通俗來說數(shù)據(jù)驅(qū)動就是我們在開發(fā)過程中只要關(guān)心數(shù)據(jù)是什么想幻，然后把數(shù)據(jù)綁定到模板里，vue會自動把我們的數(shù)據(jù)顯示在頁面上话浇，而不用我們?nèi)ブ苯硬僮鱠om脏毯。
我們看一個例子就明白了。
<!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里有一個數(shù)據(jù)叫message抄沮，它的值是'托尼，你好'岖瑰，然后在模板里我們通過雙花括號把這個數(shù)據(jù)放到了這里叛买，表示我們要把message的值在這個位置顯示。這里data是一個方法蹋订，返回了一個對象率挣，大家先不用理解為什么這么寫，現(xiàn)在只要記住就行了露戒。
打開頁面椒功，我們就會看到'托尼，你好'幾個字顯示出來了智什。
然后介紹一個生命周期函數(shù)动漾，mounted，可以先理解為頁面加載完成以后自動調(diào)用的方法荠锭，跟原生的window.onload類似旱眯，把這個回到函數(shù)加到我們的代碼中
<!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>
// 數(shù)據(jù)綁定
const vueApp = Vue.createApp({
data() {
return {
message: '托尼，你好',
}
},
mounted() {
console.log('頁面加載完成')
},
template: `
<div>{{message}}</div>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
打開開發(fā)者工具证九，我們看到控制臺輸出了'頁面加載完成'删豺，說明mounted這個函數(shù)已經(jīng)被自動調(diào)用了。
下一步我們要修改一下顯示的文字愧怜，在原生的開發(fā)中呀页，我們要用getElementById的方式先獲取到相應(yīng)的dom元素，然后再設(shè)置它的的innerHTML來改變它的內(nèi)容了拥坛。
現(xiàn)在用vue就方便很多蓬蝶，完全不用操作dom尘分，只要改變數(shù)據(jù)就行了，下面就是完整的代碼丸氛。
<!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>
// 數(shù)據(jù)綁定
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里面的數(shù)據(jù)卧波。其實是this.$data.message的簡寫方式时肿，在以后的開發(fā)過程中，也全部都是使用簡寫的方式港粱。
現(xiàn)在我們初步體驗了一下數(shù)據(jù)驅(qū)動的方便螃成、簡介，建議大家自己動手歇一歇查坪，這次教程就到這里了寸宏。
