4.Vue實例

4.1.建立Vue實例

每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的：javascript

var vm = new Vue({ 
 
   
  // 選項
})

在構造函數中傳入一個對象，而且在對象中聲明各類Vue須要的數據和方法，包括：html

el
data
methods

等等vue

接下來咱們一一介紹。java

4.2.模板或元素

每一個Vue實例都須要關聯一段Html模板，Vue會基於此模板進行視圖渲染。jquery

咱們能夠經過el屬性來指定。web

例如一段html模板：app

<div id="app">
    
</div>

而後建立Vue實例，關聯這個divdom

var vm = new Vue({ 
 
   
	el:"#app"
})

這樣，Vue就能夠基於id爲app的div元素做爲模板進行渲染了。在這個div範圍之外的部分是沒法使用vue特性的。svg

4.3.數據

當Vue實例被建立時，它會嘗試獲取在data中定義的全部屬性，用於視圖的渲染，而且監視data中的屬性變化，當data發生改變，全部相關的視圖都將從新渲染，這就是「響應式「系統。函數

html：

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({ 
 
   
    el:"#app",
    data:{ 
 
   
        name:"劉德華"
    }
})

name的變化會影響到input的值
input中輸入的值，也會致使vm中的name發生改變

4.4.方法

Vue實例中除了能夠定義data屬性，也能夠定義方法，而且在Vue實例的做用範圍內使用。

html:

<div id="app">
    {
  
  
  
   
   
            
   

  {num}}
    <button v-on:click="add">加</button>
</div>

js:

var vm = new Vue({ 
 
   
    el:"#app",
    data:{ 
 
   
        num: 0
    },
    methods:{ 
 
   
        add:function(){ 
 
   
            // this表明的當前vue實例
            this.num++;
        }
    }
})

4.5.生命週期鉤子

4.5.1.生命週期

每一個 Vue 實例在被建立時都要通過一系列的初始化過程：建立實例，裝載模板，渲染模板等等。Vue爲生命週期中的每一個狀態都設置了鉤子函數（監聽函數）。每當Vue實例處於不一樣的生命週期時，對應的函數就會被觸發調用。

生命週期：

4.5.2.鉤子函數

beforeCreated：咱們在用Vue時都要進行實例化，所以，該函數就是在Vue實例化是調用，也能夠將他理解爲初始化函數比較方便一點，在Vue1.0時，這個函數的名字就是init。

created：在建立實例以後進行調用。

beforeMount：頁面加載完成，沒有渲染。如：此時頁面仍是{ {name}}

mounted：咱們能夠將他理解爲原生js中的window.οnlοad=function({.,.}),或許你們也在用jquery，因此也能夠理解爲jquery中的$(document).ready(function(){….})，他的功能就是：在dom文檔渲染完畢以後將要執行的函數，該函數在Vue1.0版本中名字爲compiled。此時頁面中的{ {name}}已被渲染成峯哥

beforeDestroy：該函數將在銷燬實例前進行調用。

destroyed：改函數將在銷燬實例時進行調用。

beforeUpdate：組件更新以前。

updated：組件更新以後。

例如：created表明在vue實例建立後；

咱們能夠在Vue中定義一個created函數，表明這個時期的鉤子函數：

// 建立vue實例
    var app = new Vue({ 
 
   
        el: "#app", // el即element，該vue實例要渲染的頁面元素
        data: { 
 
    // 渲染頁面須要的數據
            name: "峯哥",
            num: 5
        },
        methods: { 
 
   
            add: function(){ 
 
   
                this.num--;
            }
        },
        created: function () { 
 
   
            this.num = 100;
        }
    });

結果：

4.5.3.this

咱們能夠看下在vue內部的this變量是誰，咱們在created的時候，打印this

methods: { 
 
   
            add: function(){ 
 
   
                this.num--;
                console.log(this);
            }
        },

控制檯的輸出：

本文同步分享在博客「cwl_java」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

VUE-Vue實例