实例化vue之前赋值html元素导致事件失效

标签：添加   分享   src   col   button   div   指点   blog   实例   

先实例化Vue对象，再操作其他对象，Vue对象声明时会渲染html容器内的所有元素，
会导致元素事件失效或dom元素重新创建，所以涉及html元素的对象都要在实例化Vue之后执行。

下面是简要的例子，还望高手指点，目前猜测是对象赋值后，vue渲染元素将元素进行了改变导致之前的赋值对象变化了，无论是jquery对象还是dom对象都不行。

<div id="vm">
    {{msg}}
    <input type="button" value="试试"/>
</div>
<script>
//添加一下vue、jquery引用

//变量赋值放在这里，无法触发事件
//var colVm=$("#vm");

var testVue=new Vue({
    el:‘vm‘,
    data:{
        msg
    }
});

//变量赋值放在这里，可以触发事件
var colVm=$("#vm");

$(function(){
    colVm.click(function(){
        alert("test");
    });
});
</script>

 如果非要将对象赋值放在实例化vue前面那可以使用jquery委托设置事件，亲测可用，.telegate()方法

实例化vue之前赋值html元素导致事件失效

标签：添加   分享   src   col   button   div   指点   blog   实例   

原文地址：http://www.cnblogs.com/taiyonghai/p/7516386.html