脚本宝典收集整理的这篇文章主要介绍了

Vue.directive使用注意

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>首先,<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.directive要在实例初始化之前,不然会报错,还有,定义的指令不支持驼峰式写法,也会报下面同样的错,虽然在源码中没有找到在哪里统一处理大小写,但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以,还是用'-'或者'_'分割吧。</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="vue.js:491 [Vue warn]: Failed to resolve directive: xxx" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">vue</span><span class="hljs-selector-class">.js</span><span class="hljs-selector-pseudo">:491</span> <span class="hljs-selector-attr">[<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> warn]</span>: <span class="hljs-selector-tag">Failed</span> <span class="hljs-selector-tag">to</span> <span class="hljs-selector-tag">resolve</span> <span class="hljs-selector-tag">directive</span>: <span class="hljs-selector-tag">xxx</span></code></pre> <p>然后,其定义方式有两种,一种是<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.directive('xxx', function(el, bind, vNode){}),其中el为dom,vNode为vue的虚拟dom,bind为一较复杂对象,详情可见<a href="http://doc.vue-js.com/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0" rel="nofollow noreferrer" target="_blank">Vue-directive钩子函数中的参数的参数</a>,还有一种,为</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="Vue.directive('my-directive', { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>Vue.directive(<span class="hljs-string">'my-directive'</span>, { bind: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{}, inserted: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{}, update: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{}, componentUpdated: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{}, unbind: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{} })</code></pre> <p>参数代表的含义,参见<a href="http://doc.vue-js.com/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0" rel="nofollow noreferrer" target="_blank">钩子函数描述</a></p> <p>最后,要使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。</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="// Vue.directive Vue.directive('test_directive', function(el, bind, vNode){ el.style.color = bind.value; }); var app = new Vue({ el: '#app', data: { num: 10, color: 'red' }, methods: { add: function(){ this.num++; } } });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-comment">// Vue.directive</span> Vue.directive(<span class="hljs-string">'test_directive'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el, bind, vNode)</span></span>{ el.style.color = bind.value; }); <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { num: <span class="hljs-number">10</span>, color: <span class="hljs-string">'red'</span> }, methods: { add: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.num++; } } });</code></pre> <p>当然,也可以将method中的方法加入,bind.value即为methods中的方法。</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=" <div id=&quot;app&quot;> <div v-test_directive=&quot;changeColor&quot;>{{num}}</div> <p> <button @click=&quot;add&quot;>增加</button> </div> <p> <script type=&quot;text/javascript&quot;><br /> // Vue.directive<br /> Vue.directive('test_directive', function(el, bind, vNode){<br /> el.style.color = bind.value();<br /> });<br /> var app = new Vue({<br /> el: '#app',<br /> data: {<br /> num: 10,<br /> color: 'red'<br /> },<br /> methods: {<br /> add: function(){<br /> this.num++;<br /> },<br /> changeColor: function(){<br /> return this.color;<br /> }<br /> }<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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-test_directive</span>=<span class="hljs-string">"changeColor"</span>&gt;</span>{{num}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"add"</span>&gt;</span>增加<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="actionscript"> <span class="hljs-comment">// Vue.directive</span> Vue.directive(<span class="hljs-string">'test_directive'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el, bind, vNode)</span></span>{ el.style.color = bind.value(); }); <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { num: <span class="hljs-number">10</span>, color: <span class="hljs-string">'red'</span> }, methods: { add: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">this</span>.num++; }, changeColor: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.color; } } });</span></code></pre> <p>这种形式,可以模仿'v-once',并进行一定的复杂逻辑,但是想要完全达到'v-once',可能需要考虑Vue-directive的钩子函数各个周期。下面是固定num的值,使得add的方法无效。</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=" <div id=&quot;app&quot;> <div v-test_directive=&quot;changeColor&quot;>{{num}}</div> <p> <button @click=&quot;add&quot;>增加</button> </div> <p> <script type=&quot;text/javascript&quot;><br /> // Vue.directive<br /> Vue.directive('test_directive', function(el, bind, vNode){<br /> el.style.color = bind.value();<br /> });<br /> var app = new Vue({<br /> el: '#app',<br /> data: {<br /> num: 10,<br /> color: 'red'<br /> },<br /> methods: {<br /> add: function(){<br /> this.num++;<br /> },<br /> changeColor: function(){<br /> this.num = 20;</p> <p> return this.color;<br /> }<br /> }<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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">div</span> <span class="hljs-attr">v-test_directive</span>=<span class="hljs-string">"changeColor"</span>&gt;</span>{{num}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"add"</span>&gt;</span>增加<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="actionscript"> <span class="hljs-comment">// Vue.directive</span> Vue.directive(<span class="hljs-string">'test_directive'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el, bind, vNode)</span></span>{ el.style.color = bind.value(); }); <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { num: <span class="hljs-number">10</span>, color: <span class="hljs-string">'red'</span> }, methods: { add: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">this</span>.num++; }, changeColor: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">this</span>.num = <span class="hljs-number">20</span>; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.color; } } });</span></code></pre> <p>因为小生刚刚接触vue,所以,希望前辈能多加指点。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vue.directive使用注意

全部内容,希望文章能够帮你解决

Vue.directive使用注意

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过