国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【Vue實例】

jerryloveemily / 1654人閱讀

摘要：的介紹就直接連接到官網了，官網介紹很詳細了介紹構造函數在使用之前我們首先需要構建實例以上代碼是通過構建了一個實例，構造函數中是一個對象，上面代碼我用了一個空的對象，對象中可以包含數據模板掛載元素方法生命周期鉤子等選項。

使用過一段時間的vue1.0,現在vue已經更新了很多版本了，語法在很多地方也有了變化。在此記錄一下重新學習的過程以及對vue的一些自己的理解。vue的介紹就直接連接到官網了，官網介紹很詳細了【Vue介紹】

1. 構造函數

在使用之前我們首先需要構建vue實例

var vm = new Vue({

    })

以上代碼是通過 new 構建了一個vue實例，構造函數中是一個對象，上面代碼我用了一個空的對象，對象中可以包含 數據、模板、掛載元素、方法、生命周期鉤子等選項。

【我們可以通過extend對vue構造器進行擴展】

var MyComponent = Vue.extend({
  // 擴展選項
})

// 所有的 `MyComponent` 實例都將以預定義的擴展選項被創建
var myComponentInstance = new MyComponent()

以上代碼中通過extend進行了vue構造函數的擴展，我們使用 MyComponent 生成的每一個實例都將擁有擴展中的屬性。

2. 屬性與方法

我們上面在創建實例的時候傳入的是一個空的對象，實際使用中這個對象中是有屬性的。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.name === data.name;  //true

data.name = "Crazy";
vm.name;    // Crazy

vm.name = "Pink";
data.name;  //Pink

上面代碼使用的是ES6的語法，應該能懂。上面代碼中Vue實例 【vm】在創建的過程中加入了一個data屬性，我們可以通過【vm】實例訪問到 name 屬性，說明vue實例會對data對象中的每一個屬性進行【代理】（也就是托管），所以我們不管是更改【對象data】還是更改【實例vm】屬性都會同步name屬性。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.$data;

我們可以通過上面一種方式訪問到整個實例的【data屬性】對象，還有一些暴露在實例中的屬性和方法，他們都是用$為前綴。這兒就不多說了參考手冊里有詳細的說明。【API參考手冊】

3. Vue實例的生命周期

每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如，實例需要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，然后在數據變化時更新 DOM 。在這個過程中，實例也會調用一些 【生命周期鉤子】（一些實例方法，用于生命周期中我們更愿意叫他們為鉤子函數） ，這就給我們提供了執行自定義邏輯的機會。例如，created 這個鉤子在實例被創建之后被調用：

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實例
    console.log("a is: " + this.a)
  }
})
// -> "a is: 1"

也有一些其它的鉤子，在實例生命周期的不同階段調用，如 mounted、updated、destroyed。鉤子的 this 指向調用它的 Vue 實例。一些用戶可能會問 Vue.js 是否有“控制器”的概念？答案是，沒有。組件的自定義邏輯可以分布在這些鉤子中。

4. Vue生命周期圖示

下面這張圖是官方給出的生命周期圖示，我只是把它翻譯成中文了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84617.html

相關文章

  • vue - 響應式原理梳理(一)

    摘要：問題為什么修改即可觸發更新和的關聯關系官方介紹的官網文檔，對響應式屬性的原理有一個介紹。因此本文在源碼層面，對響應式原理進行梳理，對關鍵步驟進行解析。 描述 ?我們通過一個簡單的 Vue應用 來演示 Vue的響應式屬性： html： {{message}} js: let vm = new Vue({ el: #ap...

    weknow619 評論0 收藏0

  • Vue2.5筆記：Vue的實例與生命周期

    摘要：總結這邊文章主要是介紹了下的實例與生命周期，在實例化的過程中我們可以添加許多可選對象，比如生命周期鉤子函數等，讓實例產生我們想要的行為。 理解與認識 Vue 的實例是我們學習 Vue 非常重要的一步，也是非常必須的，因為實例是它的一個起點，也是它的一個入口，只有我們創建一個 Vue 實例之后，我們才行利用它進行一些列的操作。 首先 Vue 沒有完全遵守 MVVM 的架構模式，但是它的設...

    Ashin 評論0 收藏0

  • vue入門筆記體系（一）vue實例

    摘要：就是實例中的對象當前組件接收到的對象。當前組件數的根實例如果當前實例沒有父實例，此實例將會是其自己當前實例的直接子組件。 vue實例 每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的： var vm = new Vue({ // 選項 }) 當創建一個 Vue 實例時，你可以傳入一個選項對象。作為參考，你也可以在 api/#選項-數據 文檔 中瀏覽完整的選...

    microelec 評論0 收藏0

  • Vue 實例中的生命周期鉤子詳解

    摘要：實例在文檔中經常會使用這個變量名表示實例，在實例化時，需要傳入一個選項對象，它可以包含數據模板掛載元素方法生命周期鉤子等選項。通俗說就是實例從創建到銷毀的過程，就是生命周期。 Vue 實例中的生命周期鉤子 Vue 框架的入口就是 Vue 實例，其實就是框架中的 view model ，它包含頁面中的業務處理邏輯、數據模型等，它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程...

    gityuan 評論0 收藏0

  • 你想知道的vue實例

    摘要：如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。在配置數據觀測編譯模板掛載實例到，然后在數據變化時更新的過程中，實例會調用一些生命周期鉤子。 vue的實例 vue構造器 每個Vue.js應用都是通過 構造函數Vue 創建一個 Vue的根實例 啟動的： 我們首先復習一下構造函數 function a(){ } // 當一個函數用來創建一個實例的時候，就叫做構造函數 // 我們...

    dendoink 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<