1. v-on
监听原生事件 (变更)
现在在组件上使用 v-on
只会监听自定义事件 (组件用 $emit
触发的事件)。如果要监听根元素的原生事件,可以使用 .native
修饰符,比如:
<my-component v-on:click.native="doSomething"></my-component>
<router-link class="sidebar-link" to="/guide/Basics_plugins" @click.native="toggleNav">插件和预设</router-link>
2.Vue和Jquery混合开发中绑定事件不生效的问题
如下图的方式绑定事件是不会生效的:
export default {
created: function () {
$('#navBar .grid-content').click(function () {
$('#navBar a').removeClass('on');
$(this).find('a').addClass('on');
})
}
}
原因是:vue是通过virtual DOM(虚拟DOM)渲染的页面,created只是编译完成阶段,而jQuery绑定事件必须在DOM加载完成之后才能绑定,所以确定DOM已经渲染完成的方法有以下:
1 . $(function(){ ... })
export default {
created: function () {
$(function () {
$('#navBar .grid-content').click(function () {
$('#navBar a').removeClass('on');
$(this).find('a').addClass('on');
})
})
}
}
2. mounted:
注意 mounted
不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted
:
export default {
mounted: function () {
$('#navBar .grid-content').click(function () {
$('#navBar a').removeClass('on');
$(this).find('a').addClass('on');
})
}
}
3. vm.$nextTick(function(){ .... }) :推荐方式
export default {
mounted: function () {
this.$nextTick(function () {
$('#navBar .grid-content').click(function () {
$('#navBar a').removeClass('on');
$(this).find('a').addClass('on');
})
})
},
}