Vue 2.0入门基础知识之全局API

3.全局API

3-1. Vue.directive 自定义指令

Vue.directive用于自定义全局的指令

实例如下：

 <body>

     <div id="app">

         <p v-sq="color">{{message}}</p>

     </div>

 </body>

 <script>

     Vue.directive('sq', function (el, binding, vnode) {

         el.style.color = binding.value;

     });

     var vm = new Vue({

         el: "#app",

         data: {

             message: "前端工程师",

             color: "red"

         }

     });

 </script>

效果为p标签显示为红色，directive指令中的参数1（实例中的‘sq’）可以类比前篇文章内部指令的bind、on；参数2是一个回调函数，这个回调函数包含三个参数（el:即指令绑定的元素，实例中的el即为p元素；binding:包含指令的相关信息，可以通过console.log打印出来；vnode:即Vue编译生成的虚拟节点。虚拟节点即vue2.0中引入的新功能，用js对象替代DOM节点，改进直接操作DOM代价大引发的性能问题）。

指令都是有生命周期的，同样地，自定义指令有5个生命周期，分别是：bind、inserted、update、componentUpdated、unbind

3-2 Vue.extend 构造器的延伸

extend中文即延伸、扩展的意思。Vue.extend返回的即是一个“扩展实例构造器，并挂载到自定义元素上。

实例如下：

 <body>

     <div id="app">

       <p class="gz"></p>

     </div>

    <p class="gz"></p>

 </body>

 <script>

   var author=Vue.extend({

        template:"<a>最终解释权归作者所有</a>"

    })

    new author().$mount('.gz');

 </script>

p标签会替换成template的值，但仅限于第一个p标签，因为只挂载了一次，实例中用的是class，将其换成id或标签同样适用。

3-3 Vue.set全局操作

Vue.set的作用就是在构造器外部操作构造器内部的数据、属性或者方法。Vue.set存在的意义是弥补js语言的缺陷，因为Vue不能自动检测数组的两种变动：1.利用索引设置一个元素；2.修改数组的长度。用Vue.set更新数据时，依次传入三个参数①数组名称②索引③元素

3-4 Vue的生命周期

Vue的生命周期即钩子函数。包括10共，按照顺序依次为：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDastroy、destroyed。详细的结构图可参考vue官网的图例介绍。

3-5 Template模板

Template模板大致有三种写法：

1.类似前面讲到Vue.extend挂载时的template写法，但不是双引号包括内容，而是``（英文tab键）

2.利用template模板：<template></template>。这个类似于Backbone中模板的写法

3.在script标签中写入模板内容，不过此时type为"x-tempate".。这种写法可以将模板从外部导入。

另外需要强调一点、vue2.0中规定模板内容必须要要有一个根元素，一般地用div包裹住整个模板内容。

3-6 component组件

component组件本质上就是自定义的标签。component组件分为全局化注册组件和局部注册组件，两者的不同之处在于使用的范围（类比于全局变量和局部变量）。

3-6-1 component组件的注册

1.全局化注册组件

实例如下：

 <body>

     <div id="app">

         <plp></plp>

     </div>

 </body>

 <script>

     Vue.component('plp', {

         template: `<a>最终解释权归作者所有</a>`

     })

     var vm = new Vue({

         el: "#app"

     })

 </script>

2.局部注册组件

实例如下：

 <body>

     <div id="app">

         <plp></plp>

     </div>

 </body>

 <script>

     var vm = new Vue({

         el: "#app",

         components: {

             'plp': {

                 template: `<p>最终解释权归作者所有</p>`

             }

         }

     })

 </script>

3-6-2 component组件的props属性

component组件的props属性就是用来设置和获取标签上的属性值。

实例如下：

 <body>

     <div id="app">

         <plp city="YiChang"></plp>

     </div>

 </body>

 <script>

     var vm = new Vue({

         el: "#app",

         components: {

             'plp': {

                 props:['city'],

                 template: `<p>I like {{city}}</p>`

             }

         }

     })

 </script>

首先component组件的props选项通过['city']获取自定义标签该属性的值，然后在tepmlate中通过{{city}}插值的方法设置属性值。需要注意的一点是自定义标签的属性取值尽量避免使用'-',如有必要使用小驼峰命名，可以联想到通过原生JS设置元素的颜色;elements.style.backgroundColor,而不是element.style.background-color

component组件传值，使用:bind绑定即可。

3-6-3 component父子组件

component父子组件就是在一个component组件里再写一个component组件。

实例如下：

 <body>

     <div id="app">

         <plp :city="like"></plp>

     </div>

 </body>

 <script>

     var vm = new Vue({

         el: "#app",

         data: {

             like: 'YiChang'

         },

         components: {

             'plp': {

                 props: ['city'],

                 template: `<p>I like {{city}} <ppl></ppl></p>`,

                 components: {

                     'ppl': {

                         template: `<span style="color:red">very much!</span>`

                     }

                 }

             }

         }

     })

 </script>

实例中涉及到component组件嵌套，在plp组件中嵌套组件ppl。当然实际开发中组件的嵌套远比这个复杂，必要的时候可以在构造器外部定义声明局部component组件。

3-6-4 component标签

<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

好啦，关于Vue的全局API就介绍到这里，下一篇关于Vue的基础知识，我们聊聊Vue2.0的选项以及实例内置组件~

巴特西

Vue 2.0入门基础知识之全局API

最新文章

热门文章