Vue 概覽

構(gòu)造器

每個 Vue 程序的開始都是由構(gòu)造函數(shù) Vue 創(chuàng)建實例:

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

選項包含數(shù)據(jù)进泼、模板眠砾、掛載元素、方法阅虫、生命周期鉤子等演闭,在 API 文檔查看

可以使用 extend 拓展構(gòu)造函數(shù) Vue

var MyComponent = Vue.extend({ 
  // 擴展選項
})
// 所有的 `MyComponent` 實例都將以預(yù)定義的擴展選項被創(chuàng)建
var myComponentInstance = new MyComponent()

所有的 Vue.js 組件其實都是被擴展的 Vue 實例颓帝。

屬性與方法

每個 Vue 實例都會代理 data 屬性方法:

var data = { a: 1 }

var vm = new Vue({ data: data})

vm.a === data.a // -> true

// 設(shè)置屬性也會影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2

// ... 反之亦然

data.a = 3
vm.a // -> 3

只有被代理了的屬性才是響應(yīng)式的米碰,可以觸發(fā)視圖更新。實例后添加的屬性則不會觸發(fā)购城。

除了 data 屬性吕座,Vue 實例還暴露了一些實例屬性和方法,通過 $ 前綴與 data 屬性區(qū)分瘪板。

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) {
  // 這個回調(diào)將在 `vm.a`  改變后調(diào)用
})

API 文檔 查看全部屬性與方法吴趴。

實例生命周期

生命周期方法內(nèi)的 this 指向 Vue 實例自身。

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

生命周期圖示侮攀,進一步學(xué)習(xí)時可以深入理解锣枝。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市兰英,隨后出現(xiàn)的幾起案子撇叁,更是在濱河造成了極大的恐慌,老刑警劉巖畦贸,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件陨闹,死亡現(xiàn)場離奇詭異,居然都是意外死亡薄坏,警方通過查閱死者的電腦和手機趋厉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來胶坠,“玉大人君账,你說我怎么就攤上這事『” “怎么了杈绸?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵帖蔓,是天一觀的道長。 經(jīng)常有香客問我瞳脓,道長塑娇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任劫侧,我火速辦了婚禮埋酬,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘烧栋。我一直安慰自己写妥,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布审姓。 她就那樣靜靜地躺著珍特,像睡著了一般。 火紅的嫁衣襯著肌膚如雪魔吐。 梳的紋絲不亂的頭發(fā)上扎筒,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音酬姆,去河邊找鬼嗜桌。 笑死,一個胖子當(dāng)著我的面吹牛辞色,可吹牛的內(nèi)容都是我干的骨宠。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼相满,長吁一口氣:“原來是場噩夢啊……” “哼层亿!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起立美,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤棕所,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后悯辙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡迎吵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年躲撰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片击费。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡拢蛋,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蔫巩,到底是詐尸還是另有隱情谆棱,我是刑警寧澤快压,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站垃瞧,受9級特大地震影響蔫劣,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜个从,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一脉幢、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嗦锐,春花似錦嫌松、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至碳默,卻和暖如春贾陷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背腻窒。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工昵宇, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人儿子。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓瓦哎,卻偏偏與公主長得像,于是被迫代替她去往敵國和親柔逼。 傳聞我的和親對象是個殘疾皇子蒋譬,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)愉适,斷路器犯助,智...
    卡卡羅2017閱讀 134,716評論 18 139
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本,Vue即被注冊為全局變量维咸,可以在頁面使用了剂买。 如果希望搭建...
    Awey閱讀 11,039評論 4 129
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,221評論 0 6
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對于 Vue 1.0 印象不深的內(nèi)容癌蓖。關(guān)于...
    云之外閱讀 5,052評論 0 29
  • 東西的本質(zhì)就是時間的集合體瞬哼。我們把時間“出售”給企業(yè)或個人,以此來獲得報酬謀生租副,我們周圍的某些東西“實際上都是我們...
    出走De娜拉閱讀 874評論 0 2