Vue核心:Vue擴展插件叮贩、雙大括號表達式击狮、強制數(shù)據(jù)綁定、綁定事件監(jiān)聽益老、計算屬性彪蓬、監(jiān)視屬性、計算屬性高級捺萌、class與style綁定档冬、條件渲染、列表渲染桃纯、事件處理酷誓、表單輸入綁定、vue聲明周期分...

1态坦、Vue 擴展插件:

*vue-cli: vue 腳手架

*vue-resource(axios): ajax 請求

*vue-router: 路由

*vuex: 狀態(tài)管理

*vue-lazyload: 圖片懶加載

*vue-scroller: 頁面滑動相關(guān)

*mint-ui: 基于 vue 的 UI 組件庫(移動端)

*element-ui: 基于 vue 的 UI 組件庫(PC 端)

*它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項目

2盐数、雙大括號表達式

*語法:{{exp}}

*功能: 向頁面輸出數(shù)據(jù)

*可以調(diào)用對象的方法

3、強制數(shù)據(jù)綁定:指定變化的屬性值

寫法:v-bind:xxx='yyy'?? //yyy 會作為表達式解析執(zhí)行

簡介寫法::xxx='yyy'

4伞梯、綁定事件監(jiān)聽:綁定指定之間名的回調(diào)函數(shù)

完整寫法:v-on:keyup='xxx'

v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx'

簡潔寫法:@keyup='xxx' @keyup.enter='xxx'

5玫氢、計算屬性:

*在 computed 屬性對象中定義計算屬性的方法

*在頁面中使用{{方法名}}來顯示計算的結(jié)果

6、監(jiān)視屬性:

*通過通過 vm 對象的$watch()或 watch 配置來監(jiān)視指定的屬性

*當屬性變化時, 回調(diào)函數(shù)自動調(diào)用, 在函數(shù)內(nèi)部進行計算

7谜诫、計算屬性高級

*通過 getter/setter 實現(xiàn)對屬性數(shù)據(jù)的顯示和監(jiān)視

*計算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計算

8漾峡、class 與 style 綁定:class/style 綁定是專門用來實現(xiàn)動態(tài)樣式效果的技術(shù)

class綁定:*:class='xxx'

*表達式是字符串: 'classA'

*表達式是對象: {classA:isA, classB: isB}

*表達式是數(shù)組: ['classA', 'classB']

style綁定::style="{ color: activeColor, fontSize: fontSize + 'px' }"(其中 activeColor/fontSize 是 data 屬性)

9、條件渲染:

指令:v-if 與 v-else及v-show

注意點:如果需要頻繁切換 v-show 較好

當條件不成立時, v-if 的所有子節(jié)點不會解析

10喻旷、列表渲染:

指令:數(shù)組: v-for / index 生逸; 對象: v-for / key

更新顯示:刪除 item ; 替換 item

高級處理:列表過濾 且预; 列表排序

11槽袄、事件處理:

綁定監(jiān)聽:*v-on:xxx="fun"

*@xxx="fun"

*@xxx="fun(參數(shù))"

*默認事件形參: event

*隱含屬性對象: $event

事件修飾符:*.prevent : 阻止事件的默認行為 event.preventDefault()

*.stop : 停止事件冒泡 event.stopPropagation()

按鍵修飾符:*.keycode : 操作的是某個 keycode 值的鍵

? ? *.keyName : 操作的某個按鍵名的鍵(少部分)

12、表單輸入綁定:

使用 v-model 對表單數(shù)據(jù)自動收集:text/textarea锋谐、checkbox遍尺、radio、select

13怀估、vue生命周期分析:

-+-初始化顯示:*beforeCreate()狮鸭、*created()、*beforeMount()多搀、*mounted()

-+-更新狀態(tài):this.xxx = value歧蕉、*beforeUpdate()、*updated()

-+-銷毀vue實例:vm.$destory()康铭、*beforeDestory()惯退、*destoryed()

14、常用的生命周期方法:

*created()/mounted(): 發(fā)送 ajax 請求, 啟動定時器等異步任務(wù)

*beforeDestory(): 做收尾工作, 如: 清除定時器

15从藤、常用內(nèi)置指令:

*v-text : 更新元素的 textContent

*v-html : 更新元素的 innerHTML

*v-if : 如果為 true, 當前標簽才會輸出到頁面

*v-else: 如果為 false, 當前標簽才會輸出到頁面

*v-show : 通過控制 display 樣式來控制顯示/隱藏

*v-for : 遍歷數(shù)組/對象

*v-on : 綁定事件監(jiān)聽, 一般簡寫為@

*v-bind : 強制綁定解析表達式, 可以省略 v-bind 簡寫為:

*v-model : 雙向數(shù)據(jù)綁定

*ref : 指定唯一標識, vue 對象通過$refs 屬性訪問這個元素對象

*v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }

16催跪、自定義指令:

*注冊全局指令:

Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()

})

// 注冊一個全局自定義指令 `v-focus`

Vue.directive('focus', {

? // 當被綁定的元素插入到 DOM 中時……

? inserted: function (el) {

? ? // 聚焦元素

? ? el.focus()

}

})

*注冊局部指令:

directives : {

'my-directive' : {

bind (el, binding) {

el.innerHTML = binding.value.toupperCase()

}

}

}

*使用指令:

v-my-directive='xxx'

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末锁蠕,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子懊蒸,更是在濱河造成了極大的恐慌荣倾,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件骑丸,死亡現(xiàn)場離奇詭異舌仍,居然都是意外死亡,警方通過查閱死者的電腦和手機通危,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門铸豁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人菊碟,你說我怎么就攤上這事节芥。” “怎么了逆害?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵头镊,是天一觀的道長。 經(jīng)常有香客問我忍燥,道長拧晕,這世上最難降的妖魔是什么隙姿? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任梅垄,我火速辦了婚禮,結(jié)果婚禮上输玷,老公的妹妹穿的比我還像新娘队丝。我一直安慰自己,他們只是感情好欲鹏,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布机久。 她就那樣靜靜地躺著,像睡著了一般赔嚎。 火紅的嫁衣襯著肌膚如雪膘盖。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天尤误,我揣著相機與錄音侠畔,去河邊找鬼。 笑死损晤,一個胖子當著我的面吹牛软棺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播尤勋,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼喘落,長吁一口氣:“原來是場噩夢啊……” “哼茵宪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起瘦棋,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤稀火,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后赌朋,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體憾股,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年箕慧,在試婚紗的時候發(fā)現(xiàn)自己被綠了服球。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡颠焦,死狀恐怖斩熊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情伐庭,我是刑警寧澤粉渠,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站圾另,受9級特大地震影響霸株,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜集乔,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一去件、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧扰路,春花似錦尤溜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至哩罪,卻和暖如春授霸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背际插。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工碘耳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人腹鹉。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓藏畅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子愉阎,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

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