<h2 id="articleHeader0">1.自定义指令的使用</h2> <p>在组件中定义一个自定义指令,作用:将当前<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>节点中字体颜色设置为红色。</p> <p>在自定义指令中简化了钩子函数,下面的钩子函数相当于 <code>bind</code> 和 <code>unbind</code> 的缩写:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app', directives: { setRed: function (el, binding) { // 自定义一个指令,使用的时候 v-set-red el.style.color = 'red' } } }</p> <p></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="vue"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, <span class="hljs-attr">directives</span>: { <span class="hljs-attr">setRed</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">el, binding</span>) </span>{ <span class="hljs-comment">// 自定义一个指令,使用的时候 v-set-red</span> el.style.color = <span class="hljs-string">'red'</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>在页面结构中,通过 <code>v-set-red</code> 来使用上面自定义的指令:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <div v-set-red>这是一个<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>标签</div> </p></div> <p></template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="vue"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-set-red</span>&gt;</span>这是一个div标签<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></code></pre> <h2 id="articleHeader1">2.认识自定义指令的钩子函数</h2> <p>自定义指令也是存在生命周期的,也存在<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="生命周期钩子" target="_blank">生命周期钩子</a>。</p> <p>在实际使用的时候,一般只关注三个钩子函数:</p> <ul> <li>绑定时调用的钩子 bind</li> <li>被绑定元素插入父节点时调用的钩子 inserted</li> <li>解绑时调用的钩子 unbind</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app', directives: { setRed: { bind() { console.log('执行一次的初始化动作...') }, inserted() { console.log('被绑定元素插入父节点时调用...') }, unbind() { console.log('与元素解绑时调用...') } } } }</p> <p></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="vue"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, <span class="hljs-attr">directives</span>: { <span class="hljs-attr">setRed</span>: { bind() { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'执行一次的初始化动作...'</span>) }, inserted() { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'被绑定元素插入父节点时调用...'</span>) }, unbind() { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'与元素解绑时调用...'</span>) } } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>在实际调用的时候,bind和inserted都会调用,而unbind只有在页面热刷新(即在vue-cli中增加或删除节点)的时候才会调用。</p> <blockquote> <p>钩子函数的参数可以参照官网的内容:<a href="https://cn.vuejs.org/v2/guide/custom-directive.html#" rel="nofollow noreferrer" target="_blank">自定义指令</a></p> </blockquote> <h2 id="articleHeader2">3.钩子函数参数el</h2> <ul> <li> <code>el</code> 当前的<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>节点</li> <li> <code>el.style</code> 当前节点的样式,如<code>el.style.width</code> </li> <li> <code>el.dataset</code> 当前节点的自定义属性,如<code>data-test="123"</code> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <input v-set-red type=&quot;text&quot; value=&quot;内容&quot; data-test=&quot;wang&quot; style=&quot;width:100%&quot;> </div> <p></template></p> <p><script> export default { directives: { setRed: function (el, binding) { // 自定义一个指令,使用的时候 v-set-red el.style.color = 'red' console.log(el, el.type, el.value, el.dataset.test, el.style.width) } } }</p> <p></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="vue"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">v-set-red</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"内容"</span> <span class="hljs-attr">data-test</span>=<span class="hljs-string">"wang"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">directives</span>: { <span class="hljs-attr">setRed</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">el, binding</span>) </span>{ <span class="hljs-comment">// 自定义一个指令,使用的时候 v-set-red</span> el.style.color = <span class="hljs-string">'red'</span> <span class="hljs-built_in">console</span>.log(el, el.type, el.value, el.dataset.test, el.style.width) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>输出的结果:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<input v-set-red type=&quot;text&quot; value=&quot;内容&quot; data-test=&quot;wang&quot; style=&quot;width:100%&quot;> &quot;text&quot; &quot;内容&quot; &quot;wang&quot; &quot;100%&quot;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code style="word-break: break-word; white-space: initial;">&lt;input v-set-red <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> value=<span class="hljs-string">"内容"</span> data-test=<span class="hljs-string">"wang"</span> style=<span class="hljs-string">"width:100%"</span>&gt; <span class="hljs-string">"text"</span> <span class="hljs-string">"内容"</span> <span class="hljs-string">"wang"</span> <span class="hljs-string">"100%"</span></code></pre> <p>可以看出 <code>el</code> <code>el.value</code> <code>el.dataset.test</code> <code>el.style.width</code> 分别输出的内容是什么。</p> <h2 id="articleHeader3">4.参考内容</h2> <ul> <li><a href="https://cn.vuejs.org/v2/guide/custom-directive.html" rel="nofollow noreferrer" target="_blank">自定义指令</a></li> </ul>

本文固定链接: http://www.js-code.com/vue-js/vue-js_17131.html