vue 中最基本的代碼結(jié)構(gòu)
<!DOCTYPE html>
<html lang="ch-Hans">
<head>
<meta charset="UTF-8">
<title>Vue代碼結(jié)構(gòu)</title>
<!-- 導(dǎo)入vue插件 -->
<script src="./lib/vue.js"></script>
</head>
<body>
<!-- 將來 new 的Vue實(shí)例，會(huì)控制這個(gè)元素中的所有內(nèi)容 -->
<div id="app">
<p>{{ value }}</p>
</div>
<script>
// 2.創(chuàng)建一個(gè)Vue實(shí)例
// 當(dāng)我們導(dǎo)入包之后，在瀏覽器的內(nèi)存中就多了一個(gè)vue的構(gòu)造函數(shù)
var vm = new Vue({
//表示一個(gè)當(dāng)前我們new的這個(gè)Vue實(shí)例，要控制頁面上的哪個(gè)區(qū)域
el: '#app',
//data屬性存放的是el中要用到的數(shù)據(jù)
data: {
//通過Vue提供的指令，很方便的把數(shù)據(jù)渲染到指定位置，不需要操作DOM元素了
value: '歡迎學(xué)習(xí)Vue'
},
methods:{
show(){
this.value = '歡迎學(xué)習(xí)Vue!!!!'
}
}
})
</script>
</body>
</html>
})
1.el:
選擇器 ，指定控制的區(qū)域。
2.data
是個(gè)對象，制定了控制區(qū)域內(nèi)需要用到的數(shù)據(jù)。
3.methods
雖然帶了個(gè)s后綴，但本身是一個(gè)對象。這里定義了一些函數(shù) methods 函數(shù)中如果想訪問 data 中的數(shù)據(jù)必須添加 this。
