一、Vue.directive 自定義組件
1.鉤子函數（生命週期）
（1）bind:只調用一次，指令第一次綁定到元素時調用。
（2）inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
（3）update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。
（4）componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用。
（5）unbind：只調用一次，指令與元素解綁時調用。
2.鉤子函數參數
- el: 指令所綁定的元素，可以用來直接操作DOM。
- binding: 一個對象，包含指令的很多信息。
- vnode: Vue編譯生成的虛擬節點。
例子：給指定元素字體設置顏色
<template>
<div>
<p v-setmycolor="mycolor">123</p>
</div>
</template>
<script>
export default {
data(){
return {
mycolor: 'red',
foo: 'backgroundColor'
}
},
directives:{
setmycolor: {
bind: function(el, binding, vnode, oldVnode) {
console.log(el); // <p>123</p>
console.log(binding); //expression:"mycolor",name:setmycolor,rawName:"v-setmycolor",value:"red"
console.log(vnode);
console.log(oldVnode);
el.style.color = binding.value;
}
}
}
}
</script>
<style>
</style>
3.動態參數
例子：指定元素自定義屬性設置顏色：v-setmycolor:[foo]="mycolor"
<template>
<div>
<p v-setmycolor:[foo]="mycolor">123</p>
</div>
</template>
<script>
export default {
data(){
return {
mycolor: 'red',
foo: 'backgroundColor'
}
},
directives:{
setmycolor: {
bind: function(el, binding, vnode, oldVnode) {
console.log(el); // <p>123</p>
console.log(binding); //arg: "backgroundColor",expression:"mycolor",name:setmycolor,rawName:"v-setmycolor:[foo]",value:"red"
console.log(vnode);
console.log(oldVnode);
el.style[binding.arg] = binding.value;
}
}
}
}
</script>
<style>
</style>
4.簡寫
在 bind 和 update 時觸發相同行爲，可簡寫：
<template>
<div>
<p v-setmycolor:[foo]="mycolor">123</p>
</div>
</template>
<script>
export default {
data(){
return {
mycolor: 'red',
foo: 'backgroundColor'
}
},
directives:{
setmycolor: function(el, binding, vnode, oldVnode) {
console.log(el); // <p>123</p>
console.log(binding); //arg: "backgroundColor",expression:"mycolor",name:setmycolor,rawName:"v-setmycolor:[foo]",value:"red"
console.log(vnode);
console.log(oldVnode);
el.style[binding.arg] = binding.value;
}
}
}
</script>
<style>
</style>
二、Vue.set全局操作
Vue.set 的作用就是在構造器外部操作構造器內部的數據、屬性或者方法。
由於Javascript的限制，Vue不能自動檢測以下變動的構造器外部數組。
- 當你利用索引直接設置一個項時，vue不會爲我們自動更新視圖。
- 當你修改數組的長度時，vue不會爲我們自動更新視圖。
但使用Vue.set操作該數組時，vue會自動更新視圖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Vue.set 全局操作</title>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
<ul>
<li v-for=" aa in arr">{{aa}}</li>
</ul>
</div>
<button οnclick="add()">外部添加</button>
<script type="text/javascript">
function add(){
console.log("我已經執行了");
app.arr[1]='ddd';
//Vue.set(app.arr,1,'ddd');
}
var outData={
arr:['aaa','bbb','ccc']
};
var app=new Vue({
el:'#app',
data:outData
})
</script>
</body>
</html>
三、事件修飾符.native:監聽組件根元素的原生事件
四、Mixins
作用：
- 在你已經寫好了構造器後，需要增加方法或者臨時的活動時使用的方法，這時用混入會減少源代碼的污染。
- 很多地方都會用到的公用方法，用混入的方法可以減少代碼量，實現代碼重用.
規則：
- 當數據和方法重名時，組件數據和方法優先
- 當生命週期重複時，合併，先執行混合對象中的生命週期，再執行組件中的
<template>
<div>
<p>{{num}}</p>
<button @click="add">加1</button>
</div>
</template>
<script>
var addLog = {
data() {
return {
num:2 //重名的數據被忽略
}
},
updated() { //重名的生命週期先執行
console.log(this.num);
},
methods:{
add() { //重名的方法被忽略
console.log('混入的方法');
}
}
}
export default {
data() {
return {
num:1
}
},
methods:{
add() {
this.num ++;
}
},
updated() {
console.log('原本的數據');
},
mixins:[addLog]
}
</script>
<style>
</style>
全局引入：
