初識vue

vue全家桶：vue-router  vuex vue-cli

mvc:model view controller

數據雙向綁定

mvvm:model view view-model

兩種設計理念來規劃網站：

優雅降級 (graceful degradation) : 一開始就構建站點的完整功能,而後針對瀏覽器測試和修復

漸進加強 (progressive enhancement) : 一開始只構建站點的最少特性,而後不斷的針對瀏覽器追加功能

兼容不了IE8，緣由：Object.defineProperty()

let obj = {};
let temp = {};
Object.defineProperty(obj,'name',{
    // value: '小仙女',//給對應屬性的 屬性值
    // writable:true, //該屬性是否能夠改寫，true表明能夠改寫 默認：false
    // enumberable:true, //該屬性是否能夠枚舉,true表明能夠枚舉 默認：false
    get(){
        // console.log(123);//當外界使用obj.name時就會觸發該函數
        return temp.name;
    },
    //上邊是簡寫ES6的方式   正常get:function get(){}
    set(val){
        //當外界給name設置值的時候纔會觸發
        // console.log(val);
        // obj.name = val;
        temp.name = val;
    }
})
//參數1：要操做的對象
//參數2：要操做對象的屬性名
//參數3：是個對象

vue 聲明式的框架

數據雙向綁定 數據驅動視圖 視圖驅動數據

綁定html模板的方法

• el:’#app’
• .$mount(‘#app’)
• 直接寫template屬性

let vm = new Vue({

// el: '#app',

// template: '<h1>珠峯培訓</h1>',

data: {

name: '珠峯',

}

}).$mount( '#app');

指令

在vue中指的是元素以v-開頭的 行內屬性 
指令後面跟的都是變量，這裏的變量是用引號包起來的

• v-text 至關於小鬍子語法 <h2 v-text="name"></h2>
• v-html 把變量對應的字符串渲染成DOM結構
• v-once 只渲染一次
• v-pre 提高編譯速度 性能優化時用的指令 操做沒有指令的html元素
• v-cloak 解決網速慢時顯示小鬍子的問題;須要配合css使用 
  視圖驅動數據
• v-model用input標籤和textarea標籤上

對象

對於vue中的數據來講，改變數據 觸發視圖更新 看該數據有沒有get和set

只有那些有get和set的屬性，而且這些屬性須要用到頁面上，才能觸發視圖更新

• 1.沒有get和set方法：更新視圖處理辦法：找一個無關變量，而且該無關變量在視圖中使用(能夠用display:none隱藏)，更新無關變量讓其從新渲染視圖
• 2.直接新建立一個對象，用整個建立的對象整個替代原對象(不建議)
• 3.把須要的屬性都直接寫在data中
• 4.使用vue自帶的方法：vm.$set(vm.obj,'c',12);;參數1：要添加屬性所屬的對象；參數2：要添加的屬性名；參數3：屬性值；這種方法會把value中全部的屬性 無論有多少層；都會加上get和set

let a = {a:12,b:13,c:14};

vm.obj = a;

方法1：只是爲了觸發視圖更新，不會給新增元素加上get和set;方法四能夠

頁面不會顯示undefined 頁面默認把undefined處理成空字符串

數組

• 數組中只有那些能引發數組變異的方法才能觸發視圖更新
• 直接經過數組的索引去修改，不會觸發視圖更新

vm.ary[ 0] = 10;//不會觸發視圖更新

vm.ary.splice( 0,1,10);//能夠觸發視圖更新

 

let a = vm.ary.slice();

a[ 0] = 10;

vm.ary = a;

更新視圖：

• 1.處理對象的四種方式在這均可以使用
• 5.數組自己還能夠有變異方法能夠用

v-for

• 循環這個數組
• 循環產生對應的標籤
• val是自定義的變量

<li v- for="val in ary">{{val}}</li>

<li v-for="(val,i) in ary">{{val}}{{`索引是：${i}`}}</li>

事件

<button v-on:click='fn'>點我</button> 
簡寫:<button @click='fn'>簡寫</button>

let vm = new Vue({

el: '#app',

data: {

// fn(){alert('小仙女');}

},

methods: {

fn(){

alert( 'v-on');

},

fn2(){

alert( '@');

}

}

})