3-1. Vue.directive 自界说指令
Vue.directive用于自界说全局的指令
实例如下：
1 <body> 2 <div> 3 <p v-sq="color">{{message}}</p> 4 </div> 5 </body> 6 <script> 7 Vue.directive(‘sq‘, function (el, binding, vnode) { 8 el.style.color = binding.value; 9 }); 10 var vm = new Vue({ 11 el: "#app", 12 data: { 13 message: "前端工程师", 14 color: "red" 15 } 16 }); 17 </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返回的便是一个“扩展实例结构器，并挂载到自界说元素上。
实例如下：
1 <body> 2 <div> 3 <p></p> 4 </div> 5 <p></p> 6 </body> 7 <script> 8 var author=Vue.extend({ 9 template:"<a>最终解释权归作者所有</a>" 10 }) 11 new author().$mount(‘.gz‘); 12 </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.全局化注册组件
实例如下：
1 <body> 2 <div> 3 <plp></plp> 4 </div> 5 </body> 6 <script> 7 Vue.component(‘plp‘, { 8 template: `<a>最终解释权归作者所有</a>` 9 }) 10 var vm = new Vue({ 11 el: "#app" 12 }) 13 </script>
2.局部注册组件
实例如下：
1 <body> 2 <div> 3 <plp></plp> 4 </div> 5 </body> 6 <script> 7 var vm = new Vue({ 8 el: "#app", 9 components: { 10 ‘plp‘: { 11 template: `<p>最终解释权归作者所有</p>` 12 } 13 } 14 }) 15 </script>
3-6-2 component组件的props属性
component组件的props属性就是用来设置和获取标签上的属性值。
实例如下：