Vue.js学习笔记（二)

3.监听事件
（1)v-on监听事件
代码如下：

<div id="div1">
  <div>一共点击了  {{clickNumber}}次</div> 
  <button v-on:click="count">点击</button>	//在按钮上增加 click 监听，调用 count 方法。
</div>

<script>
new Vue({
      el: '#div1',
      data: {	 	//在 js里为 Vue 对象的数据设置为 clickNumber
          clickNumber:0  
      },
      methods:{	//新建一个方法： count， 其作用是 clickNumber 自增1
          count: function(){
              this.clickNumber++;
          }
      }
    })
</script>

注：v-on可缩写为@，v-on:click="count"替换为：@click="count"。

效果图：

（2）事件修饰符
vue.js的事件修饰符有：.stop, .prevent, .capture, .self, .once;

事件修饰符里面有几个都是关于冒泡的，那么什么是冒泡呢? 简单的说就是父元素里有子元素，如果点击了子元素, 那么click 事件不仅会发生在子元素上，也会发生在其父元素上，依次不停地向父元素冒泡，直到document元素。但是点击父元素并不会触发子元素事件。

冒泡事件

代码如下：

<style>
		.div1,.div2,.div3,.div4{
			height: 400px;
			width:400px;
			/*line-height: 40px;*/
		}
		.div1{
			background-color: red;
		}
		.div2{
			background-color:aqua ;
		}
		.div3{
			background-color: brown;
		}
		.div4{
			background-color: bisque;
		}
	</style>
	<body>
		<div class="div">
		<div class="div1" @click="doc">
			1
			<div class="div2" @click="doc">
				2
				<div class="div3" @click="doc">
					3
					<div class="div4" @click="doc">4</div>
				</div>
			</div>
		</div>
		</div>
	</body>
</html>
<script>
    var content = new Vue({
        el: ".div",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.className= event.currentTarget.className;
                alert(this.className)；
            }
        }
    })
</script>

效果图：

点击div4，则依次弹出提示框div4,div3,div2,div1,子元素点击事件会触发父元素的点击事件;

事件修饰符阻止冒泡 .stop

在v-on：click后添加.stop,即v-on:click.stop="doc"或 @click.stop="doc"，例如div3上添加.stop，点击div4时，会触发div4和div3事件。

事件修饰符优先触发 .capture

在div2 上增加一个.capture,<div class="div2" v-on:click.capture="doc">,那么当冒泡发生的时候，就会优先让div2捕捉事件。
点击div3或者div4的时候，都会优先触发它。

事件修饰符只有自己能触发，子元素无法触发.self

修改div2,增加 .self,<div class="div2" v-on:click.self="doc">,这样点击div3和div4都不会导致其触发click事件，只有点击div2，才会导致事件发生。

事件修饰符只能提交一次 .once

修改div2,增加 .once,<div class="div2" v-on:click.once="doc">,div2点击一次之后，就不会再监听到click了，但是div1还能监听到。

事件修饰符阻止提交 .prevent

通过在 click 后面添加 .prevent 可以阻止页面刷新，@click.prevent="jump"；也可以直接用@click.prevent后面不跟函数， @click.prevent。
注：只有超链和form这种会导致页面刷新的操作，.prevent 才有用。普通的不导致页面刷新的按钮，加上这个没有任何变化。

代码：

<body>

		<a href="http://baidu.com" @click="jump">正常的链接 http://baidu.com</a>

		<br>
		<a href="http://baidu.com" @click.prevent="jump">prevent jump()之后的链接 http://baidu.com</a>
		<br>
		<a href="http://baidu.com" @click.prevent>纯prevent之后的链接 http://baidu.com</a>

		<br>
		<br>
		<form @submit="jump" action="http://baidu.com">
			<button type="submit">正常的form</button>
		</form>
		<form @submit.prevent="jump" action="http://baidu.com">
			<button type="submit">prevent jump()之后的form</button>
		</form>
		<form @submit.prevent action="http://baidu.com">
			<button type="submit">纯prevent之后的form</button>
		</form>

		<script>
			new Vue({
				el: '#div1',
				data: {},
				methods: {
					jump: function() {
						alert("调用jump()函数");
					}
				}
			})
		</script>
	</body>

效果图：

Vue.js学习笔记（二)

猜你喜欢