先實(shí)例化Vue對象，再操作其他對象，Vue對象聲明時會渲染html容器內(nèi)的所有元素，
會導(dǎo)致元素事件失效或dom元素重新創(chuàng)建，所以涉及html元素的對象都要在實(shí)例化Vue之后執(zhí)行。

下面是簡要的例子，還望高手指點(diǎn)，目前猜測是對象賦值后，vue渲染元素將元素進(jìn)行了改變導(dǎo)致之前的賦值對象變化了，無論是jquery對象還是dom對象都不行。

<div id="vm">{{msg}}<input type="button" value="試試"/> </div> <script> //添加一下vue、jquery引用//變量賦值放在這里，無法觸發(fā)事件 //var colVm=$("#vm");var testVue=new Vue({el:'vm',data:{msg} });//變量賦值放在這里，可以觸發(fā)事件 var colVm=$("#vm");$(function(){colVm.click(function(){alert("test");}); }); </script>

?如果非要將對象賦值放在實(shí)例化vue前面那可以使用jquery委托設(shè)置事件，親測可用，.telegate()方法

<script>$("body").delegate(colVm, "click", function(){//do someing... }); </script>

?vue中向data對象賦值實(shí)際是類似js的數(shù)組賦值一樣傳遞的是一個引用或者是指針，實(shí)際都指向同一塊棧中保存值，所以兩個對象任何一個變更值都會影響另一個取值，所以清空data的某一個對象時需要賦值一個淺拷貝副本，利用jQuery的$.extend()方法可以實(shí)現(xiàn)

實(shí)例：

<script> //引用傳遞，兩個變量名都影響值 var a=[1,2,3], b=a; b[0]=111; console.log(a[0]) //輸出結(jié)果為： 111//淺拷貝傳遞，兩個變量名互不影響 var a=[1,2,3], b=$.extend({},a); b[0]=111; console.log(a[0]) //輸出結(jié)果為：1//淺拷貝傳遞，只拷貝一級，二級依然共享一個棧 var a=[[4,5],2,3], b=$.extend({},a); b[0][1]=111; console.log(a[0][1]) //輸出結(jié)果為：111//深拷貝傳遞，遞歸拷貝每一級的數(shù)據(jù)，達(dá)到完全區(qū)分棧中的值 var a=[[4,5],2,3], b=$.extend(true,{},a); b[0][1]=111; a[0][1] //輸出結(jié)果為：5 </script>

?js中分為基本類型、引用類型

基本類型包括（存在棧中，不可以有屬性和方法）：數(shù)字、小數(shù)、字符串等，賦值是均是傳遞副本（number、string、boolean、null、undefined）

引用類型包括（對象名存在堆中，值存在棧中，堆中存有棧的內(nèi)存地址來找到值，可以有屬性和方法）：數(shù)組、對象等（除了上面這些其他都是引用類型）

簡單來講基本類型傳遞的值、引用類型傳遞的指針，通過這個指針共同操作同一塊棧內(nèi)存

javascript和其他語言不同，其不允許直接訪問內(nèi)存中的位置，也就是說不能直接操作對象的內(nèi)存空間，那我們操作啥呢？ 實(shí)際上，是操作對象的引用，所以引用類型的值是按引用訪問的。 準(zhǔn)確地說，引用類型的存儲需要內(nèi)存的棧區(qū)和堆區(qū)（堆區(qū)是指內(nèi)存里的堆內(nèi)存）共同完成，棧區(qū)內(nèi)存保存變量標(biāo)識符和指向堆內(nèi)存中該對象的指針，也可以說是該對象在堆內(nèi)存的地址。 var person1 = '{}'; var person2 = '{}'; console.log(person1 == person2); // true //兩個值類型的==比較相當(dāng)于是===的值比較，對比的值是否一樣var person1 = {}; var person2 = {}; console.log(person1 == person2); // false //兩個引用類型的比較是比較引用地址是不是一樣

參考地址：http://blog.csdn.net/t_1007/article/details/53084349

轉(zhuǎn)載于:https://www.cnblogs.com/taiyonghai/p/7516386.html

總結(jié)

以上是生活随笔為你收集整理的实例化vue之前赋值html元素导致事件失效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。