【vuejs深入一】深入学习vue指令,自定义指令解决开发痛点-阿里云开发者社区

开发者社区> grootzhang> 正文

【vuejs深入一】深入学习vue指令,自定义指令解决开发痛点

简介: 写在前面    一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残。   最近博主我沉淀了几个月,或者说懒了几个月。然而大佬的指点总是一针见血,能够让人看到方向。所以我现在有觉得,一个好的学习环境指的一定是有个能指点你的大佬。
+关注继续查看

写在前面

   一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残。

  最近博主我沉淀了几个月,或者说懒了几个月。然而大佬的指点总是一针见血,能够让人看到方向。所以我现在有觉得,一个好的学习环境指的一定是有个能指点你的大佬。大佬水平的高低决定了今后技术的学习难易。

v-model指令

       vue.js的定义是一个mvvm框架,将它发挥到极致能够极大的提升工作效率。在vuejs中,指令(directive)无疑是最关键,最重要的一环之一,官方api自带的指令提供了非常方便的方式,将常见的编码场景进行提炼,使用这些指令能令人感到愉悦。

  v-model

    数据绑定指令,它最常见的用法是可以将指定的data对象中的属性绑定到一个form元素中,例如:

  <div id="app">
        <div class="directives">
          <input type="text" v-model="text" name="" value="">
          {{text}}
        </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
      <script type="text/javascript">
          new Vue({
            el: '#app',
            data: function(){
              return {
                  text: 'hello World'
              };
            },

          })
      </script>

 

上面的代码,我们在data对象里创建了一个text属性,在标签<input>中使用v-model绑定到text,这时候这个input输入框会和text属性进行同步。当你修改input中的值,text属性值随之改变,然后这个改变被绑定到元素的value值上。

它的内部原理使用了html5的oninput事件,上面的代码经过内部操作,其实可以表示成:

  <div id="app">
        <div class="directives">
          <input type="text" :value="text" @input="setValue" name="" value="">
          {{text}}
        </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
      <script type="text/javascript">
          new Vue({
            el: '#app',
            data: function(){
              return {
                  text: 'hello World'
              };
            },
            methods:{
              setValue:function($event){
                this.text = $event.target.value;
              }
            }
          });
      </script>

注意这段:

<input type="text" :value="text" @input="setValue" name="" value="">

v-model其实只是一个语法糖,它与angular的model是不同的。  vue中其实它通过解析,在@input事件中设置响应,在响应中修改text的值,然后再通过绑定属性v-bind绑定value同步value值,看到这里你应该

对v-model有了更深入的理解了吧,那么这个知识点对我们有什么帮助呢? 

从这里我们可以看出,v-model不仅仅可以绑定form元素,它还可以绑定组件:

 

  <div id="app">
        <div class="directives">
          <demo-el v-model="text"></demo-el>
          <input type="text" v-model="text" name="" value="">
        </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
      <script type="text/javascript">
          Vue.component("demo-el",{
            props:["value"],
            template:'<div style="color:green">{{value}}</div>'
          });
          new Vue({
            el: '#app',
            data: function(){
              return {
                  text: 'hello World'
              };
            },
            methods:{
            
            }
          });
      </script>

 

上面代码我们使用vue-component定义一个组件,叫demo-el,它接受一个prop属性,这里为什么是value呢? 结合上面的v-model原理再看。

<!--可以看成这样-->
<demo-el :value="text" @input="setValue"></demo-el>

原来是这样,解析model时,绑定的就是value属性,传入组件就是prop啦。

v-model不能直接绑定的元素相信大家一定遇到过,那就是checkbox radio。

在创建类似复选框或者单选框的常见组件时,v-model就不好用了。这里博主用自定义组件解决这个问题,

ps:现在最新版本的vue解决了一部分问题,v-model作用在checkbox上时可以绑定对应的true或者false了,但是它还不完美,例如在多选功能上,我们往往希望直接绑定选择的多个值,而不是true或者false。

v-checkmodel 自定义指令实现

我们希望checkbox能够根据自己的定义实现true和false的自由转换,例如我们在项目json中,0是false,1是true,亦或者是 '是'是true,'否'是false,这要怎么实现呢,
平时我们开发可能会在watch中监控属性,例如:
{
 ......
  watch:{
       check:function(n){
          if(n){
              this.checktext = '是',
           }
       }
   }  
}

我们需要手动判断n的true或false,并且在请求到数据是需要将
'是'
'否'

转换成 true false,我们可以用自定义指令来解决这个问题。
Vue.directive("checkmodel",{
            inserted:function(el,binding,vnode){
              var value = binding.value.value;
              var condition = binding.value.condition;
              if(condition[value] != undefined){
                el.checked = condition[value];
              }
               el.addEventListener("click",function(){
                 for(var name in condition){
                   if(condition[name] === this.checked){
                     binding.value.value = name;
                   }
                 }
              },false);
            }
          });

我们创建了一个自定义指令,名称叫checkmodel,它根据api接受三个参数,el【标签对象】,binding绑定对象,vnode,node节点对象。

然后我们在下面规定获取了绑定对象的value,绑定对象的condition表达式,然后将表达式的值绑定给el的checked,最后创建click监听事件,当点击时根据表达式的值进行绑定转换。

最后它的使用方法就像下面这样:

<div id="app">
        <div class="directives">
          <input type="checkbox" v-checkmodel="check" name="" value="">
          {{check.value}}
        </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
      <script type="text/javascript">
        
          new Vue({
            el: '#app',
            data: function(){
              return {
                  check:{
                    value:"1",
                    condition:{
                      "1":false,
                      "2":true
                    }
                  }
              };
            },
            methods:{

            }
          });
        
      </script>

我们指定1是false,2是true,然后通过v-checkmodel绑定到checkbox,在点击时候,指令会根据condition中的值转换true和false;

你也可以基于这个中心思想,定制自己的指令,使它契合你的业务。例如我可以定义一个全局condition这个属性,统管全局的字典转换。

(此图代码未经测试... gif录制太大,修改思想呈现就好)

 

写在后面

  mvvm框架和webpack的出现确实改变了前端的开发方式,使得学习前端变成了一门有着深入学问的课题。在我们日常开发中应该不断地学习,归纳,总结,寻找新的思想,对原有的代码有好的补充和好的改进。

       写的不好,谢谢大家观看。 后续有空会新增更多关于开发的知识分享。  

       如果你有什么疑问,你可以联系我,或者在下方评论。

======================================================== 转载请注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
自定义列表|学习笔记
快速学习自定义列表
24 0
AngularJS-自定义指令
AngularJS的内置指令总归是有限的,特别是我们需要操纵dom时,就需要自己编写directive。有这样一个场景,管理系统中切换状态,见图1. 图1 切换状态时的确认框效果 那么就可以定义指令“ng-confirm-click”,js: html: &lt;td&gt; &lt;a ctrip-confirm-click ng-show="item.statu
820 0
Java类加载器学习2——自定义类加载器和父类委托机制带来的问题
  一、自定义类加载器的一般步骤   Java的类加载器自从JDK1.2开始便引入了一条机制叫做父类委托机制。一个类需要被加载的时候,JVM先会调用他的父类加载器进行加载,父类调用父类的父类,一直到顶级类加载器。如果父类加载器加载不了,依次再使用其子类进行加载。当然这类所说的父类加载器,不一定他们之间是继承的关系,有可能仅仅是包装的关系。   Java之所以出现这条机制,因为是处
1362 0
java泛型学习4之自定义泛型类(DAO)
  例一 package cn.xy.test; public class GenericDao {  public &lt;T&gt; void add(T t)  {  }  public &lt;T&gt; T getModelById(int id)  {   return null;  } } 这个类中泛型方法被常规使用,但两个方法之间的T没有联系和相互
901 0
+关注
grootzhang
我是张泰峰,从事开发工作,目前在一家跨境电商担任高级开发工程师
37
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载