$event
@click="testEvent($event)"
testEvent(e) {
console.log(e)
e.srcElement.style.background="red";
}
//e.srcElement表示当前元素
事件冒泡
原生js中的组织时间冒泡
e.stopPropagation();
//阻止事件冒泡
vue中阻止事件冒泡
<button @click.stop="show($event)">click A!</button>
v-show v-if
效果差不多,只不过v-if是判断为假,销毁元素,当为真时候从新创造,而v-show通过css隐藏元素
<button @click="flag = !flag">click</button>
<h1 v-show="flag">Hello Gary!</h1>
<h1 v-if="flag">Hello Gary!</h1>
v-else
<button @click="num=1">--1--</button>
<button @click="num=2">--2--</button>
<button @click="num=3">--3--</button>
<h2 v-if="num=== 1">语文课</h2>
<h2 v-else-if="num=== 2">数学课</h2>
<h2 v-else>英语课</h2>
键盘事件
在这里插入代码片Vue的键盘事件:@keydown:按下、@keypress:按住、@keyup:抬起
v-bind操作css,操作属性
//操作属性
<img :src="imgUrl" >
//操作css
<h1 :class="fontColro">
//json方式
<h1 class="{Mycolor:flog,bgc:!flog} ">
//数组+json
<h1 class="[myFontSize,{Mycolor:flog,bgc:!flog}] ">
vue的全局事件及发生时间
理解vue事件的生命周期:
//vue环境加载完执行
//vue的结构挂载完成执行
//