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 不编译，直接原样显示