在Vue.js的初识篇了解了Vue的内部指令，并做了一些简单的小案例。这一篇来了解Vue的全局API。
Vue的全局API：在构造器外部用Vue提供的API函数来定义新功能。
首先了解一下自定义指令的生命周期：
bind:function(){ //被绑定
console.log(‘ bind: 我被被绑定！‘);
},
inserted:function(){ //绑定到节点
console.log(‘inserted: 我绑定到节点了！‘);
},
update:function(){ //组件更新
console.log(‘update: 组件更新了！‘);
},
componentUpdated:function(){ //组件更新完成
console.log(‘componentUpdated: 组件更新完成了！‘);
},
unbind:function(){ //解绑
console.log(‘bind: 我已解绑了！‘);
}
Vue.directive 自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
<title>Vue directive</title>
</head>
<body>
<div class="container">
<div id="app">
<h5>{{ message }}</h5>
<hr />
<p v-momei=‘color‘ id="Dome">{{ num }}</p>
<p><button class="btn btn-success" @click="add()">Add</button></p>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.directive(‘momei‘,function(el,binding,vnode){
el.style.color=binding.value;
});
var app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue.js One Day!‘,
num: 10,
color: ‘green‘
},
methods: {
add: function() {
this.num ++;
}
}
});
</script>
</html>
自定义指令传入的三个参数：
el: 指令绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含以下属性：
-
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值。
- oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的字符串形式。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 传给指令的参数。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一个包含修饰符的对象。 例如：
v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
Vue的生命周期：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
<title>Vue 生命周期</title>
</head>
<body>
<div class="container">
<div id="app">
<h5>{{ message }}</h5>
<hr />
<p>{{ num }}</p>
<p><button class="btn btn-success" @click="add()">Add</button></p>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue.js ONE Day!‘,
num: 10,
},
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>
</html>
Vue.eRte-a构造器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
<title>Vue ERte-a</title>
</head>
<body>
<div class="container">
<author></author>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
var ERte-a = Vue.eRte-a({
template: "<p><a :href=‘Url‘>{{Name}}</a></p>", //模
时间： 2024-11-13 06:58:21