vue學習-1

vue+component+vue-router+vuex+axios
庫：相當於功能比較全的產品，想用時拿取產品中的一部分使用就可以。
框架：爲了解決一系列問題而產生的產品，使用時只能按照他的規定來用。

傳統的後端是MVC
=> view 瀏覽器頁面=> controller路由配置（控制器） =>model（模型）
前端的MVVM模式：
=> View （html頁面）<=> ViewModel（核心調度者，協調器） <=> Model(靜態的數據)

官網：https://cn.vuejs.org/v2/guide/
使用：npm install vue -D

使用cdn,也可以下載到本地放到項目中，使用時，引入即可

Mustache語法(js語句都不可以放到{{}}裏)

js表達式：
1.變量(data中聲明)
2.可以運算
3.三元運算符
4.不可以定義變量，賦值，定義函數
5.可以放函數的返回值
代碼：
index.html:

<script src="./vue.min.js"></script>
 <div id="app">
        <!-- {{msg>5?'a':'b'}} -->
        <!-- {{(function fn(){return 10})()}} -->
        <!-- {{[1,2].map(n=>n*2)}} -->
        <!-- {{obj}} -->
        <!-- {{ {name:1} }} 加上空格就可以顯示對象 -->
        <!-- {{b}} -->
        {{arr}}
</div>
<script>
    let vm = new Vue({ //vm是vue的實例
        el: '#app', //把vue實例掛載到dom元素id爲app上
        data: { //把數據放入到響應式系統中，數據發生改變，頁面視圖發生改變
            msg: 3,
            msg2: 4,
            obj: {
                name: 1
            },
            arr: [1, 2, 3],
            b: 0
        }
    })
    // vm.msg == data.msg 會把vue選項中所有的數據掛載到vm實例上
    // vm.b = 10; //b先要在data中聲明下
    // vm.obj.age=10; //不可以直接更改根級別的對象，這麼寫頁面中是沒有這個age屬性的
    // 可以使用如下方法給實例添加方法
    // vm.$set(vm.obj, 'age', 10); //==Vue.set()
    // 也可以使用Object.assign()合併對象
    // vm.obj = Object.assign({}, vm.obj, {
    //     age: 33,
    //     color: 'red'
    // })

    // 數組的限制：
    // 1.不可以直接通過索引更改數組
    // 2.不可以通過數組的長度更改數組,以下例子不生效，由於限制
    // vm.arr[1] = 5;
    // vm.arr[vm.arr.length - 1] = 8;
    // 若想更改數組，可以使用vm.$set() => vm.$set(vm.items,indexOfItem,newValue);
    // vm.$set(vm.arr, 0, 5);  => [5,2,3]
    //也可以使用變異的方法（更改原有的數據）：push,pop,shift,unshift,sort,reverser,splice
    // vm.arr.splice(0, 1, 5); //索引0開始，用5替換1，用最後的內容替換刪除的內容
    // ----也可以使用非變異方法，不會改變原有的數組，使用新數組替換舊數組就行filter(),concat(),slice()
Vue實例的方法：
    1.vm.$set/vm.$delete 更改/刪除對象或數組
    2.vm.$el  獲取掛載的DOM元素
    3.vm.$data 獲取響應式數據
    4.vm.$options 所有的配置項
    5.vm.$watch 監視數據的變化
    6.vm.$nextTick 獲取真實的DOM元素
    7.vm.$mount 設置Vue實例掛載的DOM元素

Vue指令

指令都是以v-xx，v-開頭，表示有特定的功能，用來操作DOM元素
v-text 默認渲染成文本
v-html 渲染成HTML（可以識別標籤）
v-once 只渲染一次，再更改時，直接從緩存中獲取
v-for 遍歷數組，字符串，對象，想遍歷誰，就在誰身上加v-for, key 增加唯一值，避免同一父元素下同一元素複用
v-if/v-else/v-else-if 操作DOM元素，控制DOM元素的顯示隱藏，一旦條件不成立，DOM元素不存在【可以使用在標籤上】
v-show 更改樣式，顯示/隱藏（滿足條件就顯示，不滿足就隱藏）【v-show 不支持 元素，也不支持 v-else。】

v-if和v-show對比：

v-if是真正的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-if是惰性的，如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。
v-show就簡單的多，不管初始條件是什麼，元素總是會被渲染，並且只是基於css的display進行切換。
結論：
v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。
所以，非常頻繁的切換，推薦使用v-show；若運行時條件很少改變，則推薦使用v-if。

v-if不要和v-for在同一個標籤使用，因爲v-for優先級高於v-if
v-on 簡寫@ 綁定事件
.stop 阻止冒泡
.prevent 阻止默認事件
.capture 採取捕獲的方式
.self 操作是自己時纔會觸發
.once 只觸發一次
.passive 處理事件函數中不會調用preventDefault函數，減少額外的監聽，提高了性能 不能和prevent同時使用
v-bind 簡寫: 綁定動態的屬性
v-model 雙向綁定
.lazy 延遲顯示，在失去焦點時觸發(調用的是change事件不再是input)
.number 若是字符串會轉化爲數值
.trim 自動過濾空格
注意：指令後面的值一般是一個變量，不是一個字符串

自定義指令：

使用：<input type="text" v-focus.color="c">
// 自定義全局指令 使用是直接v-focus
    Vue.directive('focus', {
        // 以下是他的鉤子函數
        // 指令初始化時調用：
        bind() {
            console.log('初始化')
        },
        // 當被綁定的元素插入到dom時
        inserted: function (el, bindings, vnode) {
            // el綁定的元素，bindings指令的參數，vnode虛擬的節點
            // console.log('插入dom元素')
            // console.log(bindings)
            if (bindings.modifiers.color) {
                // 將獲取到的值設置爲背景色
                el.style.backgroundColor = bindings.value;
            }
            Vue.nextTick(() => {
                el.focus() //有時候頁面沒有自動獲取焦點，可能是還沒有加載成功，爲了解決可以放到Vue.nextTick事件中
            })
        },
        update() {
            console.log('指令更新時觸發')
        },
        unbind() {
            console.log('指令和綁定的元素解綁時')
        }
    });
//這是局部的自定義指令，因在#App，所以只在這個實例中起作用
var vm = new Vue({
    el:'#app',
    data:{
        c:'red'
    },
    methods:{

    },

    directives: { 
        'focus': {
            // 指令初始化時調用：
            bind() {
                console.log('初始化')
            },
            // 當被綁定的元素插入到dom時
            inserted: function (el, bindings, vnode) {
                // el綁定的元素，bindings指令的參數，vnode虛擬的節點
                // console.log('插入dom元素')
                // console.log(bindings)
                if (bindings.modifiers.color) {
                    // 將獲取到的值設置爲背景色
                    el.style.backgroundColor = bindings.value;
                }
                Vue.nextTick(() => {
                    el.focus() //有時候頁面沒有自動獲取焦點，可能是還沒有加載成功，爲了解決可以放到Vue.nextTick事件中
                })
            },
            update() {
                console.log('指令更新時觸發')
            },
            unbind() {
                console.log('指令和綁定的元素解綁時')
            }
        }
    }
})

Vue響應式原理，參./Vue的響應式原理.js

watch與computed對比

若一個屬性依賴於其他屬性的變化，推薦優先使用computed。

1. watch 監視屬性，當屬性發生改變時觸發 必須在data中已經聲明 第一種寫成函數，第二種寫成對象 可以有異步操作
2. computed 計算屬性 不能在data中聲明過 每一個計算屬性都有get,set方法 不能異步操作 依賴屬性發生改變，則計算屬性才發生改變，若沒有改變，則直接從緩存中讀取之前的值，不會重新渲染，大大的提高性能

data: {
firstName: ‘Foo’,
lastName: ‘Bar’,
// fullName: ‘Foo Bar’ //使用computed計算屬性，不能在data中聲明過，用watch時需要
},
watch使用：

computed的使用:

animate 動畫

根據提供的六個類名：
有一個box，樣式爲：
.box {
width: 100px;
height: 100px;
background: red;
}

    .v-enter {
        background: gray;
    }

    .v-enter-active {
        background: greenyellow;
        transition: all 2s linear;
    }

    .v-enter-to {
        background: fuchsia;
    }
    /* 進入狀態結束會變成默認的背景色即紅色 */

    <!-- 這是離開的狀態： -->
    .v-leave {
        background: goldenrod;
    }

    .v-leave-active {
        background: hotpink;
        transition: all 2s linear;
    }

    .v-leave-to {
        background: indigo;
    }

    /* 離開狀態結束會消失 */

    <transition>
        <div class="box" v-if="isShow">box</div>
    </transition>
    若在html中改了名字，name="fate",上面的類名就是.fate-enter,.fate-enter-active,.fate-enter-to,.fate-leave,.fate-leave-active,.fate-leave-to

有個添加到購物車的頁面，demo，在./添加到購物車html

學習代碼在github中，學習代碼