vue復習:
vue-resource他會將一個$http屬性掛載vm上
$http是定義在vue的原型上,實例上可以直接使用
this.$http.get('./products.json').then( (res)=> { //success
//vue-resource將this改成了vm實例
this.products = res.body;
}, (err) => { //error
console.log(err);
});
filters過濾器
改變展示的結(jié)果仲翎,而且可以實現(xiàn)共用 痹扇,也可以用methods來實現(xiàn)
{{data | toFixed(2,'¥')}}
toFixed(input,param1,param2){ //必須就是|后面的名字,
//input代表的是|前面的結(jié)果 返回值則是最終展現(xiàn)的結(jié)果
return param2+parseFloat(input).toFixed(param1);
}
created:實例加載后執(zhí)行,等data和methods加載成功執(zhí)行
一般放ajax請求請求過來的代碼
vue的修飾符溯香,都在事件后面以.開頭鲫构,而且可以使用多個事件.stop.prevent
@click.capture=""捕獲 ,先捕獲玫坛,再冒泡
@click.self=""只有點擊自己時觸發(fā)e.target||e.srcElement
@click.once只觸發(fā)一次
.stop阻止冒泡e.stopPropagation || cancelBubble=true
.prevent阻止默認行為e.preverDefault returnValue=false
.capture捕獲行為addEventListener('click',fn,true)
v-bind:
:title="title"
:src="src"
:style="stryle"
通過boolean類型结笨,使其判斷樣式是否生效
:class="{back:true,fontSize:true}"
數(shù)值中寫的類名都會生效
:class="['back',{fontSize:true}]"
computed:計算屬性,但是寫的時候是方法
watch:{
heart(){ //和要監(jiān)控的數(shù)據(jù)必須相同名字
}
}
methods computed watch的區(qū)別
監(jiān)控一個數(shù)據(jù)的變化(純粹就是執(zhí)行一件事)可以實現(xiàn)異步方法
h5的新屬性湿镀,拖拽
draggable="true"讓元素可以拖拽
e.dataTransfer.setDragImage()設置拖拽的圖片
dragstart
dragover阻止dragover否則不會觸發(fā)drop
drop
template:'
{{a}}
'
如果內(nèi)部有模板就不會使用外部的模板
生命周期:
beforeCreate一般用不到炕吸,這里不能拿到數(shù)據(jù)和方法
created獲取數(shù)據(jù),方法和數(shù)據(jù)已經(jīng)掛載在實例了了
beforeMount此函數(shù)在掛載 之前執(zhí)行勉痴,一般用不到
mounted可以操作真實的dom
beforeUpdate dom更新前會觸發(fā)這個事件赫模,可以做一個全局數(shù)據(jù)的監(jiān)控,我們一般用watch
updated
beforeDestroy一般清空定時器蒸矛,或者移除自定義函數(shù)
destroy
$nextTick等待dom渲染完成后瀑罗,再操作dom dom渲染是異步渲染
mounted(){
this.$nextTick(()=>{
console.log(this.msg);
})
}
vm.#destroy();移除所以的監(jiān)聽和觀察者,孩子組件
手動掛載
let vm=new Vue({
data:{
}
}).$mount("#app")