文本渲染指令

文本渲染指令-v-html與v-text

Vue使用了基于HTML的模板語法，允許開發(fā)者聲明式地將DOM綁定至底層Vue實例的數(shù)據(jù)。所有Vue的模板都是

合法的HTML，所以能被遵循規(guī)范的瀏覽器和HTML解析器解析。

在前面，我們一直使用的是字符串插值的形式渲染文本，但是除此方法之外，vue還提供了其他幾種常見的文本渲

染方式：

1. v-text：更新元素的innerText

2. v-html：更新元素的innerHTML

    <div id="app"><p v-html="msg"></p><p v-text="msg"></p></div><script src="../js/vue3.js"></script><script>Vue.createApp({data(){return {msg: '<h1>hello</h1>'}},}).mount('#app');</script>

在Vue中，我們可以使用{{}}將數(shù)據(jù)插入到相應的模板中，這種方法是一種文本插值。

使用這種方法，如果網(wǎng)絡(luò)慢或者JavaScript出錯的話，會將{{}}直接渲染到頁面中。值得慶幸的是，Vue還提供了v-text和v-html來渲染文本或元素。這樣就避免了將{{}}直接渲染到頁面中。

屬性綁定指令

如果想讓html標簽中的屬性，也能應用Vue中的數(shù)據(jù)，那么就可以使用vue中常用的屬性綁定指令：v-bind

v-bind 指令可以簡寫為：:

    <div id="app"><p v-bind:title="msg">hello</p><!-- v-bind的簡寫形式 --> <p :title="msg">hello</p></div><script src="../js/vue3.js"></script><script>Vue.createApp({data(){return {msg: 'hello world!'}},}).mount('#app');</script>

上面展示的是v-bind的最基本的使用，第一種是完整語法，第二種是縮寫方式。

除了將元素的title屬性和vue實例的相關(guān)字段進行綁定外，還能將其他的屬性字段進行綁定，最常見的是對于樣式

的綁定，即class和style屬性。

綁定樣式

使用v-bind指令綁定class屬性，就可以動態(tài)綁定元素樣式了。

    <div id="app"><p :class="className">DOM元素的樣式綁定</p></div><script src="../js/vue3.js"></script><script>Vue.createApp({data(){return {className: 'one' }},}).mount('#app');</script><style>.one{color: red;}.two{font-size: 48px;}</style>

使用對象語法綁定樣式

我們可以給v-bind:class 一個對象，也可以直接綁定數(shù)據(jù)里的一個對象，以動態(tài)地切換class。

    <div id="app"><p :class="{one:isOne,two:isTwo}">DOM元素的樣式綁定</p></div><script src="../js/vue3.js"></script><script>Vue.createApp({el:'#app',data(){return {isOne: true,isTwo: true}},}).mount('#app');</script><style>.one{color: red;}.two{font-size: 48px;}</style>

使用三目運算綁定樣式

    <div id="app"><p :class="userId==1?classNameone:classNametwo">hello world!</p></div><script src="../js/vue3.js"></script><script>Vue.createApp({data(){return {userId:1,classNameone: 'one',classNametwo: 'two',}},}).mount('#app');</script><style>.one{color: red;}.two{font-size: 48px;}</style>

直接綁定內(nèi)聯(lián)樣式

    <div id="app"><p :style="{color:colorValue,fontSize:fontSizeValue}">hello world!</p></div><script src="../js/vue3.js"></script><script>Vue.createApp({data(){return {colorValue: 'orange',fontSizeValue: '50px'}},}).mount('#app');</script>

---

注意：綁定style屬性后，樣式的書寫要遵循javaScript規(guī)范。

同時要使用對象的形式加上{}

也就是將 xxx-xxx 改寫成駝峰命名方式 xxxXxxx

---

事件處理指令

事件綁定

我們可以用 v-on 指令綁定一個事件監(jiān)聽器，通過它調(diào)用我們 Vue 實例中定義的方法。

v-on指令可以簡寫為：@

 <div id="app"><!-- pointme就是點擊事件的處理函數(shù) --> <button v-on:click="pointme">點擊</button><!-- v-on指令的簡寫 --><button @click="pointme">點擊</button><!-- 焦點失去事件 --><input type="text" @blur="blurEvent"></div><script src="../js/vue3.js"></script><script>Vue.createApp({data(){return {}},//methods:此處聲明Vue方法 methods:{pointme(){//在控制臺輸出hello console.log('hello');},blurEvent(){console.log('焦點失去了');}}}).mount('#app');</script>

事件處理指令-事件處理的參數(shù)

事件處理時還可以傳遞參數(shù)。比如下面的案例：對一個數(shù)進行加減運算

    <div id="app">{{num}}<!-- 第一種寫法 --><button v-on:click="add">加</button><button @click="subtract">減</button><!-- 第二種優(yōu)化寫法 ()中的參數(shù)代表每次+2或-2--><button v-on:click="change(2)">加</button><button @click="change(-2)">減</button><!-- 第三種寫法 ()中傳多個參數(shù)使用,分開--><button v-on:click="change1(2, 10)">加</button><button @click="change1(-2, 10)">減</button></div><script src="../js/vue3.js"></script><script>Vue.createApp({data(){return {num: 0}},methods:{//第一種寫法的事件處理邏輯 add(){this.num++;},subtract(){this.num--;},//第二種優(yōu)化寫法的事件處理邏輯 change(value){this.num += value;},//第三種寫法的事件處理邏輯 change1(value, param){this.num += value;}}}).mount('#app');</script>

樣式切換實例

<div id="app"><p :class="className" @click="change">hello world!</p>
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data(){return {className: 'one'}},methods:{change(){this.className = this.className=='one'?'two':'one';}}}).mount('#app');
</script>
<style>.one{color: red;}.two{color: blue;}
</style>

事件對象

我們在學習JavaScript時知道，事件處理時會有一個事件對象。事件對象代表事件的狀態(tài)，比如事件在其中發(fā)生的

元素、鍵盤按鍵的狀態(tài)、鼠標的位置、鼠標按鈕的狀態(tài)。

在Vue的事件處理中，也可以使用 $event 的形式給事件處理函數(shù)傳遞事件對象。

 <div id="app">{{num}}<button v-on:click="change(3,$event)">加</button></div><script src="../js/vue3.js"></script><script>Vue.createApp({data(){return {num: 0}},methods:{change(value,event){this.num += value;console.log(event);console.log(event.target);}}}).mount('#app');</script>

---

注意：如果只傳遞事件對象這一個參數(shù)時， 也可以這樣簡寫 v-on:click="add" ， 也就是不加小括號時，默認 傳遞一個事件對象參數(shù)。

---

事件修飾符

我們還知道，在JavaScript中可以使用 event.preventDefault() 或 event.stopPropagation() 等來阻止事件冒泡，或

者阻止瀏覽器默認行為。那么Vue也提供了這樣的功能，叫做事件修飾符。

<div id="app"><div class="div1" @click="div1Event" @contextmenu.prevent><div class="div2" @click.stop="div2Event"></div></div>
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data(){return {num: 0}},methods:{div1Event(){console.log('div1點擊事件');},div2Event(){console.log('div2點擊事件');}}}).mount('#app');
</script>
<style>.div1{width: 200px;height: 200px;background-color: red;}.div2{width: 100px;height: 100px;background-color: blue;}
</style>

條件渲染指令

條件渲染指令，可以根據(jù)條件判斷，來設(shè)置元素的顯示與隱藏。

v-if指令與v-show指令

當v-if的值為false時，網(wǎng)頁中將不會對此元素進行渲染

<div id="app"><div v-if="isShow">這里使用v-if</div><div v-show="num==1">這里使用v-show</div>
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data(){return {isShow:true,num: 2}},}).mount('#app');
</script>

v-else指令和v-else-if指令

我們可以使用 v-else 指令來表示 v-if 的“else 塊”，v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的后面——否則它

將不會被識別。而v-else-if則是充當 v-if 的“else-if 塊”，可以鏈式地使用多次。

    <div id="app"><p v-for="(value,key,index) in user">{{index}}：{{key}}：{{value}}</p></div><script src="../js/vue3.js"></script><script>Vue.createApp({data(){return {user: {userId:1,userName: '張三',userSex: '男'}}},}).mount('#app');</script>

v-if指令和v-show指令

<div id="app"><div v-if="isShow">這里使用v-if</div><div v-show="num==1">這里使用v-show</div>
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data(){return {isShow:true,num: 2}},}).mount('#app');
</script>

通過上面的例子，我們不難發(fā)現(xiàn)兩者的不同：

1. v-if是真正的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建。

2. v-if是惰性的，只有當條件為true時才會渲染，如果條件為false則什么都不做

3. v-if有很高的切換開銷，適用于條件不太容易改變的時候

4. v-show不管條件是true還是false都會進行渲染。并且只是簡單地基于 CSS 進行切換

5. v-show有很高的初始渲染開銷，適用于非常頻繁地切換

循環(huán)遍歷指令

vue.js 的循環(huán)渲染是依賴于 v-for 指令，它能夠根據(jù) vue 的實例里面的信息，循環(huán)遍歷所需數(shù)據(jù)，然后渲染出相應

的內(nèi)容。它可以遍歷數(shù)組類型以及對象類型的數(shù)據(jù)，js 里面的數(shù)組本身實質(zhì)上也是對象，這里遍歷數(shù)組和對象的時

候，方式相似但又稍有不同。

遍歷對象屬性

value 是遍歷得到的屬性值，key 是遍歷得到的屬性名，index 是遍歷次序，這里的 key、index 都是可選參數(shù)，如

果不需要，這個指令其實可以寫成 v-for="value in user"；

<div id="app"><p v-for="(value,key,index) in user">{{index}}：{{key}}：{{value}}</p><!-- 簡單寫法 --><p>{{user.userId}}</p><p>{{user.userName}}</p><p>{{user.userSex}}</p>
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data(){return {user: {userId:1,userName: '張三',userSex: '男'}}},}).mount('#app');
</script>

遍歷數(shù)組元素

value 是遍歷得到的元素，index 是數(shù)組下標，這里的index 也是可選參數(shù)，如果不需要，這個指令其實可以寫成

v-for="value in userArr"；

<div id="app"><!-- <p v-for="user in userArr">{{user.userId}},{{user.userName}},{{user.userSex}}</p> --><ul><li v-for="(user,index) in userArr" :key="user.userId">{{index}},{{user.userId}},{{user.userName}},{{user.userSex}}</li></ul>
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {user: {userId: 1,userName: '張三',userSex: '男'},userArr: [{userId: 1,userName: '張三',userSex: '男'},{userId: 2,userName: '李四',userSex: '男'},{userId: 3,userName: '王五',userSex: '女'}]}},}).mount('#app');
</script>

關(guān)于循環(huán)中的key

上面實例中存在一個問題：當更改數(shù)組中某一個元素時，Vue會對整個數(shù)組進行重新渲染。在實際開發(fā)中，這樣的

代碼是不被允許的，在數(shù)據(jù)量很多的時候，它會嚴重降低頁面的性能。

這時，你可以加唯一性key值，增加后vue就會辨認出哪些內(nèi)容被渲染后并沒有變化，而只渲染新變化的內(nèi)容。

<!-- 這里使用userId這樣一個唯一標識來作為key值 --> 
<p v-for="(item,index) in userArr" :key="item.userId"> {{item.userId}},{{item.userName}},{{item.userSex}} <button @click="operate(index)">操作</button> 
</p> 

綜合案例

<div id="app"><table><tr><th>編號</th><th>姓名</th><th>年齡</th><th>操作</th></tr><tr v-for="(user,index) in userArr" :key="user.userId"><td>{{user.userId}}</td><td>{{user.userName}}</td><td>{{user.userAge}}</td><td><button @click="del(index)">刪除</button></td></tr><tr><td colspan="4"><button @click="clear">清空</button></td></tr></table><h3>添加</h3>姓名<input type="text" v-model="userName"><br>年齡<input type="text" v-model="userAge"><br><button @click="add">添加</button>
</div><script src="../js/vue3.js"></script>
<script>Vue.createApp({data() {return {userArr: [{userId: 1,userName: '張三',userAge: 22}, {userId: 2,userName: '李四',userAge: 23}, {userId: 3,userName: '王五',userAge: 24}],userName: '',userAge: 0}},methods:{add(){let userId = 0;if(this.userArr.length == 0){userId = 1;}else{userId = this.userArr[this.userArr.length-1].userId+1;}let user = {userId: userId,userName: this.userName,userAge: this.userAge}this.userArr.push(user);},del(index){this.userArr.splice(index,1);},clear(){this.userArr.splice(0,this.userArr.length);}}}).mount('#app');
</script>
<style>#app {width: 500px;.}table {width: 100%;border-collapse: collapse;}table tr th,table tr td {height: 35px;border-bottom: solid 1px #999;text-align: center;}
</style>