PYFang
PYFang

Vue全局API

一、Vue.directive自定义指令

可以定义一些属于自己的指令，比如我们要定义一个v-fang的指令，作用就是让文字变成红色。在页面上有一个数字为10，数字的下面有一个按钮，我们每点击一次按钮后，数字加1。
示例：



{{num}}

自定义指令中传递的参数

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。

自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是bind,inserted,update,componentUpdated,unbind

1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。

bind:function(){//被绑定
 console.log('1 - bind');
},
inserted:function(){//绑定到节点
  console.log('2 - inserted');
},
update:function(){//组件更新
  console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
  console.log('4 - componentUpdated');
},
unbind:function(){//解绑
  console.log('1 - bind');
}

二、Vue.extend构造器的延伸

什么是Vue.extend？
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。

自定义无参数标签
我们想象一个需求，需求是这样的，要在博客页面多处显示作者的网名，并在网名上直接有链接地址。我们希望在html中只需要写 ，这和自定义组件很像，但是他没有传递任何参数，只是个静态标签。

我们的Vue.extend该登场了，我们先用它来编写一个扩展实例构造器。
代码如下：

vue.extend

挂载到普通标签上
还可以通过HTML标签上的id或者class来生成扩展实例构造器，Vue.extend里的代码是一样的，只是在挂载的时候，我们用类似jquery的选择器的方法，来进行挂载就可以了。

new authorExtend().$mount('#author');

三、Vue.set全局操作

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。

引用构造器外部数据：

什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。
看一个简单的代码：

//在构造器外部声明数据
 var outData={
    count:1,
    goodName:'car'
};
var app=new Vue({
    el:'#app',
    //引用外部数据
    data:outData
})

在外部改变数据的三种方法：

 function add(){
  Vue.set(outData,'count',4) //用Vue.set改变
  app.count++ //用Vue对象的方法添加
  outData.count++ //直接操作外部数据
 }

其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。

为什么要有Vue.set的存在?

由于Javascript的限制，Vue不能自动检测以下变动的数组。

  • 当你利用索引直接设置一个项时，vue不会为我们自动更新。

  • 当你修改数组的长度时，vue不会为我们自动更新。

    
    
      
      
    • {{item}}
      •

这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。

四、Vue的生命周期（钩子函数）

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。
点击进入生命周期图

示例：


    {{message}}

五、Template 制作模版

Template的三种写法

直接写在选项里的模板

var app=new Vue({
 el:'#app',
 data:{
     message:'hello Vue!'
  },
 template:`
    
我是选项模板

 `
})

这里需要注意的是模板的标识不是单引号和双引号，而是在英文输入状态下的波浪键。

写在