vue01

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")