深入学习vue指令，自定义指令解决开发痛点

每天学习一点点编程PDF电子书、视频教程免费下载：
http://www.shitanlife.com/code

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

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

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

每天学习一点点编程PDF电子书、视频教程免费下载：
http://www.shitanlife.com/code

巴特西

深入学习vue指令，自定义指令解决开发痛点

v-model指令

v-checkmodel 自定义指令实现

写在后面

最新文章

热门文章