Vue复习第二天

修饰符

js的stopPropagetion（）与cancelBubbel = true

• @事件.stop阻止事件冒泡

事件捕获 js 中的 xxx.addEvenListener(‘click’,fn,true)

• @事件.capture

阻止事件even.preventDefault,returnValue = false

• @事件.prevent

jquery once 事件只执行一次

• @事件.once

event.srcElement&&event.target 判断事件源绑定事件

• @事件.self 只用点自己的时候算调用

filters

	html
	{{'123'} | my(1,2,3)}
	vue：
	filters:{
		my(data){
			return 'jw' + data
		}
	}

• 也可以定义一个全局过滤器(放在页面的顶部)

Vue.filter('my',(data)=>{
	return 'jw' + data
	}
)

computed 计算属性 不是方法

• 方法不会缓存，computed会根据依赖（归vue管理的数据，可以响应式变化）的属性进行缓存
• 两部分组成有get和set（不能只写set）一般情况下通过js赋值影响其他人和获知表单元素设置值的时候会调用set方法
• 获取值的时候用get，改变值的时候用set
• computed 默认调用get方法，必须有return，不支持异步！

watch 观察者(可以异步使用)

• watch的属性名要和被观察的属性名一致

watch:{
		a(newVal,oldVal){
		console.log(newVal,oldVal)
	}
}

v-if和v-show

• v-if时操作dom，v-if可以和v-else-if 和v-else一起使用
• v-show是操作样式
• template标签是vue自带的没有效果的标签但是v-show不能使用

v-bind

• 动态绑定属性用 ：代替v-bind

<img :src= "src" :width="w"/>

• class和style的绑定方法有两种，一个是数组，另一个是对象

<div class="a",:class="{b：true,c:false}"></div>
<div class="a",:class="[b,c]"></div>