vue事件

$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的结构挂载完成执行

//