事件默认冒泡：

当点击按钮，先触发点击按钮事件，再向上层冒泡

<body>
	<div id="app">
		<div class="inner" @click='divhandle'>
		<input type="button" value="戳我" @click='btnhandle'>
		</div>
	</div>
	<script >
		var vm = new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				divhandle(){
					console.log('触发点击inner事件');
				},
				btnhandle(){
					console.log('触发点击btn事件');
				}
			}
		})
	</script>
</body>

　　

事件修饰符

  • .stop阻止冒泡 
    <div class="inner" @click='divhandle'>
		<input type="button" value="戳我" @click.stop='btnhandle'>
		</div>

    　　

 

 

 

  • .prevent阻止默认事件

<div id="app">
		<!-- <div class="inner" @click='divhandle'>
		<input type="button" value="戳我" @click.stop='btnhandle'>
		</div> -->
		<a href="http://www.baidu.com" @click.prevent='linkclick'>百度</a>
	</div>
	<script >
		var vm = new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				divhandle(){
					console.log('触发点击inner事件');
				},
				btnhandle(){
					console.log('触发点击btn事件');
				},
				linkclick(){
					console.log('触发链接点击事件');
				},
			}
		})
	</script>

　　

 阻止a标签的默认跳转行为

  • .capture 添加事件侦听器使用事件捕获模式
<div class="inner" @click.capture='divhandle'>
		<input type="button" value="戳我" @click.stop='btnhandle'>
		</div>
//事件从外到里

　　

 

 

 

  • .self只当事件在元素本身（比如本身子元素）触发时触发回调
<div class="inner" @click.self='divhandle'>
		<input type="button" value="戳我" @click.stop='btnhandle'>
		</div>
//只有点击inner块自身才触发divhandle事件，点击button时不触发divhandle事件

　　

 

 

 

  • .once事件只触发一次
<a href="http://www.baidu.com" @click.prevent.once='linkclick'>百度</a>
//只触发一次事件处理函数，包括prevent事件，click.once.prevent也一样

　　.stop和.self

两个都有阻止冒泡的效果，但是stop阻止所有冒泡，self只阻止当前元素冒泡，不影响其它冒泡

例如，outer-inner-button三层，在button @click.stop，只发生button事件，阻止冒泡，不发生outer，inner的click事件；

在inner @click.self，点击button，只发生button和outer事件。

v-modle和双向数据绑定

<div id="app">
		<h4>{{msg}}</h4>
		<input type="text" v-bind:value="msg">
	</div>
	<script >
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'敲代码啦'
			},
			methods:{
				
			}
		})
	</script>

　　v-bind只能实现数据单向绑定，从M绑定到V，无法实现双向绑定

<div id="app">
		<h4>{{msg}}</h4>
		<input type="text" style='width: 100%;' v-model="msg">
</div>
	<script >
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'敲代码啦'
			},
			methods:{
				
			}
		})
	</script>

　　使用v-model可以实现表单元素和model中数据的双向绑定

注意：v-model只能运用在表单元素中

input(radio,text,address,email...

select

checkbox

textarea