第一個(gè)DEMO
<html>
<head>
<title>
Vue demo
</title>
<script src="vue.js"></script>
</head>
<body>
<div>
{{ msg }}
</div>
<script>
let vm = new Vue({
//必須掛載到一個(gè)根標(biāo)簽上
el:"#app",
data: {
msg:"Hello VUE!"
},
});
</script>
</body>
</html>`
文本
使用“Mustache”語(yǔ)法 (雙大括號(hào)) 輸出vm的data數(shù)據(jù)到頁(yè)面
V-html指令
innerHTML精刷，vm視圖綁定技術(shù)
Attribute
Mustache 語(yǔ)法不能作用在 HTML attribute 上微饥，遇到這種情況應(yīng)該使用 v-bind 指令
使用 JavaScript 表達(dá)式
對(duì)于所有的數(shù)據(jù)綁定栽惶，Vue.js 都提供了完全的 JavaScript 表達(dá)式支持莺葫。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
這些表達(dá)式會(huì)在所屬 Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個(gè)限制就是夏哭，每個(gè)綁定都只能包含單個(gè)表達(dá)式歉胶，所以下面的例子都不會(huì)生效。
指令
指令 (Directives) 是帶有 v- 前綴的特殊 attribute劝篷。指令 attribute 的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 是例外情況哨鸭，稍后我們?cè)儆懻?。指令的職責(zé)是娇妓，當(dāng)表達(dá)式的值改變時(shí)兔跌，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM峡蟋。
指令的所需
v-bind ----- 》 : v-on----------------->@
v-on指令
指令的事件列表：https://www.runoob.com/jsref/dom-obj-event.html
指令縮寫(xiě)：@
事件名稱請(qǐng)參見(jiàn)：https://www.runoob.com/jsref/dom-obj-event.html，所有的事件名需要去除on
事件只能在vm中的methods中定義华望，事件的響應(yīng)函數(shù)的第一個(gè)參數(shù)event代表事件對(duì)象本身
訂閱事件不需要加“（）”
計(jì)算屬性
1蕊蝗、計(jì)算屬性本質(zhì)是一個(gè)函數(shù)，函數(shù)的返回值作為屬性值存在
2赖舟、操作類似屬性蓬戚，編寫(xiě)類似函數(shù)
3、計(jì)算屬性有數(shù)據(jù)緩存功能
4宾抓、只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值子漩，如果計(jì)算屬性依賴data屬性，則在依賴的data屬性值發(fā)生改變后石洗，計(jì)算屬性會(huì)重新計(jì)算
