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: