Vue入门学习笔记3 vue全局API整理
Vue入门学习笔记3 vue全局API整理
这是学习vue的第三篇文章了，前面两篇分别介绍了vue入门和vue的内部指令，这篇将介绍vue的全局API
官方文档
vue学习笔记1 Vue入门
vue学习笔记2 Vue内部指令
1、全局API概览
| API | 描述 |
|---|---|
| Vue.directive( id, [definition] ) | 自定义指令。用法，注册或获取全局指令。 |
| Vue.extend( options ) | 拓展构造器 。用法，使用基础 Vue 构造器，创建一个“子类”。 |
| Vue.set( target, propertyName/index, value ) | 全局操作 。用法，向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。 |
| template | 模板，自定义模板 。 |
| Vue.component( id, [definition] ) | 组件。用法，注册或获取全局组件。 |
Tip：更多API详情可以去官方文档查看
2、详情
2.1 Vue.directive( id, [definition] )
描述：
该API用于自定义指令，例如下面这个例子，我们自定义了一个叫“ruihe”的指令，这个指令绑定了一个color属性，用于改变字体的颜色。代码如下：
参数：
- id 自定义指令的名称。
- [definition] 这个参数应该是个对象，里面自定义了具体是业务逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.directive 自定义指令 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue.directive 自定义指令 实例</h1>
<hr>
<div id="app">
<div v-ruihe="color">{{num}}</div>
<button @click="add">Add</button>
</div>
<p>
<button onclick="unbind()">解绑</button>
</p>
<script type="text/javascript">
function unbind(){
app.$destroy();
}
// 最简单的定义
// Vue.directive("ruihe",function(el,binding){
// //el定位到具体的元素位置
// // console.log(el);
// //binding是一个对象，包含一些标签的信息
// // console.log(binding)
// el.style="color:"+binding.value;
// });
//标准的定义方法，内含具体的生命周期
Vue.directive("ruihe",{
bind:function(el,binding){ //被绑定时调用
console.log('1 - bind');
el.style="color:"+binding.value;
},
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:'red'
},
methods:{
add:function(){
this.num++
}
}
})
</script>
</body>
</html>
Tip：这里面还涉及到了自定义指令的两种方法，分别是简单自定义指令的方法以及标准的写法。其中标准的写法中涉及到了指令生命周期，例子里注释已经写的很清楚了，不再描述。
2.2 Vue.extend( options )
描述：
该API是在vue的构造器的基础上拓展vue的构造器，以满足用户的所有个性需求。例子如下：
参数：
- options 选项或称之为对象，是具体的业务逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.extend 拓展实例构造器 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>vue.extend 拓展实例构造器 实例</h1>
<hr>
<!-- 直接通过元素标签进行绑定 -->
<author></author>
<!-- 通过元素ID进行绑定,开发时建议使用这种,可读性高 -->
<div id="author"></div>
<script type="text/javascript">
var authorURL = Vue.extend({
// 自定义一个组件模板
template:"",
data:function(){
return{
authorName:"panruihe",
authorURL:"http://fivewalking.xyz/"
}
}
});
// 相当于实例化对象
new authorURL().$mount("author");
new authorURL().$mount("#author")
</script>
</body>
</html>
2.3 Vue.set( target, propertyName/index, value )
说明：
将数据进行全局操作。其存在的意义之一是：javascript限制没法改变数组下标或长度，此时Vue.set（）就能发挥作用解决这类问题。 即，vue没办法监听到数组下标的改变
参数：
- target 要操作的目标，以下面例子为例，我们要操作vue构造器中的arr数组，因此我们可以app.arr定位到这个目标
- propertyName/index 要改变的属性名或下标。例如，我们下面这个例子，我们要操作（改变）arr数组里下标为1的元素，因此我们直接写下标即可。
- value 要传入的新值。例如，下面这个例子，我们把下标为1的值原本是“bbb”改变成“dd”。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.set 全局操作 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>vue.set 全局操作 实例</h1>
<hr>
<div id="app">
{{count}}
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<p><button onclick="add()">add</button></p>
<script type="text/javascript">
function add(){
// Vue.set(outData,'count',2);
// app.count++;
// outData.count++;
/*
javascript限制没发改变数组下标或长度，此时Vue.set（）就能发挥作用解决这类问题
即，vue没办法监听到数组下标的改变
*/
// app.arr[1]='ddd';
/*通过Vue.set()能监听到数组的下标改变*/
Vue.set(app.arr,1,'dd');
}
var outData={
count:1,
goods:'car',
arr:['aaa','bbb','ccc']
}
var app = new Vue({
el:"#app",
data:outData
})
</script>
</body>
</html>
2.4 template 自定义模板
这个在官方的全局API部分里没有介绍，所以我不懂它算不算一个全局API，但是用的非常频繁，与组件类似。template 模板有三种形式，分别是选项模板、template选项模板、script标签模板。请看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template 模板 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>3种 Template 模板制作方法 实例</h1>
<hr>
<div id="app">
{{mes}}
</div>
<!--
2.1 template选项模板
使用模板复杂度中等的制作
-->
<template id="dd2">
<h1 style="color:red;">我是template标签模板</h1>
</template>
<!--
3.1 script标签模板
适合复杂度高的制作
可以用src引入外部模板，使页面更简洁
-->
<script type="x-template" id="dd3">
<h1 style="color:red;">我是script标签模板</h1>
</script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
mes :'hell world!'
},
// 1 选项模板
// 适合简单模板的制作
// template:`
// 我是template选项模板
// `
// 2.2
// template:`#dd2`
// 3.2
template:`#dd3`
})
</script>
</body>
</html>
2.5 component 组件
组件（component ）跟模板（template）类似，都是封装了一些功能或样式。这样能够实现代码的低耦合、开发效率也会大大提高，尤其在那种大公司搞大项目时优势非常明显。
直接上例子吧，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>component组件 实例3</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>component组件 实例3（component标签）</h1>
<hr>
<div id="app">
<!--
componten标签是vue定义的一个标签
能够动态的根据data的值选择组件
-->
<componten :is="who"></componten>
<button @click="changeComponten()">changeComponten</button>
</div>
<script type="text/javascript">
var componentA={
template:`I'm componentA`
}
var componentB={
template:`I'm componentB`
}
var componentC={
template:`I'm componentC`
}
var app = new Vue({
el:"#app",
data:{
who :'componentA'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC
},
methods:{
changeComponten:function(){
if(this.who=="componentA"){
this.who="componentB";
}else if(this.who=="componentB"){
this.who="componentC";
}else{
this.who="componentA"
}
}
}
})
</script>
</body>
</html>
下面我们分步说明一下这个组件吧，因为这个比模板用的还频繁，可以说现实开发中你几乎无时无刻在改组件、写组件。因此，组件非常重要、非常重要、非常重要
- 局部组件与全局组件
局部组件，写在vue构造器内，只要指定的对象才能使用。超出作用域则无效。
全局组件，写在vue构造器之外，整个页面的对象都能使用。
例子：
<div id="app">
<!-- 使用组件 -->
<ruihe></ruihe>
<pan></pan>
</div>
<!-- app对象和aqq对象均能使用全局的ruihe组件 -->
<!-- <div id="aqq">
<ruihe></ruihe>
</div> -->
<script type="text/javascript">
// 1 全局组件
// 写在构造器外，该页面内的所以对象都能适用
// 组件里可以写template模板也可以写各种数据
Vue.component('ruihe',{
template:`我是全局的ruihe组件`
})
var app = new Vue({
el:"#app",
// 2 局部组件
components:{
"pan":{
template:`我是局部的pan组件`
}
}
})
// 1.2
// var app = new Vue({
// el:"#aqq",
// })
</script>
- 父子关系组件
简单一句话描述就是——在构造器外声明局部组件。
这样当我们要写复杂或者组件多的时候我们可以把组件声明在vue构造器外，这样代码就美观了很多，关键是可读性高以及安全性也得到了提高。
例子如下：
<div id="app">
<pan></pan>
</div>
<script type="text/javascript">
// 在构造器外边声明局部组件
// 父组件
var city ={
template:`siChuan of China!`
}
// 子组件
var panComponent = {
template:`
pan from China!
- components标签
该标签的存在是为了动态的使用组件，通过data中的值动态的选择组件。
例子如下：
<div id="app">
<!--
componten标签是vue定义的一个标签
能够动态的根据data的值选择组件
-->
<componten :is="who"></componten>
<button @click="changeComponten()">changeComponten</button>
</div>
<script type="text/javascript">
var componentA={
template:`I'm componentA`
}
var componentB={
template:`I'm componentB`
}
var componentC={
template:`I'm componentC`
}
var app = new Vue({
el:"#app",
data:{
who :'componentA'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC
},
methods:{
changeComponten:function(){
if(this.who=="componentA"){
this.who="componentB";
}else if(this.who=="componentB"){
this.who="componentC";
}else{
this.who="componentA"
}
}
}
})
</script>
Tip：其实还有一个非常重要的一个API，那就是钩子函数，也就是vue生命周期的节点函数，由于文章太长了就在下一篇中写吧。