Vue-02

data屬性

通過data屬性指定自定義組件的初始數(shù)據(jù)奋姿,要求data必須是一個(gè)函數(shù)锄开,如果不是函數(shù)就會(huì)報(bào)錯(cuò)。

Props屬性

組件可以嵌套使用称诗,叫做父子組件萍悴。那么父組件經(jīng)常要給子組件傳遞數(shù)據(jù)這叫做父子組件通信。

父子組件的關(guān)系可以總結(jié)為?props 向下傳遞寓免,事件向上傳遞癣诱。

父組件通過?props?給子組件下發(fā)數(shù)據(jù),子組件通過事件給父組件發(fā)送消息再榄。

1狡刘、在父組件中定義數(shù)據(jù)

2、在使用組件時(shí)困鸥,綁定父組件中的數(shù)據(jù)

3嗅蔬、在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)

4、在template屬性中使用父組件中的參數(shù)

Props屬性

組件可以嵌套使用疾就,叫做父子組件澜术。那么父組件經(jīng)常要給子組件傳遞數(shù)據(jù)這叫做父子組件通信。

父子組件的關(guān)系可以總結(jié)為?props 向下傳遞猬腰,事件向上傳遞鸟废。

父組件通過?props?給子組件下發(fā)數(shù)據(jù),子組件通過事件給父組件發(fā)送消息姑荷。

1盒延、在父組件中定義數(shù)據(jù)

2、在使用組件時(shí)鼠冕,綁定父組件中的數(shù)據(jù)

3添寺、在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)

4、在template屬性中使用父組件中的參數(shù)

7懈费、props校驗(yàn)

子組件在接收父組件傳入數(shù)據(jù)時(shí), 可以進(jìn)行props校驗(yàn)计露,來確保數(shù)據(jù)的格式和是否必傳≡饕遥可以指定一下屬性:

1) type: 指定數(shù)據(jù)類型 String Number Object ...注意不能使用字符串?dāng)?shù)組票罐,只能是對(duì)象大寫形式

2) required: 指定是否必輸

3) default: 給默認(rèn)值或者自定義函數(shù)返回默認(rèn)值

4) validator: 自定義函數(shù)校驗(yàn)

非props屬性

? 引用子組件時(shí),非定義的props屬性,自動(dòng)合并到子組件上,class和style也會(huì)自動(dòng)合并泞边。

Props屬性

組件可以嵌套使用该押,叫做父子組件。那么父組件經(jīng)常要給子組件傳遞數(shù)據(jù)這叫做父子組件通信繁堡。

父子組件的關(guān)系可以總結(jié)為?props 向下傳遞沈善,事件向上傳遞乡数。

父組件通過?props?給子組件下發(fā)數(shù)據(jù)椭蹄,子組件通過事件給父組件發(fā)送消息闻牡。

1、在父組件中定義數(shù)據(jù)

2绳矩、在使用組件時(shí)罩润,綁定父組件中的數(shù)據(jù)

3、在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)

4翼馆、在template屬性中使用父組件中的參數(shù)

7割以、props校驗(yàn)

子組件在接收父組件傳入數(shù)據(jù)時(shí), 可以進(jìn)行props校驗(yàn),來確保數(shù)據(jù)的格式和是否必傳应媚⊙狭ぃ可以指定一下屬性:

1) type: 指定數(shù)據(jù)類型 String Number Object ...注意不能使用字符串?dāng)?shù)組,只能是對(duì)象大寫形式

2) required: 指定是否必輸

3) default: 給默認(rèn)值或者自定義函數(shù)返回默認(rèn)值

? 4) validator: 自定義函數(shù)校驗(yàn)

自定義事件

父組件給子組件傳值使用props屬性, 那么需要子組件更新父組件時(shí),要使用自定義事件$on和$emit:

?$on監(jiān)聽: 不能監(jiān)聽駝峰標(biāo)示的自定義事件, 使用全部小寫(abc)或者-(a-b-c)

?$emit主動(dòng)觸發(fā): $emit(事件名,傳入?yún)?shù))

主動(dòng)掛載

? 自定義事件不僅可以綁定在子組件中姜,也可以直接掛載到父組件消玄,使用$on綁定和$emit觸發(fā)。

具名插槽

具名插槽slot, 就是給插槽起個(gè)名字丢胚。

在子組件定時(shí)可以定定義多個(gè)插槽,同時(shí)通過name屬性指定一個(gè)名字,如:翩瓜,父組件引用時(shí)使用< slot='header'>進(jìn)行插槽選擇。

作用域插槽slot-scope携龟,

父組件通過插槽混入父組件的內(nèi)容, 子組件也可以通過slot作用域向插槽slot內(nèi)部傳入數(shù)據(jù)兔跌,使用方式:,

父組件通過<template slot-scope="props">進(jìn)行引用峡蟋。

動(dòng)態(tài)組件

? 使用<component>標(biāo)簽的is屬性,動(dòng)態(tài)綁定多個(gè)組件到一個(gè)掛載點(diǎn),通過改變is綁定值,切換組件坟桅。

動(dòng)態(tài)組件

使用標(biāo)簽的is屬性,動(dòng)態(tài)綁定多個(gè)組件到一個(gè)掛載點(diǎn),通過改變is綁定值,切換組件。

keep-alive

如果把切換出去的組件保留在內(nèi)存中蕊蝗,可以保留它的狀態(tài)或避免重新渲染仅乓。為此可以添加一個(gè)?keep-alive?指令。

refs

? 使用ref 給每個(gè)組件起一個(gè)固定的名字,方便后續(xù)直接引用操作匿又,在父組件中使用$refs訪問子組件方灾。

$watch第一個(gè)參數(shù)是需要監(jiān)聽的屬性,第二個(gè)是回調(diào)函數(shù)用法和watch一樣碌更。需要取消監(jiān)聽只需拿到監(jiān)聽對(duì)象的引用裕偿,這個(gè)引用是返回一個(gè)函數(shù)對(duì)象,執(zhí)行該對(duì)象就可以取消監(jiān)聽痛单。

同時(shí)監(jiān)聽多個(gè)屬性嘿棘,可以不指定屬性:

computed屬性

computed計(jì)算屬性用于定義比較復(fù)雜的屬性計(jì)算

computed和methods區(qū)別:

計(jì)算屬性使用computed定義, 方法使用methods定義

計(jì)算屬性使用時(shí)不加括號(hào)執(zhí)行符

計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。否則返回之前計(jì)算好的值,性能更高!

computed屬性

computed計(jì)算屬性用于定義比較復(fù)雜的屬性計(jì)算

computed和methods區(qū)別:

計(jì)算屬性使用computed定義, 方法使用methods定義

計(jì)算屬性使用時(shí)不加括號(hào)執(zhí)行符

計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值旭绒。否則返回之前計(jì)算好的值,性能更高!

自定義指令

全局指令

局部指令

使用directive定義鸟妙,第一個(gè)參數(shù)為指令名焦人,使用時(shí)加上v-前綴才能生效重父。

? inserted屬性指當(dāng)綁定元素插入到DOM時(shí)調(diào)用花椭。

鉤子函數(shù)的參數(shù)有三個(gè):

1)el:當(dāng)前指令綁定元素

2)binding:當(dāng)前指令綁定的所有信息對(duì)象,有以下屬性:

name:指令名房午,不包括?v-?前綴宾娜。

value:指令的綁定值前塔,例如:v-my-directive="1 + 1", value 的值是?2。

oldValue:指令綁定的前一個(gè)值顶燕,僅在?update?和?componentUpdated?鉤子中可用欧引。無論值是否改變都可用因痛。

expression:綁定值的字符串形式廓译。例如?v-my-directive="1 + 1"?瓜挽,expression 的值是?"1 + 1"。

arg:傳給指令的參數(shù)颠放。例如?v-my-directive:foo,arg 的值是?"foo"欲低。

modifiers:一個(gè)包含修飾符的對(duì)象。例如:v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是?{ foo: true, bar: true }。

3)vnode:Vue 編譯生成的虛擬節(jié)點(diǎn)

4)oldVnode:上一個(gè)虛擬節(jié)點(diǎn),僅在?update?和?componentUpdated

? 鉤子中可用辆毡。

過濾器

Vue允許自定義過濾器菜秦,可被用作一些常見的文本格式化。

過濾器可以用在兩個(gè)地方:mustache 插值和?v-bind?表達(dá)式?(后者從 2.1.0+ 開始支持)胚迫。

? 過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部喷户,由“管道”符指示:

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市访锻,隨后出現(xiàn)的幾起案子褪尝,更是在濱河造成了極大的恐慌闹获,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件河哑,死亡現(xiàn)場(chǎng)離奇詭異避诽,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)璃谨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門沙庐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人佳吞,你說我怎么就攤上這事拱雏。” “怎么了底扳?”我有些...
    開封第一講書人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵铸抑,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我衷模,道長(zhǎng)鹊汛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任阱冶,我火速辦了婚禮刁憋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘木蹬。我一直安慰自己至耻,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開白布届囚。 她就那樣靜靜地躺著有梆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪意系。 梳的紋絲不亂的頭發(fā)上泥耀,一...
    開封第一講書人閱讀 49,046評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音蛔添,去河邊找鬼痰催。 笑死,一個(gè)胖子當(dāng)著我的面吹牛迎瞧,可吹牛的內(nèi)容都是我干的夸溶。 我是一名探鬼主播,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼凶硅,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼缝裁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起足绅,我...
    開封第一講書人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤捷绑,失蹤者是張志新(化名)和其女友劉穎韩脑,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體粹污,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡段多,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了壮吩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片进苍。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖鸭叙,靈堂內(nèi)的尸體忽然破棺而出觉啊,到底是詐尸還是另有隱情,我是刑警寧澤递雀,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布柄延,位于F島的核電站,受9級(jí)特大地震影響缀程,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜市俊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一杨凑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧摆昧,春花似錦撩满、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至忌锯,卻和暖如春伪嫁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背偶垮。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工张咳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人似舵。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓脚猾,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親砚哗。 傳聞我的和親對(duì)象是個(gè)殘疾皇子龙助,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

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

  • vue概述 在官方文檔中,有一句話對(duì)Vue的定位說的很明確:Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語法來聲明...
    li4065閱讀 7,189評(píng)論 0 25
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容蛛芥,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容提鸟。關(guān)于...
    云之外閱讀 5,045評(píng)論 0 29
  • 組件(Component)是Vue.js最核心的功能脆淹,也是整個(gè)架構(gòu)設(shè)計(jì)最精彩的地方,當(dāng)然也是最難掌握的沽一。...
    六個(gè)周閱讀 5,582評(píng)論 0 32
  • 一盖溺、了解Vue.js 1.1.1 Vue.js是什么? 簡(jiǎn)單小巧铣缠、漸進(jìn)式烘嘱、功能強(qiáng)大的技術(shù)棧 1.1.2 為什么學(xué)習(xí)...
    蔡華鵬閱讀 3,313評(píng)論 0 3
  • VUE介紹 Vue的特點(diǎn)構(gòu)建用戶界面,只關(guān)注View層簡(jiǎn)單易學(xué)蝗蛙,簡(jiǎn)潔蝇庭、輕量、快速漸進(jìn)式框架 框架VS庫(kù)庫(kù)捡硅,是一封裝...
    多多醬_DuoDuo_閱讀 2,687評(píng)論 1 17