vue之常用指令

事件缩写

v-on:click=

简写方式 @click=

事件对象$event

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>事件简写和事件对象$event</title>

	<script src="js/vue.js"></script>

	<script>

		window.onload=function(){

			let vm=new Vue({

				el:'#itany',

				methods:{

					show(){

						console.log(111);

					},

					print(e){

						// console.log(e);

						console.log(e.target.innerHTML); //DOM对象

						console.log(this);

					}

				}

			});

		}

	</script>

</head>

<body>

	<div id="itany">

		<button v-on:click="show">点我</button>

		<button @click="show">点我</button>

		<hr>

		<button @click="print($event)">Click Me</button>

	</div>

</body>

</html>

事件冒泡

阻止事件冒泡：

a)原生js方式，依赖于事件对象

b)vue方式，不依赖于事件对象

@click.stop

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>事件冒泡和默认行为</title>

	<script src="js/vue.js"></script>

	<script>

		window.onload=function(){

			let vm=new Vue({

				el:'#itany',

				methods:{

					show(){

						console.log(111);

						// e.stopPropagation();

					},

					print(){

						console.log(222);

					},

					write(){

						console.log(333);

					},

					study(){

						console.log(444);

						// e.preventDefault();

					}

				}

			});

		}

	</script>

</head>

<body>

	<div id="itany">

		<div @click="write">

			<p @click="print">

				<!-- <button @click="show($event)">点我</button> -->

				<button @click.stop="show">点我</button>

			</p>

		</div>

		<hr>

		<!-- <a href="#" @click="study($event)">俺是链接</a> -->

		<a href="#" @click.prevent="study">俺是链接</a>

	</div>

</body>

</html>

Tips: 由内到外依次执行 print,write,itany被称为"事件冒泡",只执行print不执行write和itany, @click.stop

事件默认行为

阻止默认行为：

a)原生js方式，依赖于事件对象

<a href="#" @click.prevent="study">俺是链接</a>

比如网址是 www.baidu.com,点击上面的链接会跳转到 www.baidu.com#,

阻止默认行为 @click.prevent

键盘事件

回车：@keydown.13 或@keydown.enter

上：@keydown.38 或@keydown.up

默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>键盘事件</title>

	<script src="js/vue.js"></script>

	<script>

		/**

		 * 自定义键位别名

		 */

		Vue.config.keyCodes={

			a:65,

			f1:112

		}

		window.onload=function(){

			let vm=new Vue({

				el:'#itany',

				methods:{

					show(e){

						console.log(e.keyCode);

						if(e.keyCode==13){

							console.log('您按了回车');

						}

					},

					print(){

						// console.log('您按了回车');

						// console.log('您按了方向键上');

						console.log('11111');

					}

				}

			});

		}

	</script>

</head>

<body>

	<div id="itany">

		<!-- 键盘事件：@keydown、@keypress、@keyup -->

		<!-- 用户名：<input type="text" @keydown="show($event)"> -->

		<!-- 简化按键的判断 -->

		<!-- 用户名：<input type="text" @keydown="show($event)"> -->

		<!-- 用户名：<input type="text" @keydown.13="print"> -->

		<!-- 用户名：<input type="text" @keydown.enter="print"> -->

		<!-- 用户名：<input type="text" @keydown.up="print"> -->

		用户名：<input type="text" @keydown.f1="print">

		<!-- 事件修饰符 -->

		<button @click.once="print">只触发一次</button>

	</div>

</body>

</html>

事件修饰符

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。 某个组件的根元素上绑定 .native修饰符,使组件变成普通的HTML

.once - 只触发一次回调。

属性绑定和属性的简写

v-bind 用于属性绑定， v-bind:属性=""

属性的简写：

v-bind:src="" 简写为 :src=""

class和style属性

绑定class和style属性时语法比较复杂：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>class和style属性</title>

	<script src="js/vue.js"></script>

	<script>

		window.onload=function(){

			let vm=new Vue({

				el:'#itany',

				data:{

					bb:'aa',

					dd:'cc',

					flag:true,

					num:-2,

					hello:{aa:true,cc:true},

					xx:{color:'blue',fontSize:'30px'},

					yy:{backgroundColor:'#ff7300'}

				}

			});

		}

	</script>

	<style>

		.aa{

			color:red;

			font-size:20px;

		}

		.cc{

			background-color:#ccc;

		}

	</style>

</head>

<body>

	<div id="itany">

		<!--

			class属性

		 -->

		<!-- <p class="aa">南京网博</p> -->  <!-- 可以访问，普通css方式 -->

		<!-- <p :class="aa">南京网博</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 -->

		<!-- 方式1:变量形式 -->

		<!-- <p :class="bb">南京网博</p> -->

		<!-- 方式2：数组形式，同时引用多个 -->

		<!-- <p :class="[bb,dd]">南京网博</p> -->

		<!-- 方式3：json形式，常用！！！ -->

		<!-- <p :class="{aa:true,cc:flag}">南京网博</p> -->

		<!-- <p :class="{aa:num>0}">南京网博</p> -->

		<!-- 方式4：变量引用json形式 -->

		<!-- <p :class="hello">南京网博</p> -->

		<!--

			style属性

		 -->

		 <p :style="[xx,yy]">itany</p>

	</div>

</body>

</html>

数据绑定的方式

a.双向绑定

v-model

b.单向绑定

方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决

方式2：使用v-text、v-html



	<style>

		/* 必须配置css样式，否则不生效 */

		[v-cloak]{

			display:none;

		}

	</style>

	<h3>aaa<span v-cloak>{{msg}}</span></h3>

其他指令

v-once 数据只绑定一次

v-pre 不编译，直接原样显示