我的總結的Vue使用的注意事項

本人忘了的時候複習用的筆記，因此寫的比較亂。

---

1. css只在當前組件起做用

• 在style標籤中寫入scoped便可 例如：

---

2. v-if 和 v-show 區別

• v-if按照條件是否渲染，v-show是display的block或none；

---

3. $route和$router的區別

• $route是「路由信息對象」， 當前的頁面的路由信息： 包括path，params，hash，query，fullPath，matched，name等路由信息參數。 而$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

使用方法：

• 建立模板： var Home = {template："#home"}
• 配置路由: var routes = [{path:"/home", component:Home}]
• 生成路由： var route = new VueRouter({routes});
• 啓動路由 new Vue({ router })

---

4. vue.js的兩個核心是什麼？

• 數據驅動、組件系統

---

5. vue幾種經常使用的指令

• v-bind: 行間屬性綁定 或者用冒號 :

• v-bind:title  鼠標移上的顯示

• v-bind:src  綁定圖片路徑

• v-bind:html 綁定HTML文本和標籤

• v-bind:text 綁定文本 （字符串）

• v-bind:class 綁定類樣式（數組）

• v-bind:style  動態綁定樣式 （對象）

• v-for: 1.x 和 2.x是不同的

• v-for="i in json"

• v-for="(key, value) in json"

1.x 能夠是使用$index, $key, 2.x 被移除
- <ul id="example">
    <li v-for="item in items">
        {{$index}}
        {{$key}}
    </li>
</ul>
複製代碼

<ul id="example">
    <li v-for="(item,index) in items">
        {{item}}
        {{index}}
    </li>
</ul>
複製代碼

• v-on:click="one();two()"

• @click="one();two()" 分號隔開

• v-if顯示隱藏是將dom元素整個添加或刪除，

• v-show隱藏則是爲該元素添加css--display:none，dom元素還在。

• v-hide 和v-show正好相反

• v-else緊跟在v-if或者v-show後邊，不然將不被識別。

---

6. vue經常使用的修飾符？

.prevent: 提交事件再也不重載頁面； .stop: 阻止單擊事件冒泡； .self: 當事件發生在該元素自己而不是子元素的時候會觸發； .capture: 事件偵聽，事件發生的時候會調用

7. v-on 能夠綁定多個方法嗎？

• 能夠, @click="one();two()" 分號隔開

8. vue中 key 值的做用？

• 當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。key的做用主要是爲了高效的更新虛擬DOM。

9. 什麼是vue的計算屬性？

• computed裏面的數據是函數， 在computed中this指向實例化對象， 要有返回值
• computed裏面的數據是對象 對象裏面是get和set方法， 在data要有數據，這樣來set這個data， 在computed中this指向實例化對象， get方法要有返回值
• （下面是轉載的）
• 在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式。 好處： ①使得數據處理結構清晰； ②依賴於數據，數據更新，處理結果自動更新； ③計算屬性內部this指向vm實例； ④在template調用時，直接寫計算屬性名便可； ⑤經常使用的是getter方法，獲取數據，也可使用set方法改變數據； ⑥相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候computed從緩存中獲取，不會從新計算。

---

10. vue等單頁面應用及其優缺點

• （下面這句轉載的） -優勢：Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。 MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。 缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（若是要支持SEO，建議經過服務端來進行渲染組件）； 第一次加載首頁耗時相對長一些；不可使用瀏覽器的導航按鈕須要自行實現前進、後退。

11. 生命週期

c m u d beforeCreate（建立前） 在數據觀測和初始化事件還未開始 created（建立後） 完成數據觀測，屬性和方法的運算，初始化事件，el 替換，並掛載到實例上去以後調用。實例已完成如下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程當中進行ajax交互。 beforeUpdate（更新前） 在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前。能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。 updated（更新後） 在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。 beforeDestroy（銷燬前） 在實例銷燬以前調用。實例仍然徹底可用。 destroyed（銷燬後） 在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

12. 什麼是mvvm？

• （下面這段轉載的） MVVM 是 Model-View-ViewModel 的縮寫。 Model表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。 View 表明UI 組件，它負責將數據模型轉化成UI 展示出來。 ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，鏈接Model和View。 在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。 ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

13. 描述vuex

vuex用於組件之間共享數據 以store做爲容器 state：用來存儲共享數據， 數據池 getters：用來獲取處理事後的數據，具備緩存的做用 mutations： 同步提交狀態的更改 actions:異步提交狀態的更改 module：當狀態管理多了， 使用module來劃分多個模塊

14. 路由傳值

props：true的使用 $route的使用

15. vue經常使用的交互工具

post方法要記得告知後端什麼類型格式的文件 vue-resource 0.7.1版本比較好 http.post .ajax({});

16. $watch

• 監聽對象中的data裏面的數據的變化
• var vue = new Vue ( { el:'#root', data:{ a:"", b:"" } }); 開啓監控：， 返回值是中止監控的函數 var watchA = vue.$watch('a', function(newValue, oldValue){ vue.c = vue.a // 這樣a改變就會執行函數 }); 中止監控： watchA();

17. 過濾器

• 1.x 提供自帶的過濾器 ：

capitalize, uppercase, debounce '100', currency, pluralize 'dog' ,

limitBy v-for="i in arr | limitBy 2" 截取前兩個， limitBy 截取長度， 截取起點,

filterBy v-for="i in arr | filterBy 'male' in 'sex'" 過濾i中的sex是male的,

orderBy 排序

自定義過濾器的方法 :

單向過濾器：Vue.filter('過濾器的名字', 參數){return 返回值};

雙向過濾器： Vue.filter('過濾器名字', {read(inputValue){}, write(newValue, oldValue, params){}})

• 2.x 只提供過濾器的方法 ： 行間要使用括號傳參數

18. 實例化對象的方法

不能裏面外面都定義 data 也就是data , 能夠賦值取值 log 返回data 只能查看，不能賦值和取值 $destroy 銷燬實例化對象

---

19. cloak 防止用戶看到爲渲染的數據{{}}

css中 [v-cloak]{display:none}

---

20. 自定義指令

注意使用的時候：指令名字比能有大寫字母！！！ 能夠實現的功能： 拖拽， 隨機背景顏色，圖片放大， 計數 Vue，directive('指令名', function(){

}); 雙向綁定自定義指令： Vue.directive('inputColor', { bind(){ 這裏寫初始化 }, update(參數){ 這裏寫更新後的數據 } })

---

21. 自定義標籤

Vue.elementDirective('lyz', { bind(){ 初始化 }, update(param){ 更新組件 } })

---

22. vue 的route的mode

hash：hash 雖然出如今 URL 中，但不會被包括在 HTTP 請求中，對後端徹底沒有影響，所以改變 hash 不會從新加載頁面。 history：利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法， 後端要作地址重定向的處理。 history.go(-2);//後退兩次 history.go(2);//前進兩次 history.back(); //後退 hsitory.forward(); //前進

---

23. 實例化對象傳遞

var bus = new Vue(); Vue.emit('數據名', (接收到的數據)=>{ this.本身的變量名 = 接收到的數據 })

---

24. 動畫的生命週期

• 生命週期事件6種
• css樣式4種（加上顯示時候的狀態一共5種）
• 行間css指令兩種（推薦）

---

25. 全局組件

組件輸出 -> 打包（給包組件命名，做爲標籤名使用） -> 輸出打包後的模塊 -> Vue.use(模塊名) -> <全局組件名字 />

打包組件的js文件

import cp1 from './cp1.vue'
import cp1 from './cp1.vue'
let package = {
    install(vue){
        vue.component('cp1', cp1)
        vue.component('cp2', cp2)
    }
}
export default package;
複製代碼

main.js

import package from "globalCp"
Vue.use(package)
複製代碼

其餘vue文件直接使用便可

<cp1></cp1>
複製代碼

26.跨域

設置vue.config.js， 裏面設置devServer的proxy， 這個是webpack的代理服務器的方式。