VUE零碎小技巧1

2022-09-09 15:48:40 字數 2078 閱讀 3191

準備 scss 庫

分離頁面主結構，建立各個頁面元件 views

views/home/index.vue + views/home/store.js

**元件中內容是顯示還是不顯示，在**顯示，如何顯示，這就是內容分發所幹的活

**

預設情況下，呼叫元件時，內部寫內容是不會顯示的，如果想要顯示，就需要使用到插槽

// 定義元件


// 使用元件


你好！！！！！
瀏覽器中並未顯示 你好！！！！！

定義元件新增 slot 標籤，可以使元件的內容顯示

// 定義元件


// 使用元件


你好！！！！！
第乙個中間顯示 您好！！！！ 第二個中間顯示的是預設的 中

如果元件的結構都需要 可 自定義傳遞 ----- 具名插槽

// 定義元件


// 使用元件


你好！！！！！


logo


首頁掃一掃


返回詳情


分享
可以給各個元件新增不同的事件

元件中內容是顯示還是不顯示，在**顯示，如何顯示，這就是內容分發所幹的活

一般在 自定義元件 和 ui 庫使用時居多，可以提高元件的 復用性

可以獲取dom節點



段落描述


獲取dom節點
獲取子元件的資料

獲取子元件的資料
子元件可以直接獲取父元件中的資料和方法

子元件直接獲取父元件的資料
元件中的相同部分抽離為乙個 js 模組，使用元件的混入選項匯入即可,如果有相同的部分，以元件的選項為主

mixins/header.js

import header from '@/components/header'


export default ,


methods: 


}}
home.vue

首頁


我的
about.vue



關於我的
簡化元件的** ----- 提交元件的復用性

全域性的自定義指令 vue.directive() ---- main.js

vue.directive('focus', 


})
區域性的自定義指令 } -- **使用**定義 --- home.vue

export default 


}}}
使用指令 v-name name為自定義指令的名稱

全域性過濾器 --- main.js

vue.filter('***filter', (val) => )
區域性過濾器 --- **使用**定義 --- home.vue

filters: 


}
使用 }

頁面間切換效果

about

} 


加1獲取div的值

零碎小知識

1.將字串轉換成對應的列舉 列舉 enum.parse typeof 列舉 阿薩德飛 true 將字串轉換成對應的列舉，忽略大小寫。列舉 enum.parse typeof 列舉 阿薩德飛 不忽略大小寫 2.訪問控制符 3.在try catch finally中,當return遇到finally 1...

iOS零碎小知識

判斷螢幕解析度 bool retina cgsizeequaltosize cgsizemake 640,960 uiscreen mainscreen currentmode size 返回true說明當前解析度是cgsizemake 640,960 false則不是 遇到類似這樣的錯誤faile...

C C 零碎小知識

有關於main函式，使用者可以呼叫main函式。include using namespace std int main int argv,argc 對於以上的例子，實際上我們能夠直接呼叫main函式，輸出的結果其實為一直遞迴呼叫輸出1直到棧溢位。對於乙個陣列的陣列名和同型別的指標的問題，我們可以將...