Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 - Vue指令
?
目錄
指令寫法
自定義指令
簡單封裝指令
指令傳遞字符串
update事件
指令應用
指令實現輪播
指令函數簡寫
指令函數列表
bind
inserted
update
componentUpdated
unbind
Vue3指令輪播
nextick
總結
指令寫法
指令：為了操作底層dom。
實際應用：可以通過指令知道什么時候dom創建完成，從而進行依賴dom的庫初始化工作。
自定義指令
對普通dom元素進行底層操作。
編寫一個輸入框，當被綁定的元素插入到dom中時，
輸入框獲取焦點。
示例如下：
<div id="box"><input v-focus name="name" />
</div>
<script src="../lib/vue.js"></script>
<script>// 注冊一個全局自定義指令 'v-focus'Vue.directive("focus", {// 當被綁定的元素插入到dom中時inserted:function(el) {// 聚焦元素el.focus()}})new Vue({el:"#box"})
</script>?
簡單封裝指令
做一個簡單的指令封裝。
示例如下：
<div id="box"><div v-hello>你好 vue</div>
</div>
<script src="../lib/vue.js"></script>
<script>Vue.directive("hello", {// 指令的生命周期inserted(el) {console.log("inserted", el)el.style.background = "red"}})new Vue({el:"#box"})
</script>?
指令傳遞字符串
如果在參數中不包含單引符號，則識別為狀態，需要提前定義好。
示例如下：
<div id="box"><div v-hello=" 'yellow'">你好 vue</div><div v-hello=" 'blue'">你好 vue</div>
</div>
<script src="../lib/vue.js"></script>
<script>Vue.directive("hello", {// 指令的生命周期inserted(el, binging) {console.log("inserted", binging)el.style.background = binging.value}})new Vue({el:"#box"})
</script>inserted事件，是在第一次插入到父節點時觸發。
update事件
可以在update觸發事件中修改值進行指令賦值。
示例如下：
<div id="box"><div v-hello=" 'yellow'">你好 vue</div><div v-hello=" 'blue'">你好 vue</div><div v-hello="whichColor">你好 vue</div>
</div>
<script src="../lib/vue.js"></script>
<script>Vue.directive("hello", {// 指令的生命周期inserted(el, binging) {console.log("inserted", binging)el.style.background = binging.value},update(el, binging) {console.log("update")el.style.background = binging.value}})let vm = new Vue({el:"#box",data : {whichColor: "red"}})
</script>效果：
指令應用
指令實現輪播
使用指令來完成輪播。
因為不知道什么時候數據什么時候插入的，直接綁定一個指令。
給指令傳遞對象參數。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../lib/swiper-bundle.css"><style>.swiper-container {width: 600px;height: 300px;}</style>
</head>
<body>
<div id="box"><header>導航</header><div class="swiper-container demo"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(data, index) in datalist" :key="data" v-swiper="{index:index,length:datalist.length}"><img :src="data" alt=""/></div></div><!-- 如果需要分頁器 --><div class="swiper-pagination"></div></div><footer>底部內容</footer>
</div>
<script src="../lib/swiper-bundle.js"></script>
<script src="../lib/vue.js"></script>
<script>Vue.directive("swiper", {// 指令的生命周期inserted(el, binging) {let {index,length} = binging.valueif (index === length - 1) {new Swiper(".demo", {// 如果需要分頁器pagination: {el: '.swiper-pagination',},loop:true,autoplay: {delay: 2500,disableOnInteraction:false}})}}})new Vue({el: '#box',data: {datalist:[],},mounted() {// ajaxsetTimeout(()=> {this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg","https://tsj.youdubook.com/cover/book_cover_6.jpg","https://tsj.youdubook.com/cover/book_cover_265.jpg","https://tsj.youdubook.com/cover/book_cover_2819.jpg","https://tsj.youdubook.com/cover/book_cover_219.jpg"]}, 2000)}})
</script>
</body>
</html>?
指令函數簡寫
這種方式，更新和創建都會觸發，如果兩種觸發都是同樣的處理可以使用簡寫方式。
示例如下：
Vue.directive("hello", ()=> {console.log("創建或者更新都會執行")
})?
指令函數列表
bind
只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
inserted
被綁定元素插入父節點時調用（僅保證父節點存在，但不一定已被插入文檔中）。
update
所在組件的VNode更新時調用，但是可能發生在其子VNode更新之前。指令的值可以發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新。
componentUpdated
指令所在組件的VNode及其子VNode全部更新后調用。
unbind
只調用一次，指令與元素解綁時調用。
Vue3指令輪播
使用app.directive()定義指令
生命周期需要更換inserted更換為mounted
示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../lib/swiper-bundle.css"><style>.swiper-container {width: 600px;height: 300px;}</style>
</head>
<body>
<div id="box"><header>導航</header><div class="swiper-container demo"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(data, index) in datalist" :key="data" v-swiper="{index:index,length:datalist.length}"><img :src="data" alt=""/></div></div><!-- 如果需要分頁器 --><div class="swiper-pagination"></div></div><footer>底部內容</footer>
</div>
<script src="../lib/swiper-bundle.js"></script>
<script src="../lib/vue.next.js"></script>
<script>let obj = {data() {return {datalist:[]}},mounted() {// ajaxsetTimeout(()=> {this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg","https://tsj.youdubook.com/cover/book_cover_6.jpg","https://tsj.youdubook.com/cover/book_cover_265.jpg","https://tsj.youdubook.com/cover/book_cover_2819.jpg","https://tsj.youdubook.com/cover/book_cover_219.jpg"]}, 2000)}}let app = Vue.createApp(obj)// app.component()// app.component()app.directive("swiper", {// 指令的生命周期mounted(el, binging) {let {index,length} = binging.valueif(index === length - 1) {new Swiper(".demo", {// 如果需要分頁器pagination: {el: '.swiper-pagination',},loop:true,autoplay: {delay: 2500,disableOnInteraction:false}})}}})app.mount("#box")
</script>
</body>
</html>?
nextick
當數據更新到dom中時，會觸發一次性的監聽事件。
示例如下：
let obj = {data() {return {datalist:[]}},mounted() {// ajaxsetTimeout(()=> {this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg","https://tsj.youdubook.com/cover/book_cover_6.jpg","https://tsj.youdubook.com/cover/book_cover_265.jpg","https://tsj.youdubook.com/cover/book_cover_2819.jpg","https://tsj.youdubook.com/cover/book_cover_219.jpg"]}, 2000)this.$nextTick(() => {console.log("比updated執行的都晚，而且只執行一次")})}
}可以在tick中處理實例化，會在數據源更新后，觸發一次實例化。
示例如下：
let obj = {data() {return {datalist:[]}},mounted() {// ajaxsetTimeout(()=> {this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg","https://tsj.youdubook.com/cover/book_cover_6.jpg","https://tsj.youdubook.com/cover/book_cover_265.jpg","https://tsj.youdubook.com/cover/book_cover_2819.jpg","https://tsj.youdubook.com/cover/book_cover_219.jpg"]}, 2000)this.$nextTick(() => {console.log("比updated執行的都晚，而且只執行一次")new Swiper(".demo", {// 如果需要分頁器pagination: {el: '.swiper-pagination',},loop:true,autoplay: {delay: 2500,disableOnInteraction:false}})})}
}總結
Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 - Vue指令介紹及應用示例
)
)
最小棧)