1、全局API的意思就是在构造器外边的接口,就是自定义一个新的功能。
什么是构造器呢?vue.js是一个构造函数,因此在这里称之为构造器,每一个new Vue都是他的实例
2、Vue.directive自定义指令定义新的功能
像那些v-on、v-bind、v-if/else那些都是vue的内部指令。这里介绍的是自定义的指令。
我们定义一个指令,让他的功能是改变颜色,代码如下。这里介绍一下他们
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的全局API</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<div v-newone="color" class = "numclass">{{num}}</div>
</div>
<script>
Vue.directive("newone",function(el,binding){
console.log(el);
console.log(binding);
el.style = "color:"+binding.value;
});
var app = new Vue({
el:'#app',
data:{
num:10,
color:'green'
},
})
</script>
</body>
</html>
Vue.directive("newone",function(el,binding){
console.log(el);
console.log(binding);
el.style = "color:"+binding.value;
});
这一些代码的意思就是,新建一个新的指令"newone",注意这里是不需要加“v-”的,使用这个指令时就要加上“v-”,这里有两个参数,第一个“el”就是使用该指令的元素,这里表示的就是 “class = "numclass" ”的div;第二个参数我们打印出来的结果如下
说明这个参数的意思是他这个指令的对象,包括name,rawname,vlaue等,我们通过在div中使用这个指令并赋值一个变量color,如下,这样就成功使用了自己自定义的指令
<div v-newone="color" class = "numclass">{{num}}</div>
<script>
Vue.directive("newone",function(el,binding){
console.log(el);
console.log(binding);
el.style = "color:"+binding.value;
});
var app = new Vue({
el:'#app',
data:{
num:10,
color:'green'
},
methods:{
add:function(){
this.num++;
},
}
})
</script>