Vue监听事件总结
**引入Vue.js文件**如下,根据自己的文件目录引入路径<script type="text/javascript" src="../js/vue.js"></script>1、定义监听事件使用v-on或者@监听事件,如下点击加1<button @click=“countSecond”>点击加2通过{{countNumber}}获取vue中的数据点击了几{{
·
**引入Vue.js文件**
如下,根据自己的文件目录引入路径
<script type="text/javascript" src="../js/vue.js"></script>
1、定义监听事件
使用v-on或者@监听事件,如下
点击加1
<button @click=“countSecond”>点击加2
通过{{countNumber}}获取vue中的数据
点击了几{{countNumber}}
2、新建一个vue对象
data属性是对数据的获取,最终将数据显示在界面
methods用来监听方法
var vm = new Vue({ // 配置对象 options
// 配置选项(option)
el: '#test', // element: 指定用vue来管理页面中的哪个标签区域
data: {
countNumber:0
},
methods:{
count:function(){
this.countNumber++;
},
countSecond:function(){
this.countNumber=this.countNumber+2;
}
}
})
如下图所示、右边部分是在谷歌浏览器中使用vue-devtools-dev工具,方便vue的调试,需要自己装配
3、对于冒泡事件的处理
什么事冒泡?简单的说就是 父元素里有 子元素, 如果点击了 子元素, 那么click 事件不仅会发生在子元素上,也会发生在其父元素上,依次不停地向父元素冒泡,直到document元素
3.1)定义父子级的监听事件
3.2)创建一个vue对象,管理定义的div模块
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
当在son标签上点击,将依次弹出alert(son),alert(me),alert(father),alert(grandFather)
3.3)阻止冒泡
添加事件修饰符,在me上的click后面加一个 .stop, 那么冒泡到了这里就结束了,就不会冒到father上面去了。
更多推荐
已为社区贡献2条内容
所有评论(0)