# vue.js 之對vue.js基礎理解

時間 2019-12-05

原文原文鏈接

vue.js 之對vue.js基礎理解

Vue構造器

1 . Vue.js是一個構造函數，編程中稱之爲構造器
2 . 每個new Vue() 都是一個Vue構造函數的實例，這個過程叫作實例化
3 . 構造函數須要將其實例化後纔會啓用 var vm = new Vue({ //...})
4 . Vue構造器要求實例化時須要傳入一個選項對象

<div class="app">
        {{msg}}
</div>

<script>
        //vue.js  組件其實都是被擴展的 vue實例。
        
          var vm=new Vue({           //vue 實例   
                el:".app",
                data:{
                    msg:"hello vue.js"
                }
            });
        //  響應式    
        //vm(構造器) 是 Vue  的實例
        //vue 是 vm  的構造器  ( 構造函數)
    </script>

如：{{msg}}

1）{{msg}}會在視圖中顯示html

2）{{msg}}在實例化後仍然保持數據響應vue

3）{{msg}}儘管在console.log(data)中存在，但視圖卻找不到，且會報錯編程

4）所以請不要試圖在實例化後添加任何屬性api

實例屬性方法以及生命週期

1 . data會代理其對象裏的全部屬性.
2 . 只有data裏的屬性是響應式的，即通訊是雙向的.
3 . Vue被實例化後，再建立的屬性，將不會觸發視圖更新.
4 . 在文檔中常常會使用 vm 這個變量名錶示 Vue 實例，在實例化 Vue時，須要傳入一個選項對象，它能夠包含數據(data)、模板(template)、掛載元素(el)、方法(methods)、生命週期鉤子(lifecyclehook)等選項。

1 . 每一個Vue實例都會代理其data對象裏全部的屬性：

2 . Vue實例暴露了一些有用的實例屬性與方法

var data = { a : 1 }
var vm = new Vue({
      data : data
})
    vm.a === data.a // -> true
    // 設置屬性也會影響到原始數據
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3

1 . 爲與代理屬性區分，方前添加了前綴$

2 . app.$data===data //->true

app.$el===document.getElementById("app") //->true

var data = { a : 1 }
var vm = new Vue({
      el : '#example' ,
      data : data
    })
    vm.$data === data // -> true
    vm.$el === document .getElementById( 'example' ) // -> true
    // $watch 是一個實例方法
    vm.$watch( 'a' , function ( newVal, oldVal ) {
      // 這個回調將在`vm.a` 改變後調用
})

實例生命週期

Vue 實例有一個完整的生命週期，也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。通俗說就是 Vue 實例從建立到銷燬的過程，就是生命週期。

在Vue的整個生命週期中，它提供了一些生命週期鉤子，給了咱們執行自定義邏輯的機會。

created（建立後）mounted（載入後）updated（更新後）d（銷燬後） estroyed（銷燬後）

模板語法插值

Vue.js 使用了基於 HTML 的模版語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 可以智能地計算出從新渲染組件的最小代價並應用到 DOM 操做上。

插值

文本

{{}}數據綁定最多見的就是Mustache（雙括號）的文本插值，使用v-once指令，能夠執行一次插值，後面若是有改變，將不會更新。

<p v-once>{{message}}</p>

HTML

還能夠插入HTML使用指令v-html

Mustache{{}} 不能在 HTML 屬性中使用，應使用 v-bind 指令

<div id="app-2">
        <p v-once>這裏的數據只會執行一次更新：{{me    ssage}}</p>
        <div v-html="rawHtml">自定義html</div>
    </div>

var app2 = new Vue({
    el:'#app-2',
    data:{
        message:'第一次更新',
        rawHtml:'<ol><li>這裏是自定義html</li><li>這裏是自定義html</li></ol>'
    }
})
app2.message = '第二次更新沒有賦值';

指令

v-if、v-on、v-bind

指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單一 JavaScript 表達式（除了 v-for，以後再討論）。指令的職責就是當其表達式的值改變時相應地將某些行爲應用到 DOM 上。

過濾器

是經過後面的函數對前面這個值作一個變化，得出須要的內容

Vue.js 容許你自定義過濾器，被用做一些常見的文本格式化。過濾器應該被添加在 mustache 插值的尾部，由「管道符」指示：

過濾器能夠串聯並且還能夠接收參數

{{ message | capitalize }}緩存

new Vue({
 // 將message的值首字母變爲大寫，其它不變
 filters: {
 capitalize: function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
 }
})

縮寫

v-bind 縮寫

Vue.js 爲兩個最爲經常使用的指令提供了特別的縮寫：

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

計算屬性

模板內的表達式是很是便利的，可是它們實際上只用於簡單的運算。在模板中放入太多的邏輯會讓模板太重且難以維護。例如：

計算屬性 vs watched

當你有一些數據須要隨着其它數據變更而變更時能夠用 vs method計算屬性也能夠用 vswatched ；

<div id="app">
        {{fullName}}
        <input v-model="firstName"/>
        <input v-model="lastName"/>
</div>

<script>
        var vm = new Vue({
            el:'#app',
            data:{
                firstName:"chao",
                lastName:"qiu",
                fullName:"qiuchao"
            },
            computed:{
                fullName:{
                    get:function(){
                        return this.lastName+this.firstName;
                    }
                }
            },
            methods:{

            },
            filters:{
            },
            watch:{
                firstName:function(){
                    this.fullName=this.lastName+this.firstName;
                    //return this.lastName+this.firstName;
                },
                lastName:function(){
                   // return this.lastName+this.firstName;
                   this.fullName=this.lastName+this.firstName;
                },
            }
        });
    
</script>

與method對比

　　　　計算屬性基於本身的依賴進行緩存，只要message沒發生變化，屢次訪問該計算屬性就會當即返回以前的計算結果，而沒必要再次執行函數；app

　　　　而method調用總會執行該函數。異步

與vs watched對比

　　　　都是用來處理某些數據隨其餘數據的變更而變更的，但儘可能不要濫用watch，若是代碼是命令式和重複的，先考慮下計算屬性computed，可以使代碼更簡潔。函數

觀察Wactchers

提供一個watch選項，當想要在數據變化響應時，執行異步操做或開銷較大的操做時使用。

雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的 watcher 。這是爲何 Vue 提供一個更通用的方法經過 watch 選項，來響應數據的變化。當你想要在數據變化響應時，執行異步操做或昂貴操做時，這是頗有用的。

<div id="app">
    {{msg}}
    <input v-model="msg"/>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:""
        },
        watch:{
            msg:function(newValue){
                localStorage.getItem("msg",newValue);
            }
        },
        mounted:function(){
            this.msg = localStorage.getItem("msg");
        }
    });
</script>