vue常用重難點

1.跳轉頁面與參數

（1）路由攜帶參數跳轉

    //   this.$router.push({
    //     path: "/teacher/save",
    //     query: {
    //       id: id,
    //     }

（2）使用router-link跳轉

 <router-link :to="'/teacher/edit/' + scope.row.id">

取值：this.$route.params.id

注意：使用第二種時要在路由后面加上路徑后面加上‘’/:id‘

頁面加載異步調用寫法：

    export default {
        //異步調用,只調用一次
        //params:相當於this.$route.params.id = params.id
        asyncData({ params, error }) {
            return getTeacherList(1, 8).then(res => {
                return { data: res.data.data }
            })
        }
    };

2.vue組件間的通迅方式

2.1父組件——>子組件

方式：父組件給子組件綁定屬性，子組件通過props屬性來接收傳遞的數據

2.2子組件——>父組件

方式：在父組件中聲明一個接收數據的函數，父組件給子組件綁定事件，子組件通過$emit觸發事件，並且可在此時傳遞參數。 

2.3非父子組件間的通訊

方式：創建一個新的vue實例讓各個兄弟共用同一個事件機制，傳遞數據方通過事件觸發$emit接收數據方，在mounted()鈎子函數中觸發事件$on

3.vue的常見指令（易混淆的）

v-text：更新dom對象的textContext

v-html：更新dom對象的innerHTML

v-bind：當表達式的值改變時，將其產生的連帶影響，v-bind：可簡寫成：表單能夠拿到vue中的數據,表單中的數據也能夠傳到vue中

v-model：主要是用在表單元素中，它實現了雙向綁定。在同時使用v-bind和v-model中，v-model建立的雙向綁定對輸入型元素input, textarea, select等具有優先權，會強制實行雙向綁定。很多時候v-model使用在表單的<input>中實現雙向綁定。只能是表單拿到vue的數據,vue沒法拿到表單的數據

v-on：綁定事件，可簡寫為@

v-if：根據表達式的值的真假條件，銷毀或重建元素

v-show：根據表達式的真假值，切換元素的display，css屬性

v-for：persons是數據，person是當前的一條數據， index代表當前索引值。列表渲染也可以用 of 來代替 in 作為分隔符。
當遍歷對象屬性時候，有兩個可選參數，分別鍵名和索引值。key只能為number或string，且key的值必須是唯一的

<li v-for="（val, key,  index） in persons"> {{ person.index }} - {{ person.key }}: {{ person.val }} </li>

4.vue的生命周期

vue的生命周期一共分為八個階段

1、beforeCreate（創建前）

2、created（創建后）

3、beforeMount（載入前）

4、mounted（載入后）

5、beforeUpdate（更新前）

6、updated（更新后）

7、beforeDestroy（銷毀前）

8、destroyed（銷毀后）

vue第一次頁面加載會觸發哪幾個鈎子函數：

beforeCreate、created、beforeMount、mounted

5.vue全家桶

vue-router：關於路由方面的配置

vuex：數據共享和緩存用

vue-resource：用於后台交互（現在改為axios）

vue-cli：快速創建項目的腳手架