主要紀錄練習，文字較少，准確的語法概念等參考 Vue 官網文檔。
目錄：
1. 模板語法
2. 指令
3. 條件渲染
4. 列表渲染
5. ref
6. JSX
Vue.js 使用了基於 HTML 的模板語法，所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規范的瀏覽器和 HTML 解析器解析。
文本插值
我的另一篇關於插值的筆記：https://www.cnblogs.com/xiaoxuStudy/p/12849530.html
一次性插值
使用 v-once 實現一次性插值。
插入原始 HTML
使用 v-html 實現
注意：易導致 XSS 攻擊，絕不要對 UGC 內容使用。UGC內容就是用戶貢獻的東西，用戶填寫的顯示到頁面上的內容。
<template> <div> <div v-html="description"></div> </div> </template> <script> export default { data(){ return { description : "俺是<b>小許</b>" } } } </script>
JavaScript
<template> <div> <div>{{ gender === "male" ? "Boy" : "Girl" }}</div> </div> </template> <script> export default { data(){ return { gender : "female" } } } </script>
我的另一篇關於指令的筆記： https://www.cnblogs.com/xiaoxuStudy/p/12853971.html
指令（Derectives）是帶有 v- 前綴的特殊特性，指令的職責是當表達式的值改變時，將其產生的連帶影響響應式地作用於標記了該指令的一個 dom 節點。在所有指令中，只能使用表達式。
v-bind
作用：參數傳遞
例 1
通過 v-bind 把 title 這個響應式的值綁定到 img 標簽的 alt 屬性上。如果無法顯示圖像，瀏覽器將顯示替代文本。
<template> <div class="hello"> <img v-bind:alt="title" src=""> </div> </template> <script> export default { props: {msg: String}, data(){ return { title: "圖片加載失敗" } } } </script>
例 2
把響應式的值 example 綁定到 p 標簽的 class 屬性上。給 p 元素添加一個樣式。
v-on
Vue 官網中 v-on 的部分：https://cn.vuejs.org/v2/api/#v-on
舉個例子:
在 button 標簽上，通過 v-on 這個指令去監聽 click 事件，click 的回調函數在 methods 里面去寫，這里回調函數是 sayHi。點擊按鈕之后設置 id 為 demo 的標簽的內容為“你好~”。
<template> <div> <button v-on:click="say_hi">點擊</button> <p id="demo"></p> </div> </template> <script> export default { methods:{ say_hi(){ document.getElementById("demo").innerHTML = `你好~`; } } } </script>
v-bind 跟 v-on 的縮寫
v-bind：
可縮寫為：
v-on：
可縮寫為：
v-if
例 1
<template> <div v-if="fruit === apple">喜歡蘋果</div> <div v-else-if="fruit === orange">喜歡橙子</div> <div v-else>喜歡別的水果</div> </template> <script> export default { data(){ return{ fruit : 'watermelon' } } } </script>
例 2
v-show
v-for
例 1
<template> <div> <ul> <b>看看 value 是啥：</b> <li v-for="value in friends" :key="value.id"> {{ value }} </li> </ul> </div> </template> <script> export default { data(){ return{ friends: [ {id:1, name: '莫娜'}, {id:2, name: 'ZENG'}, {id:3, name: '發發'} ] } } } </script>
例 2
<template> <div> <ul> <li v-for="(value, key, index) in object" :key="value"> {{ index }} . {{ key }} : {{ value }} </li> </ul> </div> </template> <script> export default { data(){ return{ object: { name : "xiaoxu", sex: "female", favouriteDrink: "lemon tea" } } } } </script>
例 3
<template> <div> <ul> <li v-for="(p, index) in class1" :key="p.id"> {{ `${index}.${p.name}` }} </li> </ul> </div> </template> <script> export default { data(){ return{ class1:[ {id:1, name:"小許"}, {id:2, name:"莫娜"}, {id:3, name:"可愛欣欣"}, ] } } } </script>
例 4
<template> <div> <ul> <li v-for="n in 10" :key="n"> {{ n }} </li> </ul> </div> </template> <script> export default { data(){ return{} } } </script>
⚠ 注意：不推薦在同一元素上使用 v-if 和 v-for
如果非要用，記住 v-if 的優先級高於 v-if
我的另一篇關於 ref 的筆記：https://www.cnblogs.com/xiaoxuStudy/p/13209245.html
有時候可能需要在 JS 中直接訪問一個子組件或者模板上的 dom 節點，為了達到這個目的，可以通過 ref 為子組件賦值一個 id 引用。在模板渲染后，可以通過 $refs 去訪問注冊了 red 的元素對象，之所可以通過 $refs 引用，是因為 ref 被用來給元素或子組件注冊引用信息后，引用信息將會注冊在父組件的 $refs 對象上。注意：只有在模板渲染后才可以訪問 ref ，因為渲染之前模板不存在。
例子：
實現在文本框進行鍵盤操作的同時在文本框右方實時輸出文本框的內容。
<template> <div id="app"> <h1>ref</h1> <label>姓名</label> <input type="text" ref="mingzi" @keyup="getName"/> <span>{{ name }}</span><br> <label>年齡</label> <input type="text" ref="nianling" @keyup="getAge"/> <span>{{ age }}</span> </div> </template> <script> export default { name: "app", data(){ return{ name: '', age: '' } }, methods:{ getName(){ //獲取姓名文本框的內容，修改name的值 this.name = this.$refs.mingzi.value }, getAge(){ //獲取年齡文本框的內容，修改age的值 this.age = this.$refs.nianling.value } } } </script>
頁面表現：
在文本框內輸入內容后，在文本框右方實時更新文本框的內容。
在大多數情況下，模板都可以用 HTML 來書寫。但是，如果熟悉虛擬 dom ，並且不喜歡重復書寫復制粘貼代碼，希望考慮到可重用性，也可以不使用模板，直接渲染 render 函數。這時，就需要用到 JSX 語法。
下面通過 JSX 來寫一個模板：
帶 template 模板的：
首先要在單文件組件中拋棄 template 模板，然后聲明一個 render 函數，return 模板。
<script> export default { props: {msg: String}, data(){ return{ title: "Hello" }; }, render(){ return <div class="hello">template</div>; } }; </script>
上面實現了一個簡單的 JSX 的使用。頁面表現與上面帶 template 模板的是一樣的。
頁面表現：
條件渲染
在 JSX 中，使用原始的 JS 語法用 if 語句進行判斷。下面例子中，如果年齡大於 18 ，就return 一個模板，如果不滿足年齡大於 18，就 return 另一個模板。
<script> export default { props: {msg: String}, data(){ return{ user: { age: 22, name: "小許" } }; }, render(){ if(this.user.age > 18){ return <div>Welcome, {this.user.name}</div> } return <div>No Log</div> } }; </script>
頁面表現：
列表渲染
下面例子中，使用數組里面的 map 方法去遍歷 classmate，然后返回對應的模板，通過 key 進行 key 值的綁定。
<script> export default { props: {msg: String}, data(){ return{ classmates: [ {id: 1, name: "小陸"}, {id: 2, name: "柯柯"}, {id: 3, name: "可頌"}, ] }; }, render(){ return( <div class="hello"> {this.classmates.map((p, index) => ( <div key={p.id}> {`${index}.${p.name}`} </div> ))} </div> ); } }; </script>
頁面表現：
