?2016-2026 Matools All rights reserved,
粵ICP備17059708號
vue中你不知道的東西、以及注意事項
*
v-html
*
使用 v-html的時候該指令中的值會覆蓋綁定標(biāo)簽中原有的值，且使用v-html的時候不要將他設(shè)置為給用戶提供內(nèi)容的地方，因?yàn)関-html很容易被XSS攻擊
*
v-bind
* 使用v-bind綁定屬性值為布爾值的屬性時，如果數(shù)據(jù)為truthy，則該布爾值屬性都不會被渲染出來
* 如果數(shù)據(jù)值為其他任意存在的值，就意味著值為true
*
v-if
*
使用v-if綁定的標(biāo)簽，當(dāng)其指令值為truthy的時候該標(biāo)簽是直接被刪除掉了
*
而當(dāng)其指令值為其他任意存在的值時，就意味著值為true
*
如果您現(xiàn)在有一個需求是讓多個標(biāo)簽都使用v-if，則可以使用template標(biāo)簽，使用該標(biāo)簽包裹需要被一起隱藏或顯示的標(biāo)簽，在該標(biāo)簽上綁定v-if即可
* <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p>
</template>
*
v-show
* 和v-if的區(qū)別在于v-show是將標(biāo)簽設(shè)置為 display:none;的
*
動態(tài)參數(shù)
*
定義：在v-bind中，被綁定的屬性被稱之為參數(shù)，如 id、class、href、src...
*
用法：使用方括號括起來的js表達(dá)式作為指令的動態(tài)參數(shù)
*
注意事項：在使用動態(tài)參數(shù)的時候，需要避免使用大寫的字符來命名，因?yàn)闉g覽器會把命名強(qiáng)制轉(zhuǎn)換為小寫，其次，動態(tài)參數(shù)有一些語法約束，如空格和引號放在動態(tài)參數(shù)中是無效的
* <div id="app"> <!-- 2.6.0版本新增:動態(tài)參數(shù) --> <img v-bind:[attribute]="url"> <!--
這里的attribute寫成大寫也能有效果，因?yàn)闉g覽器會把該變量名強(qiáng)制轉(zhuǎn)換為小寫 --> <br> <!-- <img :['s'+ 'rc']="url"
alt=""> --> <!-- 這種寫法在編譯時會報錯，因?yàn)椴辉试S使用引號 --> <img :[compsrc]="url" alt=""> </div>
<script> const vm = new Vue({ el: '#app', data: { attribute: 'src', url:
'./images/logo-footer.png' }, computed: { // 通過使用計算屬性巧妙避開在動態(tài)參數(shù)中使用引號和空格
compsrc() { return 's' + 'rc' } }, }) </script>
*
vue中復(fù)用性的問題
*
因?yàn)関ue會盡可能高效的渲染元素，通常會復(fù)用已有的元素。
*
大家可能以前出現(xiàn)過這樣的問題，
* <!-- 有時候我們可能想實(shí)現(xiàn)這樣的效果：我點(diǎn)擊按鈕的時候改變登錄方式，即如下的賬號和用戶名兩種 --> <template
v-if='isShow'> <label for='number'>賬號:</label> <input type="text" id="number">
</template> <template v-else> <label for="username">用戶名:</label> <input
type="text" id="username"> </template> <button
@click='btnClick'>切換isShow</button> <!--
但是這樣使用之后我們會出現(xiàn)這樣一個問題:當(dāng)我們在其中一個登錄方式輸入了東西之后，我們突然想切換另一個登錄方式，那么我點(diǎn)擊切換之后，按道理來說我們輸入框中的信息應(yīng)該被重置掉，因?yàn)槲覀儾皇鞘褂玫耐粋€input文本框。但是事實(shí)總是相反的，原因就在于vue會復(fù)用已存在的元素，所以其實(shí)根本就沒有創(chuàng)建一個新的input文本框
-->
*
解決方案：在input標(biāo)簽中加入一個 key
屬性，給該屬性命名(字符串or數(shù)字)，加以區(qū)分即可。但是這不會導(dǎo)致label標(biāo)簽不復(fù)用，因?yàn)閘abel標(biāo)簽沒有key屬性。
*
v-for的注意事項：
*
在v-for的語法中其實(shí)可以把in代替為of作為分隔符；
*
數(shù)組更新檢測：
*
變異方法(變異方法就是改變了原數(shù)組的方法，即：push,pop,shift,unshift,splice,sort,reverse)，Vue可以監(jiān)聽到數(shù)組的變化，并在遍歷的時候動態(tài)遍歷
* 替換方法(替換方法就是生成了新數(shù)組的方法，即：filter,concat,slice等等)，當(dāng)使用替換方法時，可以用新數(shù)組替換原來的數(shù)組
* 注意事項：當(dāng)你利用索引直接添加一個數(shù)組項時、當(dāng)你修改數(shù)組長度時，Vue不是響應(yīng)性的
* 解決方法： vm.lists.splice(index,num,newValue) or
Vue.set(vm.lists,index,newValue)
* 對象的變更檢測也是如此，不能通過對象名.新屬性名去手動添加新屬性，但是也可以使用Vue.set(vm.lists,index,newValue)
的方法進(jìn)行添加。
*
在 <template> 上使用 v-for
* <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li
class="divider" role="presentation"></li> </template> </ul>
*
v-for與v-if一同使用的問題
* 當(dāng)這兩個指令處于同一個節(jié)點(diǎn)，v-for的優(yōu)先級比v-if的高
* 官方不推薦我們用使用這兩個指令，除非你是為了部分項渲染節(jié)點(diǎn)時，這種優(yōu)先級機(jī)制就發(fā)揮了重要作用
*
在組件中使用v-for的注意事項
*
在有些html元素中，對于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴(yán)格限制的，例如：p元素中如果有div元素，那么div會被提升到跟p元素外部，所以在進(jìn)行組件化開發(fā)的時候，在使用這些約束條件的元素會有一些問題。
* <table> <blog-post-row></blog-post-row> </table> <!--
這個自定義組件會被提升到tabel之外，最終渲染的樣式肯定就出錯了 -->
*
解決方法：使用Vue中提供的 is 屬性
* <table> <tr is="blog-post-row"></tr> </table>
*
事件處理
* 事件修飾符
*
* once ：綁定的事件只執(zhí)行一次；可以被使用在組件事件中
* prevent ：阻止默認(rèn)事件的發(fā)生，如超鏈接的跳轉(zhuǎn)、點(diǎn)擊事件的點(diǎn)擊
* stop ：阻止冒泡行為的方法（由內(nèi)到外）
* capture ：讓事件進(jìn)行捕獲（由外到內(nèi)）
* self ：只有當(dāng)事件該本身元素觸發(fā)時才發(fā)生
* passive ：滾動事件的默認(rèn)行為（滾動行為）將會立即觸發(fā)
* 注意：不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，
.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。
*
表單輸入值綁定
* 修飾符
*
* .lazy ：將 input事件監(jiān)聽（同步更新）轉(zhuǎn)換為 change事件監(jiān)聽（當(dāng)失去焦點(diǎn)時更新）
* .number ：自動將用戶的輸入值轉(zhuǎn)為數(shù)字類型
* .trim ：自動過濾用戶輸入的首尾空白字符
熱門工具 換一換