vue相关总结

vue的参数对象

基础

el
指定vue的模板

data
指定vue的初始数据

methods 
vue的方法中心

computed
从现有数据计算出新的数据

watch
监听数据的变化

生命周期钩子函数

created
当vue创建完毕 可以获取到this

filters 过滤管道（数据的格式显示）

//...
{{num|price}}
{{num|price("$")}}

//...
filters:{
   price:(val,type){
     return "type"+val;
   }
}

directives自定义指令（获取到dom）

directives:{
    img:{
    inserted(el,binding){
      // el 指令所在的dom节点
     // binding .value 自定义指令的值
     }
     }
}

computed 计算

computed:{
"rmsg":function(){return this.msg.split("").reverse().join("")}
}
//从现有数据计算出新的数据

watch监听

watch:{
obj:{
 handler:function(nval){},
 deep:true
}
}
//时刻监听数据obj的变化并执行 handler回调函数 
//deep 深度监听对象的变化（属性与子对象）

vue this

1. data的数据，与methods里面的方法 都将挂载到vue的实例上面
2. 在vue中 this 指向vue的实例

vue 组件 *重要

父子传值

父元素的数据是只可读的，不能修改，传递到子元素后，子元素可以向上抛出，让父元素自身修改

//父元素传递
<Box  @edit="edit($event)" :visible="flag"></Box>
//:visible="flag" :属性名=传递的参数，向下传值
//@edit="edit($event)" 接收到子元素上抛的数据
...
flag:false
...

//子组件接收
var Box = {
		template:`
		<div class="box2" v-if="visible" >						 
			<button @click="$emit('edit',传递的参数)">确定</button>
		</div>
				`,
				data(){return {
					
				}},
				methods:{
					edit(e){
						this.list.splice(this.index,1,e);
					}
				},
				props:{visible:{type:Boolean,default:false},}
				//props接收到父元素传值
				// type 传递的数据类型
				//default 传递的默认值
			}

####{...值}//解构赋值，可以使得值在自己的元素内不受影响，具体百度

组件的插槽

//默认插槽
...
<Parent>
   <p>嵌入内容</p>
</Parent>
...
<slot></slot>

//具名插槽
...
<Parent>
   <p slot="foot">嵌入内容</p>
</Parent>
...
<slot name="foot"></slot>

属性的 .sync 修饰符

请面向百度