<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                [TOC] >[success] # 開發實現 Vue 中的自定義指令 在這之前想 **給input默認獲取到焦點** ,我們都需要通過 **ref** 的方式來 **觸發焦點** ,如下代碼: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發實現 Vue 中的自定義指令</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 自定義指令 directive const app = Vue.createApp({ mounted(){ this.$refs.input.focus() }, template: ` <div> <input ref="input" /> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 這么寫代碼, **自定聚焦的邏輯無被復用**,像 **對dom 的操作** ,其實我們可以通過 **封裝自定義指令** ,來實現 **dom邏輯** 的 **復用** 。 >[success] ## (全局自定義指令)實現input默認觸發焦點 下面的 **v-focus** 就是我們 **自定義的指令** ,**自定義指令** 有一個 **生命周期函數 mounted** ,指的是 **當我這個指令掛載到某一個 dom 元素上的時候** , **mounted函數會自動執行** ,執行之后會 **接收第一個參數 el** , **el 就是綁定指令的元素** , **掛載dom** 之后,執行 **el.focus()** 就實現自己聚焦的效果。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發實現 Vue 中的自定義指令</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 自定義指令 directive const app = Vue.createApp({ template: ` <div> <input v-focus /> </div> ` }) // 定義全局自定義指令 app.directive('focus', { mounted(el){ // 接收el元素 el.focus() } }) const vm = app.mount('#root') </script> </html> ~~~ 那么除了 **mounted 生命周期函數** 還有哪些其它的 **生命周期函數** 呢,具體如下代碼: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發實現 Vue 中的自定義指令</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 自定義指令 directive const app = Vue.createApp({ data(){ return { hello: true } }, template: ` <div> <div v-show="hello"> <input v-focus /> </div> </div> ` }) // 定義全局自定義指令 app.directive('focus', { beforeMount(){ // 指令即將掛載到頁面元素上的時候 console.log('beforeMount') }, // 接收el元素 mounted(el){ // 指令掛載到頁面元素時 console.log('mounted') el.focus() }, beforeUpdate(){ // (v-show的值變更)重新渲染input之前時 console.log('beforeUpdate') }, updated(){ // (v-show的值變更)重新渲染input時 console.log('updated') }, beforeUnmount(){ // (v-if=false)被銷毀之前 console.log('beforeUnmount') }, unmounted(){ // (v-if=false)被銷毀之后 console.log('unmounted') } }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## (局部自定義指令)實現input默認觸發焦點 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發實現 Vue 中的自定義指令</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 局部自定義指令 const directives = { focus: { mounted(el){ // 接收el元素 el.focus() } } } const app = Vue.createApp({ // directives: directives , // 等同于下面的寫法 directives, // 引入局部自定義指令 template: ` <div> <input v-focus /> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 實戰案例 用 **自定義指令來決定header距離頂部的位置** ,我們通過 **傳入data** 中的 **top值** ,就可以實現 **動態更改header距離頂部的距離** ,代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發實現 Vue 中的自定義指令</title> <style> .header{ position: absolute; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 自定義指令 directive const app = Vue.createApp({ data(){ return { top: 500 } }, template: ` <div> <div v-pos="top" class="header"> <input /> </div> </div> ` }) // 定義全局自定義指令 app.directive('pos', { /** * @param {object} el - 綁定指令的dom元素 * @param {object} binding - 自定義指令捆綁元素身上的信息 */ mounted(el, binding){ el.style.top = `${ binding.value }px` // 自定義指令傳入過來的值 } }) const vm = app.mount('#root') </script> </html> ~~~ 但是這里有個問題,我們在 **瀏覽器** 通過 **vm.top = 1000** 修改 **top** 的位置,會發現 **header 位置 ,并沒有改變** ,這是 **因為數據發生變化時,自定義指令中的 mounted 并不會重新執行** ,想要讓位置改變需要使用 **updated 生命周期函數** ,代碼如下: >[success] ### 更新數據 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發實現 Vue 中的自定義指令</title> <style> .header{ position: absolute; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 自定義指令 directive const app = Vue.createApp({ data(){ return { top: 500 } }, template: ` <div> <div v-pos="top" class="header"> <input /> </div> </div> ` }) // 定義全局自定義指令 app.directive('pos', { /** * 初始化時 * @param {object} el - 綁定指令的dom元素 * @param {object} binding - 自定義指令捆綁元素身上的信息 */ mounted(el, binding){ el.style.top = `${ binding.value }px` // 自定義指令傳入過來的值 }, /** * 數據更新時 * @param {object} el - 綁定指令的dom元素 * @param {object} binding - 自定義指令捆綁元素身上的信息 */ updated(el, binding){ el.style.top = `${ binding.value }px` // 自定義指令傳入過來的值 } }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ### 定義指令時邏輯簡寫 在 **vue** 中,如果你的 **自定義指令** 里只有 **mounted** 與 **updated** , **而且它倆邏輯寫的同樣情況下,可以把它簡寫** , **簡寫的形式 directive 的第二個參數是一個箭頭函數** ,代碼如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發實現 Vue 中的自定義指令</title> <style> .header{ position: absolute; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 自定義指令 directive const app = Vue.createApp({ data(){ return { top: 500 } }, template: ` <div> <div v-pos="top" class="header"> <input /> </div> </div> ` }) // --------------------簡寫形式---------------------------------------------------- /** * 初始化時 * @param {object} el - 綁定指令的dom元素 * @param {object} binding - 自定義指令捆綁元素身上的信息 */ app.directive('pos', (el, binding) => { el.style.top = `${ binding.value }px` // 自定義指令傳入過來的值 }) // --------------------非簡寫形式---------------------------------------------------- // // 定義全局自定義指令 // app.directive('pos', { // /** // * 初始化時 // * @param {object} el - 綁定指令的dom元素 // * @param {object} binding - 自定義指令捆綁元素身上的信息 // */ // mounted(el, binding){ // el.style.top = `${ binding.value }px` // 自定義指令傳入過來的值 // }, // /** // * 數據更新時 // * @param {object} el - 綁定指令的dom元素 // * @param {object} binding - 自定義指令捆綁元素身上的信息 // */ // updated(el, binding){ // el.style.top = `${ binding.value }px` // 自定義指令傳入過來的值 // } // }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ### 模仿v-on:click的寫法 在上面我們使用了自己定義的 **自定義指令 v-pos** ,那我們回想一下在 **vue** 中, 有 **v-on:click** ,那我們也可以這樣寫: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發實現 Vue 中的自定義指令</title> <style> .header{ position: absolute; } </style> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 自定義指令 directive const app = Vue.createApp({ data(){ return { distance: 500, // 距離 direction: 'left' // 方向 } }, template: ` <div> <div v-pos:[direction]="distance" class="header"> <input /> </div> </div> ` }) /** * 初始化時 * @param {object} el - 綁定指令的dom元素 * @param {object} binding - 自定義指令捆綁元素身上的信息 */ app.directive('pos', (el, binding) => { el.style[binding.arg] = `${ binding.value }px` // 自定義指令傳入過來的值 }) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看