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

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                >[success] # 自定義指令 1. `vue`除了官方提供的指令 ,也支持自定義指令,自定義指令主要是為了重用涉及普通元素的底層 DOM 訪問的邏輯 * **自定義局部指令**:組件中通過 `directives `選項,只能在當前組件中使用; ~~~js <template> <div> 1111 <input v-focus /> </div> </template> <script> export default { directives: { focus: { // 生命周期的函數(自定義指令) mounted(el) { console.log('v-focus應用的元素被掛載了', el) el?.focus() }, }, }, } </script> <style></style> ~~~ * **自定義全局指令**:app的 directive 方法,可以在任意組件中被使用 ~~~ import { createApp } from 'vue' const app = createApp(App) app.directive('focus', { // 生命周期的函數(自定義指令) mounted(el) { // console.log("v-focus應用的元素被掛載了", el) el?.focus() }, }) app.mount('#app') ~~~ * 本地的自定義指令在`<script setup>`中不需要顯式注冊,但他們必須遵循`vNameOfDirective`這樣的命名規范 ~~~html <script setup> const vMyDirective = { beforeMount: (el) => { // 在元素上做些操作 } } </script> <template> <h1 v-my-directive>This is a Heading</h1> </template> ~~~ 如果指令是從別處導入的,可以通過重命名來使其符合命名規范: ~~~html <script setup> import { myDirective as vMyDirective } from './MyDirective.js' </script> ~~~ >[info] ## 指令的生命周期 **created**:在綁定元素的 attribute 或事件監聽器被應用之前調用; **beforeMount**:當指令第一次綁定到元素并且在掛載父組件之前調用; **mounted**:在綁定元素的父組件被掛載后調用; **beforeUpdate**:在更新包含組件的 VNode 之前調用; **updated**:在包含組件的 VNode 及其子組件的 VNode 更新后調用; **beforeUnmount**:在卸載綁定元素的父組件之前調用; **unmounted**:當指令與元素解除綁定且父組件已卸載時,只調用一次; >[danger] ##### 生命周期的鉤子函數 注意 :除了`el`外,其他參數都是只讀的,不要更改它們 ~~~ const myDirective = { // 在綁定元素的 attribute 前 // 或事件監聽器應用前調用 created(el, binding, vnode, prevVnode) { // 下面會介紹各個參數的細節 }, // 在元素被插入到 DOM 前調用 beforeMount(el, binding, vnode, prevVnode) {}, // 在綁定元素的父組件 // 及他自己的所有子節點都掛載完成后調用 mounted(el, binding, vnode, prevVnode) {}, // 綁定元素的父組件更新前調用 beforeUpdate(el, binding, vnode, prevVnode) {}, // 在綁定元素的父組件 // 及他自己的所有子節點都更新后調用 updated(el, binding, vnode, prevVnode) {}, // 綁定元素的父組件卸載前調用 beforeUnmount(el, binding, vnode, prevVnode) {}, // 綁定元素的父組件卸載后調用 unmounted(el, binding, vnode, prevVnode) {} } ~~~ * 鉤子函數的參數 * `el`:指令綁定到的元素。這可以用于直接操作 DOM。 * `binding`:一個對象,包含以下屬性。 * `value`:傳遞給指令的值。例如在`v-my-directive="1 + 1"`中,值是`2`。 * `oldValue`:之前的值,僅在`beforeUpdate`和`updated`中可用。無論值是否更改,它都可用。 * `arg`:傳遞給指令的參數 (如果有的話)。例如在`v-my-directive:foo`中,參數是`"foo"`。 * `modifiers`:一個包含修飾符的對象 (如果有的話)。例如在`v-my-directive.foo.bar`中,修飾符對象是`{ foo: true, bar: true }`。 * `instance`:使用該指令的組件實例。 * `dir`:指令的定義對象。 * `vnode`:代表綁定元素的底層 VNode。 * `prevNode`:之前的渲染中代表指令所綁定元素的 VNode。僅在`beforeUpdate`和`updated`鉤子中可用。 >[danger] ##### 指令傳參 ~~~ <template> <div> 1111 <input v-focus:foo.bar="'baz'" /> </div> </template> <script> export default { directives: { focus: { // 生命周期的函數(自定義指令) mounted(el, binding) { console.log(binding) el?.focus() }, }, }, } </script> <style></style> ~~~ * 打印結果 ~~~ { arg: 'foo', modifiers: { bar: true }, value: /* `baz` 的值 */, oldValue: /* 上一次更新時 `baz` 的值 */ } ~~~ ![](https://img.kancloud.cn/3e/97/3e97b46e3739d4731771a25a8af731eb_576x172.png) ***** * 傳入的是字面量 ~~~ <div v-demo="{ color: 'white', text: 'hello!' }"></div> ~~~ ~~~ app.directive('demo', (el, binding) => { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!" }) ~~~ >[danger] ##### 動態傳值 ~~~ <div v-example:[arg]="value"></div> ~~~ >[danger] ##### 縮寫 對于自定義指令來說,一個很常見的情況是僅僅需要在`mounted`和`updated`上實現相同的行為,除此之外并不需要其他鉤子。這種情況下我們可以直接用一個函數來定義指令,如下所示: ~~~ <div v-color="color"></div> ~~~ ~~~ app.directive('color', (el, binding) => { // 這會在 `mounted` 和 `updated` 時都調用 el.style.color = binding.value }) ~~~ >[info] ## 綁定全局 推薦創建一個`directives`文件夾 進行統一管理 ![](https://img.kancloud.cn/a5/77/a57798283dfdcdc7c22f8ba0f56f72ec_242x126.png) * 在`index.js` 統一導出 ~~~ import directiveFocus from "./focus" import directiveUnit from "./unit" import directiveFtime from "./ftime" // export default function useDirectives(app) { // directiveFocus(app) // directiveUnit(app) // directiveFtime(app) // } export default function directives(app) { directiveFocus(app) directiveUnit(app) directiveFtime(app) } ~~~ * 在main.js 注冊 ~~~ import directives from "../directives/index" createApp(App).use(directives).mount("#app") ~~~ * 以 `focus.js` 為例可以寫成 ~~~ export default function directiveFocus(app) { app.directive("focus", { // 生命周期的函數(自定義指令) mounted(el) { // console.log("v-focus應用的元素被掛載了", el) el?.focus() } }) } ~~~ >[danger] ##### 時間格式化指令 ~~~ import dayjs from 'dayjs' export default function directiveFtime(app) { app.directive("ftime", { mounted(el, bindings) { // 1.獲取時間, 并且轉化成毫秒 let timestamp = el.textContent if (timestamp.length === 10) { timestamp = timestamp * 1000 } timestamp = Number(timestamp) // 2.獲取傳入的參數 let value = bindings.value if (!value) { value = "YYYY-MM-DD HH:mm:ss" } // 3.對時間進行格式化 const formatTime = dayjs(timestamp).format(value) el.textContent = formatTime } }) } ~~~ * 使用 ~~~html <h2 v-ftime="'YYYY/MM/DD'">{{ timestamp }}</h2> <h2 v-ftime>{{ 1551111166666 }}</h2> ~~~ >[info] ## 官網 https://cn.vuejs.org/guide/reusability/custom-directives.html#object-literals
                  <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>

                              哎呀哎呀视频在线观看