Vue实战中常见问题解决方案积累（一）

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');
                })
            })
        },
}