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过滤器
改变展示的结果,而且可以实现共用 ,也可以用methods来实现
{{data | toFixed(2,'¥')}}
toFixed(input,param1,param2){ //必须就是|后面的名字,
//input代表的是|前面的结果 返回值则是最终展现的结果
return param2+parseFloat(input).toFixed(param1);
}
created:实例加载后执行,等data和methods加载成功执行
一般放ajax请求请求过来的代码
vue的修饰符,都在事件后面以.开头,而且可以使用多个事件.stop.prevent
@click.capture=""捕获 ,先捕获,再冒泡
@click.self=""只有点击自己时触发e.target||e.srcElement
@click.once只触发一次
.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}"
数值中写的类名都会生效
:class="['back',{fontSize:true}]"
computed:计算属性,但是写的时候是方法
watch:{
heart(){ //和要监控的数据必须相同名字
}
}
methods computed watch的区别
监控一个数据的变化(纯粹就是执行一件事)可以实现异步方法
h5的新属性,拖拽
draggable="true"让元素可以拖拽
e.dataTransfer.setDragImage()设置拖拽的图片
dragstart
dragover阻止dragover否则不会触发drop
drop
template:'
{{a}}
'
如果内部有模板就不会使用外部的模板
生命周期:
beforeCreate一般用不到,这里不能拿到数据和方法
created获取数据,方法和数据已经挂载在实例了了
beforeMount此函数在挂载 之前执行,一般用不到
mounted可以操作真实的dom
beforeUpdate dom更新前会触发这个事件,可以做一个全局数据的监控,我们一般用watch
updated
beforeDestroy一般清空定时器,或者移除自定义函数
destroy
$nextTick等待dom渲染完成后,再操作dom dom渲染是异步渲染
mounted(){
this.$nextTick(()=>{
console.log(this.msg);
})
}
vm.#destroy();移除所以的监听和观察者,孩子组件
手动挂载
let vm=new Vue({
data:{
}
}).$mount("#app")