也可能是因為接觸vue時間也不長，經常落入不知名的『坑』中，對於我這個菜鳥來說，每次『落坑』無疑是一場不小的災難。前兩天有個朋友在問我，在使用說到vue的實戰，不得不說vue中有沒有遇到一些很難解決的問題，一下我也只能說出一兩個，正所謂『光說不練，假把式』，所以索性就抽時間總結一下我在專案中遇到的vue的問題，也貼出了效果，這樣看起來也比較清晰。有寫的不對的地方，在您時間還允許的情況下，還勞煩大家告訴我哦，我也好盡早修改，以免給看文章的其他同仁帶來不必要的麻煩！（當前版本："[email protected]"）-------------------在此謝過！-----------
vue專案建立，那麼關於vue cli專案搭建，我在之前的文章中有專門寫過，有不懂的同學，可參考我的第一篇文章：
先陳列一下vue的整體架構：
事件：methods:;
過濾器：filters:;
計算：conputed：；
觀察者：watch:;
鉤子函式：
created:function
(), mounted:function
(), updated:function
(), destoryed:function
()
css，只在當前元件中有效。
在vue的每個元件中，都可以自定義css和js,那麼如果只希望當前的css只在當前頁面生效，可以在style的標籤這樣書寫，這樣當前頁面的所有css樣式，除當前元件，不會在其他元件生效並且不會影響到其他元件頁面渲染。
img的src賦值的問題
在vue中的迴圈是使用v-for來實現的，在標籤中注入v-for,在接下來使用到的地方就可以直接使用。
"item in citylist">
城市名稱：}
城市id：}
城市：//這行是報錯的
v-bind：src簡寫為：src代替)
[hmr] bundle has 1 errors
client.js?d90c:161 ./~/[email protected]@vue-loader/lib/template-compiler?}!./~/[email protected]@vue-loader/lib/selector.js?type=template&index=0!./src/components/vuetest.vue
(emitted value instead of an instance of error)
error compiling template:
"item in citylist">
城市名稱：}
城市id：}
城市：- src="": interpolation inside attributes has been removed. use v-bind or the colon shorthand instead. for example, instead of "}">, use "val">.
@ ./src/components/vuetest.vue 10:2-340
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
'msg'>獲取動態資料
"item in citylist">
城市名稱：}
城市id：}
城市：
三、關於v-if和v-show的區別
在vue中有兩種隱藏元素的方式，那就是當v-if和v-show,但是兩者有什麼區別呢？什麼時候用v-if,什麼時候用v-show呢？
v-if和v-show兩個值都為true時的渲染結果，都正常渲染
當v-if和v-show的值都為假值時：頁面沒有渲染，v-if未渲染dom元素，v-show渲染成功，但被新增了style為display：none。
四、關於在vue中如何操作dom元素。
我們都知道vue框架中我們一般操作的都是資料，那麼假如我們要操作dom元素使用什麼方法呢？下面就來介紹一下！假如有以下元素，我們要獲取這個h2元素的文字，需要給此元素新增ref屬性，並賦予名字。
this.$refs不是this.$ref）：
console.log(this.$refs.foo.innerhtml')那麼如何改變h2中的文字呢？
this.$refs.foo.innerhtml='我是新值這樣就可以和以前一樣，輕鬆的操作dom元素了，但是vue還是以運算元據為核心，所以建議盡量少的使用以上方法。
五、**router-link中的tag屬性。
在那麼我們就給vue路由的router-link標籤中有乙個屬性tag,是我今天在查閱資料時發現的，感覺比較有意思，推薦給大家。
tag屬性,並賦值:
'/fencecenter' >中心點
'/vuetest'tag='li'>vue測試
vue中遇到的坑
1 乙個是eventhub的坑 重複監聽的問題 解決方案監聽之前先off掉 2 路由的坑 不加replace會兩個頁面來回跳，無法正常的返回父級頁面。3 vuejs對data中陣列的原生方法進行了封裝，所以在改變陣列時能夠觸發檢視更新，但是以下兩種情況是無法觸發檢視的更新的 1 通過索引直接修改陣列...
VUE開發中遇到的坑
1.父元件監聽不到子元件向外觸發的事件，原因可能是 emit傳入的事件名稱只能用小寫，不可以使用駝峰式命名書寫。現版本的 vue 似乎可以支援 2.用非同步傳遞過來的資料做元件的初始化時候，直接用，因為存在非同步問題 延時，結果需在等待過程結束之後才返回 會出現not find props或者渲染出...
vue中常碰見的坑 Vue中遇到過的坑
1.在偵聽器中無法偵聽物件內的屬性，這時候可以用計算屬性先返回想要偵聽的屬性，或者用深度偵聽 deep。computed 2.這個坑算是axios的，axios在預設的情況下是不帶cookies的，要讓它帶上cookies需要在vue中的main.js進行設定 axios.defaults.with...