v-html指令:
指令的概念:
指令是vue自定義的以v-開頭的自定義屬性。每個不同的屬性都有各自不同的意義和功能
指令的語法:
v-指令名 = “表達(dá)式判斷或者是業(yè)務(wù)模型中屬性名或者事件名”
具體指令
- v-html 操作元素中的html標(biāo)簽
- v-text會將元素當(dāng)成純文本輸出仪召,v-html會將元素當(dāng)成HTML標(biāo)簽解析后輸出
- number | 0 可以向下取整
因為|這個是或位操作符,意思是先將數(shù)值轉(zhuǎn)換成32位二進(jìn)制整數(shù)值(如果有小數(shù)則忽略)蹄胰,再對二進(jìn)制上每一位進(jìn)行或運算,得出結(jié)果奕翔;
這里xxx|0裕寨,因為0的二進(jìn)制就是0000000...00一共32位(32個0),無論任何數(shù)對0進(jìn)行或運算都是原來的數(shù),因此可以用它來進(jìn)行向下取整
vue lazy-load
Vue.use(VueLazyload,{
loading:require('./common/image/default.png')
})
<div class="icon">
<img width="60" height="60" v-lazy="item.imgurl"/>
</div>
vue 自定義指令
vue中自定義指令名稱必須v-開頭宾袜,不過我們在定義這個自定義指令時捻艳,名稱省略v-的前綴,如;
自定義指令的名稱為v-red庆猫,則定義為:
vue.directive('red',function(el){});
該函數(shù)當(dāng)中的形參el代表使用了這個v-red指令的dom元素认轨,代碼如下:
<script>
window.onload = function(){
Vue.directive('red',function(el){
el.style.color = 'red';
});
var vm = new Vue({
el:'#box',
data:{
msg:'qianqian'
}
});
};
</script>
<div id="box">
<h2 v-red>{{msg}}</h2>
</div>
當(dāng)自定義指令接收的參數(shù)為一個對象時,示例代碼如下所示:
<script>
window.onload = function(){
Vue.directive('red',function(el,binding){
el.style.color = binding.value.color;
el.style.backgroundColor = binding.value.background;
});
var vm = new Vue({
el:'#box',
data:{
msg:'qianqian',
b:'skyblue',
c:'yellow'
}
});
};
</script>
<div id="box">
<h2 v-red="{color:b,background:c}">{{msg}}</h2>
</div>
生命周期函數(shù)
vue提供了幾個鉤子函數(shù)月培,用于對應(yīng)由vue創(chuàng)建的實例對象的生命周期好渠,下面來羅列
vue2.0當(dāng)中定義的生命周期函數(shù)。
1.beforeCreate
當(dāng)實例在函數(shù)對象剛被創(chuàng)建节视,還沒有綁定屬性時觸發(fā)執(zhí)行
2.create
該函數(shù)在實例對象完成創(chuàng)建和屬性綁定,但是dom還沒有生成時觸發(fā)執(zhí)行
3.beforeMount
該函數(shù)在組件掛載之前觸發(fā)執(zhí)行假栓。
4.mounted
該函數(shù)在組件掛載完成之后執(zhí)行寻行。
5.beforeUpdate
該函數(shù)在組件數(shù)據(jù)更新之前觸發(fā)執(zhí)行。
6.updated
該函數(shù)在組件數(shù)據(jù)更新完畢之后觸發(fā)執(zhí)行匾荆。
7.beforeDestroy
該函數(shù)在實例對象銷毀之前觸發(fā)執(zhí)行拌蜘。
8.destroyed
該函數(shù)在實例對象完成銷毀之后觸發(fā)執(zhí)行
關(guān)于watch 有一篇blog寫的比較好
http://www.cnblogs.com/shiningly/p/9471067.html
準(zhǔn)備好好梳理一下vuex