vue實例-vue官網(wǎng)學(xué)習(xí)筆記

1像樊、構(gòu)造器
①每個vue.js應(yīng)用都是通過構(gòu)造函數(shù)Vue創(chuàng)建一個Vue的根實例啟動的:

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

②在實例化Vue時眷唉,需要傳入一個選項對象予颤,它可以包含數(shù)據(jù)、模板掛載元素冬阳、方法蛤虐、生命周期鉤子等選項。

③可以擴展Vue構(gòu)造器肝陪,從而用預(yù)定義選項創(chuàng)建可復(fù)用的組件構(gòu)造器驳庭。而且所有的Vue.js組件其實都是被擴展的Vue實例。

var myComponent=Vue.extend({
    //擴展選項
});
var myComponentInstance = new MyComponent();

2氯窍、屬性和方法
①每個 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ā)視圖的重新渲染。如果在實例創(chuàng)建之后添加新的屬性到實例上狼讨,它不會觸發(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)用
});

3朽基、實例生命周期
①每個Vue實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如犬耻,實例需要配置數(shù)據(jù)觀測(data observer)踩晶、編譯模板(complie template)、掛載實例到DOM(mounted)枕磁、然后在數(shù)據(jù)變化時更DOM(update)渡蜻。在這個過程中,實例也會調(diào)用一些 生命周期鉤子计济,這就給我們提供了執(zhí)行自定義邏輯的機會茸苇。例如,created這個鉤子在實例被創(chuàng)建之后被調(diào)用:

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

②也有一些其它的鉤子沦寂,在實例生命周期的不同階段調(diào)用学密,如mounted/updated/destroyed等

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市传藏,隨后出現(xiàn)的幾起案子腻暮,更是在濱河造成了極大的恐慌,老刑警劉巖毯侦,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哭靖,死亡現(xiàn)場離奇詭異,居然都是意外死亡侈离,警方通過查閱死者的電腦和手機试幽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來卦碾,“玉大人铺坞,你說我怎么就攤上這事≈夼郑” “怎么了济榨?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長绿映。 經(jīng)常有香客問我擒滑,道長,這世上最難降的妖魔是什么绘梦? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任橘忱,我火速辦了婚禮,結(jié)果婚禮上卸奉,老公的妹妹穿的比我還像新娘钝诚。我一直安慰自己,他們只是感情好榄棵,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布凝颇。 她就那樣靜靜地躺著潘拱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪拧略。 梳的紋絲不亂的頭發(fā)上芦岂,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機與錄音垫蛆,去河邊找鬼禽最。 笑死,一個胖子當著我的面吹牛袱饭,可吹牛的內(nèi)容都是我干的川无。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼虑乖,長吁一口氣:“原來是場噩夢啊……” “哼懦趋!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起疹味,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤仅叫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后糙捺,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诫咱,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年继找,在試婚紗的時候發(fā)現(xiàn)自己被綠了遂跟。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片逃沿。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡婴渡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出凯亮,到底是詐尸還是另有隱情边臼,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布假消,位于F島的核電站柠并,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏富拗。R本人自食惡果不足惜臼予,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望啃沪。 院中可真熱鬧粘拾,春花似錦、人聲如沸创千。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至械哟,卻和暖如春疏之,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背暇咆。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工锋爪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人爸业。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓几缭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親沃呢。 傳聞我的和親對象是個殘疾皇子年栓,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

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