***** ### 文本 在html中通過{{}}（雙大括號）中可以把Vue對象中的數據插入到網頁中。并且只要Vue對象上對應的值發生改變了，那么html中雙大括號中的值也會立馬改變。 ``` <div id="app"> <p>{{username}}</p> <button v-on:click="change">點擊修改</button> </div> <script> let vm = new Vue({ el: "#app", data: { "username": "邏輯教育" }, methods: { change: function(){ this.username = 'China'; } } }); </script> ``` 當然，如果在html的{{}}中，第一次渲染完成后，不想要跟著后期數據的更改而更改，那么可以使用v-once指令來實現。 ``` <p v-once>{{username}}</p> ``` ### 顯示原生的HTML 有時候我們的Vue對象中，或者是后臺返回給我們一個段原生的html代碼，我們需要渲染出來，那么如果直接通過{{}}渲染，會把這個html代碼當做字符串。這時候我們就可以通過v-html指令來實現 ``` <div id="app"> <div v-html="code"></div> </div> <script> let vm = new Vue({ el: "#app", data: { "code": "<a href='https://www.baidu.com/'>百度一下，你就知道！</a>" } }); </script> ``` ### 屬性綁定 如果我們想要在html元素的屬性上綁定我們Vue對象中的變量，那么需要通過v-bind來實現 ``` <div id="app"> <img class="{{classname}}">你好，世界</p> </div> <script> let vm = new Vue({ el: "#app", data: { "classname": "pclass" }, }); </script> ``` 需要使用v-bind才能生效 ``` <div id="app"> <img v-bind:src="imgSrc" alt=""> </div> <script> let vm = new Vue({ el: "#app", data: { "imgSrc": "https://i.ytimg.com/vi/5HKZ6bU6Zg0/maxresdefault.jpg" } }); </script> ``` ### 屬性綁定Class和Style 在綁定class或者style的時候，可以通過以下方式來實現。 #### 綁定Class 通過數組的方式來實現 ``` <div id="app"> <p v-bind:class="[classname1,classname2]">你好，世界</p> </div> <script> let vm = new Vue({ el: "#app", data: { classname1: "pcolor", classname2: "pfont" } }); </script> ``` 通過對象的方式來實現 ``` <div id="app"> <p v-bind:class="{pcolor:isColor,pfont:isFont}">你好，世界</p> </div> <script> let vm = new Vue({ el: "#app", data: { isColor: true, isFont: true } }); </script> ``` #### 綁定Style 用對象的方式 ``` # 讀取對應樣式的值 <li :style="{backgroundColor:pBgColor,fontSize:pFontSize}">首頁</li> # 或者是直接讀取整個字符串 <li :style="liStyle">首頁</li> ``` 但是樣式如果有橫線，則都需要變成駝峰命名的方式 用數組的方式 ``` <li :style="[liStyle1,liStyle2]">首頁</li> <script> new Vue({ el: "#app", data: { liStyle: { backgroundColor: "red", fontSize: "14px" }, liStyle2: { fontWeight: 800 } } }) </script> ``` ### 使用JavaScript表達式 在使用了v-bind的html屬性，或者使用了{{}}的文本。我們還可以執行一個JavaScript表達式 ``` <div id="app"> <p v-bind:style="{color:color?'red':'blue'}">{{username.split(" ").reverse().join(" ")}}</p> </div> <script> let vm = new Vue({ el: "#app", data: { username: "luoji ketang", color: false } }); </script> ``` 注意，只能是JavaScript表達式，不能是語句，比如var a=1;a=2;這樣的是js語句，不是表達式了 ### 條件判斷 在模板中，可以根據條件進行渲染。條件用到的是v-if、v-else-if以及v-else來組合實現的 ``` <div id="app"> <p v-if="weather == 'sun'">今天去公園玩！</p> <p v-else-if="weather == 'rain'">今天去看電影！</p> <p v-else>今天哪兒也不去！</p> </div> <script> let vm = new Vue({ el: "#app", data: { weather: 'sun' } }); </script> ``` 有時候我們想要在一個條件中加載多個html元素，那么我們可以通過template元素上實現 ``` <div id="app"> <template v-if="age<18"> <p>數學多少分？</p> <p>英語多少分？</p> </template> <template v-else-if="age>=18 && age<25"> <p>女朋友找到了嗎？</p> <p>考研究生了嗎？</p> </template> <template v-else> <p>二胎生了嗎？</p> <p>工資多少？</p> </template> </div> <script> let vm = new Vue({ el: "#app", data: { age: 24 } }); </script> ``` 另外，在模板中，Vue會盡量重用已有的元素，而不是重新渲染，這樣可以變得更加高效。如果你允許用戶在不同的登錄方式之間切換 ``` <div id="app"> <template v-if="loginType=='username'"> <label for="username">用戶名：</label> <input type="text" id="username" name="username" placeholder="用戶名"> </template> <template v-else-if="loginType=='email'"> <label for="email">郵箱：</label> <input type="text" id="email" name="email" placeholder="郵箱"> </template> <div> <button v-on:click="changeLoginType">切換登錄類型</button> </div> </div> <script> let vm = new Vue({ el: "#app", data: { loginType: "username" }, methods: { changeLoginType: function(event){ this.loginType = this.loginType=="username"?"email":"username"; } } }); </script> ``` 這個里面會有一個問題，就是如果我在username的輸入框中輸入完信息，切換到郵箱中，之前的信息還是保留下來，這樣肯定不符合需求的，如果我們想要讓html元素每次切換的時候都重新渲染一遍，可以在需要重新渲染的元素上加上唯一的key屬性，其中key屬性推薦使用整形，字符串類型。 ``` <div id="app"> <template v-if="loginType=='username'"> <label for="username">用戶名：</label> <input type="text" id="username" name="username" placeholder="用戶名" key="username"> </template> <template v-else-if="loginType=='email'"> <label for="email">郵箱：</label> <input type="text" id="email" name="email" placeholder="郵箱" key="email"> </template> <div> <button v-on:click="changeLoginType">切換登錄類型</button> </div> </div> ``` 注意，<label>元素仍然會被高效地復用，因為它們沒有添加key屬性 ### v-show和v-if v-if是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。 v-if也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。 相比之下，v-show就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于CSS進行切換。 一般來說， v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在運行時條件很少改變，則使用v-if較好。 ## 循環 在模板中可以用`v-for`指令來循環數組，對象等 ### 循環數組 ~~~ <div id="app"> <table> <tr> <th>序號</th> <th>標題</th> <th>作者</th> </tr> <tr v-for="(book,index) in books"> <td>{{index}}</td> <td>{{book.title}}</td> <td>{{book.author}}</td> </tr> </table> </div> ~~~ ### 循環對象 循環對象跟循環數組是一樣的。并且都可以在循環的時候使用接收多個參數 ~~~ <div id="app"> <div v-for="(value,key) in person"> {{key}}:{{value}} </div> </div> <script> let vm = new Vue({ el: "#app", data: { person: { "username": "邏輯教育", "age": 18, "homepage": "https://www.baidu.com/" } } }); </script> ~~~ ### 保持狀態 循環出來的元素，如果沒有使用`key`元素來唯一標識，如果后期的數據發生了更改，默認是會重用的，并且元素的順序不會跟著數據的順序更改而更改 ~~~ <div id="app"> <div v-for="(book,index) in books"> <label for="book">{{book}}</label> <input type="text" v-bind:placeholder="book"> </div> <button v-on:click="changeBooks">更換圖書</button> </div> <script> let vm = new Vue({ el: "#app", data: { books: ['三國演義','水滸傳','紅樓夢','西游記'] }, methods: { changeBooks: function(event){ this.books.sort((x,y) => { return 5 - parseInt(Math.random()*10) }); } } }); </script> ~~~ ### 觸發視圖更新 `Vue`對一些方法進行了包裝和變異，以后數組通過這些方法進行數組更新，會出發視圖的更新。 1. `push()`：添加元素的方法。 ~~~ this.books.push("居然") ~~~ 2. `pop()`：刪除數組最后一個元素。 ~~~ this.books.pop() ~~~ 3. `shift()`：刪除數組的第一個元素。 ~~~ this.books.shift() ~~~ 4. `unshift(item)`：在數組的開頭位置添加一個元素。 ~~~ this.books.unshift("居然") ~~~ 5. `splice(index,howmany,item1,...,itemX)`：向數組中添加或者刪除或者替換元素。 ~~~ // 向books第0個位置添加元素 this.books.splice(0,0,"金瓶梅") // 下標從0開始，刪除2個元素 this.books.splice(0,2) // 下標從0開始，替換2個元素 this.books.splice(0,2,'金瓶梅','駱駝祥子') ~~~ 6. `sort(function)`：排序。 ~~~ this.books.sort(function(x,y){ // 取兩個隨機數排序 a = Math.random(); b = Math.random(); return a-b; }); ~~~ 7. `reverse()`：將數組元素進行反轉。 ~~~ this.books.reverse(); ~~~ ### 視圖更新注意事項 1. 直接修改數組中的某個值是不會出發視圖更新的。比如： ~~~ this.books[0] = 'Python'; ~~~ 這種情況應該改成用`splice`或者是用`Vue.set`方法來實現： ~~~ Vue.set(this.books,0,'Python'); ~~~ 2. 如果動態的給對象添加屬性，也不會觸發視圖更新。只能通過`Vue.set`來添加。比如： ~~~ <div id="app"> <ul> <li v-for="(value,name) in person">{{name}}:{{value}}</li> </ul> <script> let vm = new Vue({ el: "#app", data: { person: {"username": '邏輯教育'} }, methods: { changePerson: function(event){ Vue.set(this.person,'age',18) } } }); </script> </div> ~~~ ## 事件綁定 事件綁定就是在`HTML`元素中，通過`v-on`綁定事件的。事件代碼可以直接放到`v-on`后面，也可以寫成一個函數。 ~~~ <div id="app"> <p>{{count}}</p> <button v-on:click="count+=1">加</button> <button v-on:click="subtract(10)">減10</button> </div> <script> let vm = new Vue({ el: "#app", data: { count: 0 }, methods: { subtract: function(value){ this.count -= value; } } }); </script> ~~~ ### 傳入`event`參數 如果在事件處理函數中，想要獲取原生的`DOM`事件，那么在`html`代碼中，調用的時候，可以傳遞一個`$event`參數。 ~~~ <button v-on:click="subtract(10,$event)">減10</button> ... <script> ... methods: { subtract: function(value,event){ this.count -= value; console.log(event); } } ... </script> ~~~