分享Vue的一些小技巧

這篇文章主要介紹“分享Vue的一些小技巧”，在日常操作中，相信很多人在分享Vue的一些小技巧問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”分享Vue的一些小技巧”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)專注于嘉善企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,成都做商城網(wǎng)站。嘉善網(wǎng)站建設(shè)公司,為嘉善等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

組件style的scoped

Vue 數(shù)組/對象更新 視圖不更新

vue filters 過濾器的使用

列表渲染相關(guān)

深度watch與watch立即觸發(fā)回調(diào)

這些情況下不要使用箭頭函數(shù)

路由懶加載寫法

路由的項(xiàng)目啟動頁和404頁面

Vue調(diào)試神器:vue-devtools

組件style的scoped:

問題：在組件中用js動態(tài)創(chuàng)建的dom，添加樣式不生效。

場景:

<template>

<div></div>

</template>

<script>

let a=document.querySelector('.test');

let newDom=document.createElement("div"); // 創(chuàng)建dom

newDom.setAttribute("class","testAdd" ); // 添加樣式

a.appendChild(newDom); // 插入dom

</script>

<style scoped>

.test{

background:blue;

height:100px;

width:100px;

}

.testAdd{

background:red;

height:100px;

width:100px;

}

</style>

結(jié)果：

// test生效 testAdd 不生效

<div data-v-1b971ada><div></div></div>

.test[data-v-1b971ada]{ // 注意data-v-1b971ada

background:blue;

height:100px;

width:100px;

}

原因:

當(dāng) <style> 標(biāo)簽有 scoped 屬性時，它的 CSS 只作用于當(dāng)前組件中的元素。

它會為組件中所有的標(biāo)簽和class樣式添加一個scoped標(biāo)識，就像上面結(jié)果中的data-v-1b971ada。

所以原因就很清楚了：因?yàn)閯討B(tài)添加的dom沒有scoped添加的標(biāo)識，沒有跟testAdd的樣式匹配起來，導(dǎo)致樣式失效。

解決方式

推薦：去掉該組件的scoped

每個組件的css并不會很多，當(dāng)設(shè)計(jì)到動態(tài)添加dom，并為dom添加樣式的時候，就可以去掉scoped，會比下面的方法方便很多。

可以動態(tài)添加style

// 上面的栗子可以這樣添加樣式

newDom.style.height='100px';

newDom.style.width='100px';

newDom.style.background='red';

Vue 數(shù)組/對象更新 視圖不更新

很多時候，我們習(xí)慣于這樣操作數(shù)組和對象:

data() { // data數(shù)據(jù)

return {

arr: [1,2,3],

obj:{

a: 1,

b: 2

}

};

},

// 數(shù)據(jù)更新 數(shù)組視圖不更新

this.arr[0] = 'OBKoro1';

this.arr.length = 1;

console.log(arr);// ['OBKoro1'];

// 數(shù)據(jù)更新 對象視圖不更新

this.obj.c = 'OBKoro1';

delete this.obj.a;

console.log(obj); // {b:2,c:'OBKoro1'}

由于js的限制，Vue 不能檢測以上數(shù)組的變動，以及對象的添加/刪除，很多人會因?yàn)橄裆厦孢@樣操作，出現(xiàn)視圖沒有更新的問題。

解決方式:

this.$set(你要改變的數(shù)組/對象，你要改變的位置/key，你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改變數(shù)組

this.$set(this.obj, "c", "OBKoro1"); // 改變對象

如果還是不懂的話，可以看看這個codependemo。

數(shù)組原生方法觸發(fā)視圖更新:

Vue可以監(jiān)測到數(shù)組變化的，數(shù)組原生方法:

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

意思是使用這些方法不用我們再進(jìn)行額外的操作，視圖自動進(jìn)行更新。

推薦使用splice方法會比較好自定義,因?yàn)閟lice可以在數(shù)組的任何位置進(jìn)行刪除/添加操作，這部分可以看看我前幾天寫的一篇文章:【干貨】js 數(shù)組詳細(xì)操作方法及解析合集

3.替換數(shù)組/對象

比方說:你想遍歷這個數(shù)組/對象，對每個元素進(jìn)行處理，然后觸發(fā)視圖更新。

// 文檔中的栗子: filter遍歷數(shù)組，返回一個新數(shù)組，用新數(shù)組替換舊數(shù)組

example1.items = example1.items.filter(function (item) {

return item.message.match(/Foo/)

})

舉一反三：可以先把這個數(shù)組/對象保存在一個變量中，然后對這個變量進(jìn)行遍歷，等遍歷結(jié)束后再用變量替換對象/數(shù)組。

并不會重新渲染整個列表:

Vue 為了使得 DOM 元素得到最大范圍的重用而實(shí)現(xiàn)了一些智能的、啟發(fā)式的方法，所以用一個含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作。

如果你還是很困惑，可以看看Vue文檔中關(guān)于這部分的解釋。

vue filters 過濾器的使用:

過濾器，通常用于后臺管理系統(tǒng)，或者一些約定類型，過濾。Vue過濾器用法是很簡單，但是很多朋友可能都沒有用過，這里稍微講解一下。

在html模板中的兩種用法：

<!-- 在雙花括號中 -->

{{ message | filterTest }}

<!-- 在 `v-bind` 中 -->

<div :id="message | filterTest"></div>

在組件script中的用法:

export default {

data() {

return {

message:1

}

},

filters: {

filterTest(value) {

// value在這里是message的值

if(value===1){

return '最后輸出這個值';

}

}

}

}

用法就是上面講的這樣，可以自己在組件中試一試就知道了，很簡單很好用的。

如果不想自己試，可以點(diǎn)這個demo里面修改代碼就可以了，demo中包括過濾器串聯(lián)、過濾器傳參。

到此，關(guān)于“分享Vue的一些小技巧”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

名稱欄目：分享Vue的一些小技巧
鏈接分享：http://muchs.cn/article38/iiogsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、建站公司、響應(yīng)式網(wǎng)站、全網(wǎng)營銷推廣、做網(wǎng)站、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)