自定義指令局部指令
局部指令，需要定義在 directives 的選項 用法和全局用法一樣
局部指令只能在當前組件裏面使用
當全局指令和局部指令同名時以局部指令爲準
[mw_shl_code=applescript,true]<input type="text" v-color='msg'>
<input type="text" v-focus>
<script type="text/javascript">
/
自定義指令-局部指令
/
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'red'
}
},
//局部指令，需要定義在 directives 的選項
directives: {
color: {
bind: function(el, binding){
el.style.backgroundColor = binding.value.color;
}
},
focus: {
inserted: function(el) {
el.focus();
}
}
}
});
</script>[/mw_shl_code]
計算屬性 computed
模板中放入太多的邏輯會讓模板過重且難以維護 使用計算屬性可以讓模板更加的簡潔
計算屬性是基於它們的響應式依賴進行緩存的
computed比較適合對多個變量或者對象進行處理後返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化
[mw_shl_code=applescript,true]<div id="app">
<!--
當多次調用 reverseString 的時候
只要裏面的 num 值不改變 他會把第一次計算的結果直接返回
直到data 中的num值改變 計算屬性纔會重新發生計算
-->
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
<!-- 調用methods中的方法的時候 他每次會重新調用 -->
<div>{{reverseMessage()}}</div>
<div>{{reverseMessage()}}</div>
</div>
<script type="text/javascript">
/
計算屬性與方法的區別:計算屬性是基於依賴進行緩存的，而方法不緩存
/
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao',
num: 100
},
methods: {
reverseMessage: function(){
console.log('methods')
return this.msg.split('').reverse().join('');
}
},
//computed 屬性 定義 和 data 已經 methods 平級
computed: {
// reverseString 這個是我們自己定義的名字
reverseString: function(){
console.log('computed')
var total = 0;
// 當data 中的 num 的值改變的時候 reverseString 會自動發生計算
for(var i=0;i<=this.num;i++){
total += i;
}
// 這裏一定要有return 否則 調用 reverseString 的 時候無法拿到結果
return total;
}
}
});
</script>[/mw_shl_code]
偵聽器 watch
使用watch來響應數據的變化
一般用於異步或者開銷較大的操作
watch 中的屬性 一定是data 中 已經存在的數據
當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，只有data中的數據才能夠監聽到變化，此時就需要deep屬性對對象進行深度監聽
[mw_shl_code=applescript,true] <div id="app">
<div>
<span>名：</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓：</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript">
/
偵聽器
/
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
// fullName: 'Jim Green'
},
//watch 屬性 定義 和 data 已經 methods 平級
watch: {
// 注意： 這裏firstName 對應着data 中的 firstName
// 當 firstName 值 改變的時候 會自動觸發 watch
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
// 注意： 這裏 lastName 對應着data 中的 lastName
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
});
</script>[/mw_shl_code]