相對angular 和react ，本人比較喜歡vue,現在的工作項目也在用vue,前兩個有朋友在問我在使用vue中有沒有遇到一些很難解決的問題，一下我也只能說出一兩個，所以索性就抽時間總結一下我在項目中遇到的vue的問題，有寫的不對的地方，在您時間還允許的情況下，還勞煩大家告知小妹，我也好盡早修改，以免給看文章的其他同仁帶來不必要的麻煩！
=============== 通知：
博主已遷至《掘金》碼字，博客園可能以后不再更新，掘金地址：https://juejin.im/post/5a1a6a6551882534af25a86b 請多多關照！！
-------------------在此謝過！-----------
關於vue cli項目搭建，我在之前的文章中有專門寫過，有不懂的同學，可參考上一篇 vue cli 框架搭建，
接下來回歸主題，說一下我在使用vue時遇到的具體問題。
先陳列一下vue的整體架構：
事件：methods:{ };
過濾器：filters:{ };
計算：conputed：{ }；
觀察者：watch:{ };
鈎子函數：
created:function(){ //創建 }, mounted:function(){ //掛載 }, updated:function(){ //更新 }, destoryed:function(){ // 銷毀 }
一、關於css只在當前組件中起作用
--------------------------------------------------------------------------------------------
在vue的每個組件中，都可以自定義css 和 js,那么如果只希望當前的css只在當前頁面生效，可以在style 的標簽這樣書寫，這樣當前頁面的所有css樣式，除當前組件，不會在其他組件生效並且不會影響到其他組件頁面渲染。
<style scoped></style>
二、關於循環中的img的src賦值的問題
------------------------------------------------------------------------------
在 vue中的循環是使用v-for 來實現的，在標簽中注入v-for,在接下來使用到的地方就可以直接使用
<template>
<div v-for="item in cityList">
<div>城市名稱：{{item.title}}</div>
<div>城市ID：{{item.id}}</div>
<div>城市圖片：<img src=''{{item.img}}''></div> //這行是報錯的
</div>
</template>
<script>
export default:{
data(){
return:{
cityList:[{
title:'北京'，
id:001,
img:'static/logo.png'
},
{
title:'上海'，
id:002,
img:'static/logo.png'
}]
}
}
}
</script>
報錯如下：這里意思是在“src”屬性插值將導致404請求。使用v-bind：src 簡寫為 ：src 代替
[HMR] bundle has 1 errors
client.js?d90c:161 ./~/_vue-loader@12.2.2@vue-loader/lib/template-compiler?{"id":"data-v-60d18b79","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"}}!./~/_vue-loader@12.2.2@vue-loader/lib/selector.js?type=template&index=0!./src/components/vuetest.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<div>
<h1>vue測試頁面</h1>
<div v-for="item in cityList">
<div>城市名稱：{{item.title}}</div>
<div>城市ID：{{item.id}}</div>
<div>城市圖片：<img src="{{item.img}}"></div>
</div>
</div>
- src="{{item.img}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
@ ./src/components/vuetest.vue 10:2-340
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
因為vue官網在介紹v-bind時，不可以再使用{{}}，例如：
<template>
<a :href='msg'>獲取動態數據</a>
<a href='http://www.baidu.com'>百度</a>
</template>
<script>
export default:{
data(){
return:{
msg:'http://www.baidu.com'
}
}
}
</script>
正確代碼如下：
<template>
<div v-for="item in cityList">
<div>城市名稱：{{item.title}}</div>
<div>城市ID：{{item.id}}</div>
<div>城市圖片：<img :src='item.img'></div>
</div>
</template>
<script> export default:{ data(){ return:{ cityList:[{ title:'北京'， id:001, img:'static/logo.png' }, { title:'上海'， id:002, img:'static/logo.png' }] } } } </script>
頁面正常顯示：
三、關於v-if和v-show的區別
----------------------------------------------------------------------------------------
在vue中有兩種隱藏元素的方式，那就是v-if和v-show,但是兩者有什么區別呢？什么時候用v-if,什么時候用v-show 呢？
1.先說最大的區別，v-if通過條件判斷來渲染條件塊，當為假值時，當前條件塊的所有DOM元素不進行渲染；v-show同樣也是條件判斷，但如果v-show的值為假值時，當前條件塊雖不會在頁面顯示，但已經渲染完畢，只是屬性設置成了display：none.
總結就是v-if 是通過條件判斷來添加和刪除DOM元素。v-show是通過display：block和display:none來控制元素的顯示隱藏。
2.v-if 是有惰性的，如果初始條件為假值，則直接什么也不做，只有在條件變為真時才開始局部編譯；v-show是在任何條件都被編譯，然后被緩存，而且DOM元素保留，即使為假值時，在后台仍然可以看到DOM元素已經被渲染出來。
3. v-if適合在條件不太可能變化時使用，v-show適合頻繁切換。
4.v-if后面可以跟v-else,或v-else-if,但v-show 不可以
當v-if和v-show兩個值都為true時的渲染結果，都正常渲染
當v-if和v-show 的值都為假值時：頁面沒有渲染，v-if未渲染dom元素，v-show渲染成功，但被添加了class 為display：none
四、關於在vue中如何操作DOM元素
-------------------------------------------------------------------------------------------------------
我們都知道vue框架中我們一般操作的都是數據，那么假如我們要操作dom元素使用什么方法呢？下面就來介紹一下！
假如有以下元素，我們要獲取這個h2元素的文本，需要給此元素添加ref屬性，並賦予名字
<h2 ref='foo'>我是ref的值</h2>
接下來就可以使用這個方法獲取到它的文本（注意是this.$refs 不是this.$ref）：
console.log(this.$refs.foo.innerHTML')
那么如何改變h2中的文本呢？
this.$refs.foo.innerHTML='我是新值
這樣就可以和以前一樣，輕松的操作dom元素了，但是vue還是以操作數據為核心，所以建議盡量少的使用以上方法。
五、router-link 中的tag屬性
-----------------------------------------------------------------
在vue路由的router-link標簽中有一個屬性tag,是我今天在查閱資料時發現的，感覺比較有意思，推薦給大家。
那么我們就給<router-link to='/about'>的標簽上添加上tag屬性,並賦值
<router-link to='/fenceCenter' >中心點</router-link>
<router-link to='/vuetest'tag='li'>vue測試</router-link>
那么我們看看它和我們正常渲染的<router-link>有什么不同
上面的是我們正常渲染的<router-link> vue會自動解析成<a>標簽的形式，下面是我們加了tag屬性的渲染成了賦值的<li>標簽，是不是很神奇呢？ tag除了可以賦值"li",還 可以賦值成你想要的所有的標簽哦！ p,span,h1，div....都可以哦！快去動手試試吧！！
六、vue中的指定路由跳轉
-------------------------------------------------------------------------
當有業務需要在某子組件內，點擊一個按鈕切換路由時，那么我們可以用 this.$router.push('/map')
if(a>3){this.$router.push('/map')}
前提router需要掛在到vue上，這樣才可以獲取到this.$router ，而且push后面的括號中的路由地址需要在vue的router中注冊，在（''）中填寫你需要跳轉的路由即可
七、vue的路由router中的go方法
---------------------------------------------------------------------------
this.$router.go('-1')
go方法用來用作前進后退導航，有時業務需要我們又一個返回上一頁面，那么我們就可以用go來實現。當為‘-1’時后退到上一個路由。
七、編寫vue組件
---------------------------------------------------------------------------
現實中我們或許有這樣的需求，例如A頁面為一個主頁面，A1,A2，A3為3個子頁面，但A1,A2，A3頁面的內容分別比較復雜，需要單頁面來編輯，這時我們就需要把A1,A2,，A3寫成3個組件，然后全部加載A的主頁面上；又或有這樣的情況，當子頁面的復用率比較高時，同樣可以采取使用組件的方式來實現。總之，你可以把你想實現的寫成組件，這樣第一方便修改，第二頁面干凈整潔，第三；讓別人看起來一目了然。
下面我們就看看，組件到底是怎么實現吧！！！
A頁面：
<template> <div>
<h2 style="color:red">我是主頁面</h2>
<content><content> //我是加入的組件
</div> </template> <script>
import content from './content' //找到組件的位置 引入
export default { name: "", data() { return { } },
components:{
content //將組件寫入模板內才可生效，當有多個組件，看用逗號分開
}, mounted() { }, methods: {} } </script>
<style scoped>
</style>
content組件頁面： 組件頁面就是普通頁面，當然組件頁面的事件也是會帶到主頁面的。
<template>
<div @click="foo()"> 我是組件頁面 </div>
</template>
<script> export default { name: "", data() { return { } }, mounted() { }, methods: { foo(){ alert("我是好人") } } } </script>
<style scoped>
</style>
這時我們來看一下效果：
這樣你想要的效果就有了哦！
那么還需要注意一點：如果你的組件名字是駝峰式寫法，那么在
<template>
<div> 我是主頁面 <content-f> </content-f> //這里要這樣寫
</div>
</template>
<script> import contentF from './contentF' //找到組件的位置 引入
export default { name: "", data() { return { } }, components:{ contentF //將組件寫入模板內才可生效，當有多個組件，看用逗號分開
}, mounted() { }, methods: {} } </script>
<style scoped>
</style>
以上就是最簡單的組件的寫法！
八、vue中watch的用法
之前在用vue的時候，有見同事在使用vue，可是自己沒有用過，今天就來看一下，到底watch是個什么東東呢？
在vue的官網是這么介紹的：把它命名為 觀察者
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watcher。這是為什么 Vue 通過 watch 選項提供一個更通用的方法，來響應數據的變化。當你想要在數據變化響應時，執行異步操作或開銷較大的操作，這是很有用的。
通俗點講，就是在vue中有一個watch,它可以監聽你的數據是否發生變化，一旦發生變化，可以進行某些操作，那么我們就來試試：
<template>
<div>
<button @click="foo()">點擊按鈕</button>
<div>{{value}}</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
value:1,
}
},
mounted() {},
watch:{
value:function(val,oldval){
console.log(val,oldval)
}
},
methods: {
foo() {
this.value=5
}
}
}
</script>
<style scoped>
</style>
看一下結果：當value被改變時，會在后台打印出當前的值和改變前的值：
但當我們再次重復上一次的動作時，並不會再次打印結果，那是因為value值改變成5后，再次點擊，還是同樣的值，value的值並沒有再次發生變化。
以上為9月27號更新內容
--------------------------------------------------------------------- ----