一起走进Vue.js——Vue.js的全局API
Posted 懂设计的程序媛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一起走进Vue.js——Vue.js的全局API相关的知识，希望对你有一定的参考价值。
Vue.js第二期：
Vue.js第一期：
上期我们主要学习了Vue.js的内部指令，这期我们来学习Vue.js的全局API。
一、Vue.directive 自定义指令
代码部分：
<h1>Vue.directive 自定义指令</h1>
<hr/>
<div id="app">
//自定义指令 v-cxh
<div v-cxh="{color,backgroundColor,width}">{{num}}</div>
<div><button v-on:click="add">增加</button></div>
</div>
<div><button onclick="unbind()">解绑</button></div>
<script>
//自定义指令，给v-cxh对应的div添加color、backgroundColor、width的样式
Vue.directive('cxh',{
//自定义指令的生命周期（钩子函数）
bind:function(el,binding){//被绑定
console.log('1 - bind');
el.style.color=binding.value.color;
el.style.backgroundColor=binding.value.backgroundColor;
el.style.width=binding.value.width;
},
inserted:function(){//绑定到节点
console.log('2 - inserted');
},
update:function(){//组件更新
console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解绑
console.log('5 - unbind');
}
});
var app=new Vue({
el:"#app",
data:{
num:10,
color:"#ffffff",
backgroundColor:"red",
width:"50px"
},
methods:{
add:function(){
this.num++;
}
}
});
function unbind(){//解绑
app.$destroy();
}
</script>
1、自定义指令传递的三个参数：
el：指令所绑定的元素，可以用来直接操作DOM；
binding：一个对象，包含指令的很多信息；
vnode：Vue编译生成的虚拟节点。
2、自定义指令的生命周期：
自定义指令有五个生命周期（也叫钩子函数），分别是bind、inserted、update、componentUpdated、unbind。
1）bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作；
2）inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）；
3）update：被绑定于元素所在的模板更新时调用，而无论绑定值是否发生变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新；
4）componentUpdated：被绑定元素所在模板完成一次更新周期时调用；
5）unbind：只调用一次，指令与元素解绑时调用。
二、Vue.extend 构造器的延伸
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。
代码部分：
三、Vue.set 全局操作
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。
1、引用构造器外部数据
2、在构造器外部改变数据的三种方法
3、Vue.set 存在的意义
由于javascript的限制，当我们利用索引改变数组中的值或者改变数组的长度时，vue不会自动更新，这时我们需要用Vue.set来设置改变，vue会自动更新。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Vue.set 全局操作</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr/>
<button onclick="add1()">增加1</button>
<button onclick="add2()">增加2</button>
<button onclick="add3()">增加3</button>
<div id="app">
{{num}}
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<button onclick="add4()">改变</button>
<script>
//在构造器外部声明数据
var outData={
num:1,
arr:['ccc','yyy','www']
};
//改变数组值
function add4(){
Vue.set(app.arr,1,'xxx');
}
//改变数据的三种方法
//1、用Vue.set改变
function add1(){Vue.set(outData,'num',2);}
//2、用Vue对象的方法改变
function add2(){app.num++;}
//3、直接操作外部数据
function add3(){outData.num++;}
var app=new Vue({
el:"#app",
//引用外部数据
data:outData
});
</script>
</body>
</html>
四、Vue的生命周期（钩子函数）
Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。
代码部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Vue生命周期（钩子函数）</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue生命周期（钩子函数）</h1>
<hr/>
<div id="app">
{{num}}
<p><button @click="add">加分</button></p>
</div>
<button onclick="app.$destroy()">解绑</button>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
beforeCreate:function(){
console.log('1-beforeCreate 初始化之前');
},
created:function(){
console.log('2-created 创建完成');
},
beforeMount:function(){
console.log('3-beforeMount 挂载之前');
},
mounted:function(){
console.log('4-mounted 被挂载之后');
},
beforeUpdate:function(){
console.log('5-beforeUpdate 数据更新前');
},
updated:function(){
console.log('6-updated 被更新后');
},
activated:function(){
console.log('7-activated');
},
deactivated:function(){
console.log('8-deactivated');
},
beforeDestroy:function(){
console.log('9-beforeDestroy 解绑之前');
},
destroyed:function(){
console.log('10-destroyed 解绑之后')
}
})
</script>
</body>
</html>
五、template 制作模板
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>template制作模板</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>template 制作模板</h1>
<hr/>
<div id="app">
<!--2、写在template标签里的模板-->
<template id="demo2">
<h1 style="color:blue;">template标签模板</h1>
</template>
</div>
<!--3、写在script标签里的模板-->
<script type="x-template" id="demo3">
<h1 style="color:green;">script标签模板</h1>
</script>
<script>
var app=new Vue({
el:"#app",
//1、直接写在选项里的模板
template:`<h1 style="color:red;">直接写在选项里的模板</h1>`,
template:"#demo2",
template:"#demo3"
});
</script>
</body>
</html>
以上是关于一起走进Vue.js——Vue.js的全局API的主要内容，如果未能解决你的问题，请参考以下文章