Vue指令学习02

v-on缩写和事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件监听器使用事件捕获模式
.self 只当事件在元素本身触发时触发回调
.once 时间只能触发一次

<div id="app">
<!--使用.self 点击自身才触发事件-->
<div class="inner" @click.self="divHandler">
	<input type="button" value="戳他" @click="btnHandler">
	<!--使用.stop阻止冒泡-->
	<input type="button" value="戳他" @click.stop="btnHandler">
	<!--使用.capture事件捕获机制-->
	<input type="button" value="戳他" @click.capture="btnHandler">
	<!--阻止默认行为-->
	<a href="http://www.baidu.com" @click.prevent="linkClick">有问题先去百度</a>
	<!--使用.once只触发一次事件-->
	<a href="http://www.baidu.com" @click.once="linkClick">有问题先去百度</a>
	<!--.self只会阻止自己身上的事件，而.stop则会阻止多层的冒泡行为-->
</div>
</div>
<script>
var vm = new Vue({
	el: '#app',
	data: {

	},
	methods: {
		divHandler(){
			console.log('触发了div点击事件');
		},
		btnHandler(){
			console.log('触发了div点击事件');
		},
		linkClick(){
			console.log('触发了链接点击事件');
		}
	}
});
</script>

v-model双向数据绑定

<h4>{{ msg }}</h4>
<!--v-bind只能实现数据的单向数据绑定-->
<input type="text" :value="msg" style="width: 100%;">
<!--使用v-model可以实现表单元素和Model中的数据进行双向数据绑定-->
<!--只能用于表单元素中 input select checkbox textarea-->
<input type="text" style="width: 100%;" v-model="msg">
简易计算器
	<div id="app">
		<input type="text" v-model="n1">
		<select v-model="opt">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" v-model="n2">
		<input type="text" value="=" @click="calc">
		<input type="text" v-model="result">
	</div>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				n1: 0,
				n2: 0,
				result: 0,
				opt: '+'
			},
			methods: {
				calc(){//计算结果
					//逻辑处理
					// switch(this.opt){
					//     case '+':
					//         this.result = parseInt(this.n1) +parseInt(this.n2);
					//         break;
					//     case '-':
					//         this.result = parseInt(this.n1) -parseInt(this.n2);
					//         break;
					//     case '*':
					//         this.result = parseInt(this.n1) *parseInt(this.n2);
					//         break;
					//     case '/':
					//         this.result = parseInt(this.n1) /parseInt(this.n2);
					//         break;
					// }
					// 第二种实现方式eval()
					// 投机取巧的方式，正式开发中少用
					var codeStr = 'parseInt(this.n1) '+this.opt+' parseInt(this.n2)';
					this.result = (codeStr);
				}
			}
		});
	</script>

以上是此次只是点的总结以及代码的整理。