分享Vue的一些小技巧-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比青銅峽網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式青銅峽網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋青銅峽地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

　　組件style的scoped

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

　　vue filters 過濾器的使用

　　列表渲染相關(guān)

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

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

　　路由懶加載寫法

　　路由的項目啟動頁和404頁面

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

　　組件style的scoped:

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

　　場景:

　　</template>

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

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

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

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

　　</script>

　　.test{

　　background:blue;

　　height:100px;

　　width:100px;

　　}

　　.testAdd{

　　background:red;

　　height:100px;

　　width:100px;

　　}

　　</style>

　　結(jié)果：

　　// test生效 testAdd 不生效

　　.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。

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

　　解決方式