vue開發知識點總結

1、vue介紹

　　Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架，是一個輕量級MVVM（model-view-viewModel）框架。

2、數據綁定

• 最經常使用的方式：Mustache(插值語法)，也就是 {{}} 語法
• 解釋：{{}}從數據對象data中獲取數據
• 說明：數據對象的屬性值發生了改變，插值處的內容都會更新
• 說明：{{}}中只能出現JavaScript表達式 而不能解析js語句
• 注意：Mustache 語法不能做用在 HTML 元素的屬性上

 

　  雙向數據綁定：將DOM與Vue實例的data數據綁定到一塊兒，彼此之間相互影響

 

• 數據的改變會引發DOM的改變
• DOM的改變也會引發數據的變化

　　原理：Object.defineProperty中的get和set方法

• getter和setter：訪問器
• 做用：指定讀取或設置對象屬性值的時候，執行的操做

3、vue指令

　　v-text、v-html、v-if、v-show、v-for、v-bind（綁定標籤屬性）、v-on(綁定事件)、v-model（綁定表單）

• 在監聽鍵盤事件時，Vue 容許爲 v-on 在監聽鍵盤事件時添加關鍵修飾符，eg：@keyup.enter="add"

4、過濾器filters

　　1.全局過濾器

1 <div>{{ dateStr | date }}</div>
2 <div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
3 
4 <script>
5   Vue.filter('date', function(value, format) {
6     // value 要過濾的字符串內容，好比：dateStr
7     // format 過濾器的參數，好比：'YYYY-MM-DD hh:mm:ss'
8   })
9 </script>

　　2.局部過濾器

1 {
2   data: {},
3   // 經過 filters 屬性建立局部過濾器
4   // 注意：此處爲 filters
5   filters: {
6     filterName: function(value, format) {}
7   }
8 }

5、監聽數據變化watch

　　watch是一個對象，鍵是須要觀察的表達式，值是對應回調函數

 1 new Vue({
 2   data: { a: 1, b: { age: 10 } },
 3   watch: {
 4     a: function(val, oldVal) {
 5       // val 表示當前值
 6       // oldVal 表示舊值
 7       console.log('當前值爲：' + val, '舊值爲：' + oldVal)
 8     },
 9 
10     // 監聽對象屬性的變化
11     b: {
12       handler: function (val, oldVal) { /* ... */ },
13       // deep : true表示是否監聽對象內部屬性值的變化 
14       deep: true
15     },
16 
17     // 只監視user對象中age屬性的變化
18     'user.age': function (val, oldVal) {
19     },
20   }
21 })

6、計算屬性computed

 1 var vm = new Vue({
 2   el: '#app',
 3   data: {
 4     firstname: 'jack',
 5     lastname: 'rose'
 6   },
 7   computed: {
 8     fullname() {
 9       return this.firstname + '.' + this.lastname
10     }//注意不能和data裏面重名
11   }
12 })

7、vue生命週期

• 介紹：一個組件從開始到最後消亡所經歷的各類狀態，就是一個組件的生命週期
• 生命週期鉤子函數：從組件被建立，到組件掛載到頁面上運行，再到頁面關閉組件被卸載，這三個階段老是伴隨着組件各類各樣的事件，這些事件，統稱爲組件的生命週期函數！

　　beforeCreate()

• 說明：在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用
• 注意：此時，沒法獲取 data中的數據、methods中的方法

　　created()

• 注意：這是一個經常使用的生命週期，能夠調用methods中的方法、改變data中的數據
• 使用場景：發送請求獲取數據

　　beforeMounted()

• 說明：在掛載開始以前被調用

　　mounted()

• 說明：此時，vue實例已經掛載到頁面中，能夠獲取到el中的DOM元素，進行DOM操做

　　beforeUpdated()

• 說明：數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。

 　　updated()

• 說明：組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。

　　beforeDestroy()

• 說明：實例銷燬以前調用。在這一步，實例仍然徹底可用。
• 使用場景：實例銷燬以前，執行清理任務，好比：清除定時器等

　　destroyed()

• 說明：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

8、axios

• 以Promise爲基礎的HTTP客戶端，適用於：瀏覽器和node.js
• 封裝ajax，用來發送請求，異步獲取數據
• 安裝：npm i -S axios

　　一、建立axios文件

 1 import axios from "axios";
 2 import qs from "qs";
 3 import { Indicator, Toast } from "mint-ui";
 4 
 5 const Axios = axios.create({
 6   baseURL: "",//接口域名
 7   timeout: 5000,
 8   responseType: "json",
 9   // withCredentials: true, // 是否容許帶cookie這些
10   headers: {
11     "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
12   }
13 });
14 
15 Axios.interceptors.request.use( // POST傳參序列化(添加請求攔截器)
16   config => {
17     // 在發送請求以前作某件事
18     if (
19       config.method === "post" ||
20       config.method === "put" ||
21       config.method === "delete"
22     ) {
23       // 序列化
24       config.data = qs.stringify(config.data);
25     }
26 
27     // 如果有作鑑權token , 就給頭部帶上token
28     // if (localStorage.token) {
29     //   config.headers.Authorization = localStorage.token;
30     // }
31 
32     Indicator.open({
33       // text: '加載中...',
34       spinnerType: 'fading-circle'
35     });//mint-ui加載動畫
36 
37     return config;
38   },
39   error => {
40     console.log(error)
41     Toast({
42       message: error,
43       position: 'middle',
44       duration: -1
45     });
46     Indicator.close();
47     return Promise.reject(error);
48   }
49 );
50 
51 Axios.interceptors.response.use( // 響應攔截器
52   response => {
53     Indicator.close();
54     // if (res.status != 200) {
55     //   alert(res.statusText);
56     //   return Promise.reject(res);
57     // }
58     if (response.data == null && response.config.responseType === 'json' && response.request.responseText != null) {
59       try {
60         // eslint-disable-next-line no-param-reassign
61         response.data = JSON.parse(response.request.responseText);
62       } catch (e) {
63         // ignored
64       }
65     }
66     return response;
67   },
68   error => {
69     Indicator.close();
70     if (error.response) {
71       // 請求已發出，但服務器響應的狀態碼不在 2xx 範圍內
72  
73     } else {
74       //一些錯誤是在設置請求的時候觸發
75 
76       console.log('Error', error.message);
77     }
78 
79     Toast({
80       message: error.message,
81       position: 'middle',
82       duration: -1
83     });
84 
85     return Promise.reject(error);
86   }
87 );
88 
89 
90 export default {
91   install: function (Vue, Option) {
92     Object.defineProperty(Vue.prototype, "$axios", { value: Axios });
93   }
94 };

---
// 在組件中使用： methods: { getData() { this.$axios.get('url') .then(res => {}) .catch(err => {}) } }

 9、組件之間通信

　　父組件到子組件（經過props）

• 注意：屬性的值必須在組件中經過props屬性顯示指定，不然，不會生效
• 說明：傳遞過來的props屬性的用法與data屬性的用法相同

 1 <div id="app">
 2   <!-- 若是須要往子組件總傳遞父組件data中的數據 須要加v-bind="數據名稱" -->
 3   <hello v-bind:msg="info"></hello>
 4   <!-- 若是傳遞的是字面量 那麼直接寫-->
 5   <hello my-msg="abc"></hello>
 6 </div>
 7 
 8 <!-- js -->
 9 <script>
10   new Vue({
11     el: "#app",
12     data : {
13       info : 15
14     },
15     components: {
16       hello: {
17         // 建立props及其傳遞過來的屬性
18         props: ['msg', 'myMsg'],
19         template: '<h1>這是 hello 組件，這是消息：{{msg}} --- {{myMsg}}</h1>'
20       }
21     }
22   })
23 </script>

　　子組件到父組件

• 一、在父組件中定義方法 parentFn
• 二、在子組件 組件引入標籤 中綁定自定義事件 v-on:自定義事件名="父組件中的方法" ==> @pfn="parentFn"
• 三、子組件中經過$emit()觸發自定義事件事件 this.$emit(pfn,參數列表。。。)

 1 <hello @pfn="parentFn"></hello>
 2 
 3 <script>
 4   Vue.component('hello', {
 5     template: '<button @click="fn">按鈕</button>',
 6     methods: {
 7       // 子組件：經過$emit調用
 8       fn() {
 9         this.$emit('pfn', '這是子組件傳遞給父組件的數據')
10       }
11     }
12   })
13   new Vue({
14     methods: {
15       // 父組件：提供方法
16       parentFn(data) {
17         console.log('父組件：', data)
18       }
19     }
20   })
21 </script>

　　非父子組件通信

• 在簡單的場景下，可使用一個空的 Vue 實例做爲事件總線，建立eventBus.js文件

1 import Vue from 'Vue'
2 
3 export const Event = new Vue() // 註冊單一事件管理組件通訊

• 示例：組件A ---> 組件B

 1 <!-- 組件A： -->
 2 <com-a></com-a>
 3 <!-- 組件B： -->
 4 <com-b></com-b>
 5 
 6 <script>
 7   import  Event  from '../assets/js/eventBus'
 8   // 通訊組件
 9   var vm = new Vue({
10     el: '#app',
11     components: {
12       comB: {
13         template: '<p>組件A告訴我：{{msg}}</p>',
14         data() {
15           return {
16             msg: ''
17           }
18         },
19         created() {
20           // 給中間組件綁定自定義事件 注意:若是用到this 須要用箭頭函數
21           bus.$on('tellComB', (msg) => {
22             this.msg = msg
23           })
24         }
25       },
26       comA: {
27         template: '<button @click="emitFn">告訴B</button>',
28         methods: {
29           emitFn() {
30             // 觸發中間組件中的自定義事件
31             bus.$emit('tellComB', '土豆土豆我是南瓜')
32           }
33         }
34       }
35     }
36   })
37 </script>

10、內容分發

• 經過<slot></slot> 標籤指定內容展現區域

11、獲取組件（或元素） - refs

• 說明：vm.$refs 一個對象，持有已註冊過 ref 的全部子組件（或HTML元素）
• 使用：在 HTML元素 中，添加ref屬性，而後在JS中經過vm.$refs.屬性來獲取
• 注意：若是獲取的是一個子組件，那麼經過ref就能獲取到子組件中的data和methods

 1 <div id="app">
 2   <div ref="dv"></div>
 3   <my res="my"></my>
 4 </div>
 5 
 6 <!-- js -->
 7 <script>
 8   new Vue({
 9     el : "#app",
10     mounted() {
11       this.$refs.dv //獲取到元素
12       this.$refs.my //獲取到組件
13     },
14     components : {
15       my : {
16         template: `<a>sss</a>`
17       }
18     }
19   })
20 </script>