模板語法
-
文本綁定，兩個大括號，中間加上data裏面的數據，message裏面不僅可以是變量還可以是表達式
<body> <div id="main"> // 變量 {{ message }} <br/> // 表達式 {{ number + 1}} </div> </body> <script> const vm = new Vue({ el: '#main', data: { message: 'Welcome to Chivalrous Island!', number: 7 }, }) </script> - JS表達式（計算、拼接、只能是單個表達式）
-
插入HTML代碼（慎用！防止XSS攻擊 ），我們可以直接在data裏面定義html代碼，但是它存在一個安全隱患，比如我們將下面的
dangerHTMl: "<span>0085</span>"這句代碼改變一下dangerHTML: "<span onclick='alert(0085)'>0085</span>"，這時候的當我們點擊時它執行了它裏面的一個代碼會彈出一個框，這是很危險的。像很多個XSS攻擊就是用的這種方法，所以對於v-html我們還是要慎用。<div v-html="dangerHTMl"></div> data: { ... dangerHTMl: "<span>0085</span>" } -
綁定，把data裏面的數據綁定到元素的屬性上，最常見的就是id
<div v-bind:id="id" v-html="dangerHTML"></div> data: { ... id: 'oldId' }
當data裏面的數據改變時，它的Id也會隨之改變。<div v-bind:id="id"> <button v-on:click="changeId">changeId</button> </div> methods: { changeId: function() { this.id = 'newId'; } }
除了Id的綁定之外，還有其他的一些綁定：
-
v-bind:disabled => :disabled，一個元素的屬性
常用於表單，比如一些輸入框，按鈕，如下：這個時候的按鈕就是一個不可點擊的狀態了。<button v-bind:disabled="idDisabled" v-on:click="changeId">changeId</button> - v-bind:href 簡寫 :href，鏈接
- v-on:click 簡寫 @click，點擊
計算屬性（緩存機制）
data: {
json: {
key1: 1,
key2: 2
}
},
methods: {
...
computed: {
getJsonkey1: function() {
return this.json.key1;
}
},
// 計算屬性的緩存需要藉助watch函數的監聽
watch: {
json: {
handler: function(newVal,preVal){
console.log(JSON.stringify(preVal));
console.log(JSON.stringify(newVal));
},
deep: true,
}
}
}在vue裏面監聽json需要深度監聽，因爲它們是在同一個內存空間裏面，地址是一樣的。
這個時候打印出來的，我們會發現它們的新值和舊值都是一樣的，這是由於它們是同一個內存地址我們訪問時值已經改變。如果我們要改變兩次的值不一樣，那麼我們需要用到計算屬性裏面的緩存。
比如先不監聽json，而是監聽getJsonkey1的方法，將watch的json變成getJsonkey1，這樣的話我們就可以得到前後的兩個值。
條件渲染
- v-if，判斷元素是否要渲染，會複用元素(不想複用需要添加key)
- v-else-if
- v-else
-
if else if else
testVIf: 'A', <button v-if="testVIf === 'A'">A</button> <button v-else-if="testVIf === 'B'">B</button> <!-- 當判斷條件都不滿足時顯示 <button v-else>C</button> - v-show，它和v-if 的區別在於，當v-if條件不滿足時，那麼整個元素都不會被渲染，但是當v-show不滿足時，它只是不顯示元素，相當於css display的none。它們兩的用法是完全一樣的。
事件處理
主要分爲點擊事件和鍵盤事件。
- v-on:click，簡寫屬性@click
-
v-on:click.stop，阻止單擊事件繼續傳播
<button v-on:click.stop="doAgain"></button> -
v-on:submit.prevent，提交事件不再重載頁面
<form v-on:submit.prevent="onSubmit"></form> -
v-on:click.stop.prevent，修飾符可以串聯
<button v-on:click.stop.prevent="contact"></button> -
v-on:submit.prevent，只有修飾符
<form v-on:submit.prevent></form>
按鍵修飾符（鍵盤事件）：
-
v-on:keyup
keyup(e) { alert(JSON.stringify(e)); } <input v-on:keyup.enter="keyup" type="text">keyup監聽的是一個所有的鍵盤事件，如果我們只想監聽某一個事件，那麼我們可以在
v-on:keyup後面添加下面屬性，然後點擊觸發即可。除此之外，對於下面的某一事件監聽我們可以輸入它對應的鍵盤碼，比如enter對應的是13，
v-on:keyup.13="keyup"同樣的我們也是點擊enter觸發事件。 - v-on:keyup.enter，監聽回車鍵
- v-on:keyup.tab
- v-on:keyup.delete
- v-on:keyup.esc
- v-on:keyup.space
- v-on:keyup.up
- v-on:keyup.down
- v-on:keyup.left
- v-on:keyup.right
雙向數據綁定（表單處理）
例如一個輸入框，當我們輸入一個值時，我們綁定的數據會變，而當我們手動的去改動這個值的時候，輸入框裏面的值也會隨之改變。
v-model，不僅可以綁定value，還可以綁定表單裏面的一些其他屬性checked和selected，表單元素除了輸入框之外比如複選框、單選框、下拉框都是可以的。
輸入框數據的雙向綁定：
<input v-model="inputValue" type="text">
<!-- 點擊事件 -->
<button @click="changeInputValue">changeInputValue</button>data: {
...
inputValue: 10805,
}
methods: {
...
// 當我們點擊按鈕時，觸發changeInputValue，實現累加
changeInputValue: function() {
this.inputValue++;
}
}
watch: {
...
inputValue: function() {
console.log(this.inputValue);
}
}
複選框：
<input v-model="checkboxValue" type="checkbox">
data: {
// 默認選中
checkboxValue: true
}