Vue3自定义指令

作者: 温新

分类: 【Vue.js】

阅读: 1616

时间: 2021-08-11 15:41:23

hi，我是温新，一名PHPer

有些时候需要操作DOM元素该怎么办？如有一个input框，当页面加载完成input获得焦点。

定义指令：app.directive(自定义指令名,{})

使用自定义指令：v-自定义指令名

全局自定义指令

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style=""><</span><span style="">div</span> <span style="">id</span>=<span style="">"app"</span><span class="cm-tag cm-bracket" style="">></</span><span style="">div</span><span class="cm-tag cm-bracket" style="">></span></span><br></br><span style="padding-right: 0.1px; box-sizing: border-box;"></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style=""><</span><span style="">script</span><span class="cm-tag cm-bracket" style="">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="">const</span> <span style="">app</span> <span style="">=</span> <span style="">Vue</span>.<span style="">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="">template</span>:<span style="">`<input type="text" v-focus >`</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    });</span><br></br><span style="padding-right: 0.1px; box-sizing: border-box;"></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="">// 全局自定义指令</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="">app</span>.<span style="">directive</span>(<span style="">'focus'</span>, {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="">//  当被绑定的元素挂载到 DOM 中时</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="">mounted</span>(<span style="">el</span>){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="">el</span>.<span style="">focus</span>();</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    });</span><br></br><span style="padding-right: 0.1px; box-sizing: border-box;"></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="">app</span>.<span style="">mount</span>(<span style="">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style=""></</span><span style="">script</span><span class="cm-tag cm-bracket" style="">></span></span>

局部自定义指令

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style=""><</span><span style="">div</span> <span style="">id</span>=<span style="">"app"</span><span class="cm-tag cm-bracket" style="">></</span><span style="">div</span><span class="cm-tag cm-bracket" style="">></span></span><br></br><span style="padding-right: 0.1px; box-sizing: border-box;"></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style=""><</span><span style="">script</span><span class="cm-tag cm-bracket" style="">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="">// 局部自定义指令</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="">const</span> <span style="">directives</span> <span style="">=</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="">focus</span>: {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="">mounted</span>(<span style="">el</span>){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="">el</span>.<span style="">focus</span>();</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    };</span><br></br><span style="padding-right: 0.1px; box-sizing: border-box;"></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="">const</span> <span style="">app</span> <span style="">=</span> <span style="">Vue</span>.<span style="">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="">// 指定需要使用的局部自定义组件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="">directives</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="">template</span>:<span style="">`<input type="text" v-focus >`</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    });</span><br></br><span style="padding-right: 0.1px; box-sizing: border-box;"></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="">app</span>.<span style="">mount</span>(<span style="">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style=""></</span><span style="">script</span><span class="cm-tag cm-bracket" style="">></span></span>

相关函数

除了mounted函数外，还有一些函数：

  • created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加须要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。
  • beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
  • mounted：在绑定元素的父组件被挂载后调用。
  • beforeUpdate：在更新包含组件的 VNode 之前调用。
  • updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
  • beforeUnmount：在卸载绑定元素的父组件之前调用
  • unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

hi，我是温新，一名PHPer

请登录后再评论