Vue

MVC MVP MVVM MVW MV*

  1. MVC
    Model View Controller
    Model: 負責提供數(shù)據
    View: 負責數(shù)據展示與交互
    Controller: 負責接收到View中用戶交互的結果之后,經過特定的處理之后轉交給Model

  2. MVP
    Model View Presenter
    Model: 負責提供數(shù)據
    View: 負責數(shù)據展示與交互
    Presenter: 負責View和Model之間的數(shù)據傳輸 (橋梁) 這里的代碼都是自己實現(xiàn)的

  3. MVVM
    Model View Presenter
    Model: 負責提供數(shù)據
    View: 負責數(shù)據展示與交互
    View-Model: 負責View和Model之間的數(shù)據傳輸 (橋梁) 這里的代碼都是框架實現(xiàn)的脚草!

MVW: Model View Whatever
MV*

Vue的基本使用

  1. 安裝vue
    1.1 下載vue.js文件
    1.2 通過cdn引用
    1.3 npm直接安裝vue包

  2. 使用
    2.1 引入vue.js文件
    2.2 為vm對象創(chuàng)建視圖部分 html
    2.3 創(chuàng)建Vue實例 var vm = new Vue()
    2.4 在創(chuàng)建Vue實例的時候须眷,需要通過el將vm對象和視圖關聯(lián)起來
    2.5 可以在視圖中書寫指令 引用vm對象中的數(shù)據(data)

    注意: 在視圖中使用的數(shù)據劲绪,必須現(xiàn)在data中聲明好跨释,如果data中沒有雕旨,卻在視圖中引用悯姊,會報錯棉浸!

Vue的指令

  1. 插值表達式: {{數(shù)據名}}
  2. 雙向數(shù)據綁定的指令: v-model
  3. 屬性綁定的指令: v-bind:屬性名="表達式池颈、數(shù)據名" 簡寫 :屬性名="表達式、數(shù)據名"
  4. 事件綁定: v-on:事件類型="函數(shù)名蔓同、表達式" 如果是函數(shù)名饶辙,則去methods中找對應的函數(shù) 簡寫 @事件類型="函數(shù)名、表達式"
  5. v-text v-html: 可以給元素設置內容斑粱,v-text會修改innerText v-html就相當于是innerHTML弃揽, v-text不支持渲染html代碼,而v-html支持
  6. v-cloak: 這個可以和css樣式配合则北,解決閃爍問題
  7. v-for: 可以用來遍歷數(shù)組矿微、對象、字符串尚揣、數(shù)字涌矢,生成對應的元素
        <div v-for="item in items">
        <div v-for="(item, index) in items">
        <div v-for="(item, key,index) in items">
        <div v-for="item in 10">
    
  8. v-if v-show 都可以用來控制元素的顯示和隱藏,但是原理不一樣快骗, v-show只是簡單的通過css樣式display來控制顯示和隱藏娜庇,而v-if會直接控制元素存在與否,如果條件是false方篮,v-show會加上display:none名秀, 而v-if會直接將元素從頁面中移除, v-if在頻繁的切換下會比較耗性能

事件修飾符

@click.修飾符.修飾符="表達式"

.stop 阻止冒泡
.prevent 阻止默認行為
.self 只有自己能觸發(fā)
.once 只觸發(fā)一次
.capture 在捕獲階段觸發(fā)

品牌管理案例

隔行變色案例

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末藕溅,一起剝皮案震驚了整個濱河市匕得,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌巾表,老刑警劉巖汁掠,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異集币,居然都是意外死亡考阱,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門鞠苟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來羔砾,“玉大人,你說我怎么就攤上這事偶妖。” “怎么了政溃?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵趾访,是天一觀的道長。 經常有香客問我董虱,道長扼鞋,這世上最難降的妖魔是什么申鱼? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮云头,結果婚禮上捐友,老公的妹妹穿的比我還像新娘。我一直安慰自己溃槐,他們只是感情好匣砖,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著昏滴,像睡著了一般猴鲫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上谣殊,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天拂共,我揣著相機與錄音,去河邊找鬼姻几。 笑死宜狐,一個胖子當著我的面吹牛,可吹牛的內容都是我干的蛇捌。 我是一名探鬼主播抚恒,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼豁陆!你這毒婦竟也來了柑爸?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤盒音,失蹤者是張志新(化名)和其女友劉穎表鳍,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體祥诽,經...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡譬圣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了雄坪。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片厘熟。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖维哈,靈堂內的尸體忽然破棺而出绳姨,到底是詐尸還是另有隱情,我是刑警寧澤阔挠,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布飘庄,位于F島的核電站,受9級特大地震影響购撼,放射性物質發(fā)生泄漏跪削。R本人自食惡果不足惜谴仙,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望碾盐。 院中可真熱鬧晃跺,春花似錦、人聲如沸毫玖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽孕豹。三九已至涩盾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間励背,已是汗流浹背春霍。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留叶眉,地道東北人址儒。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像衅疙,于是被迫代替她去往敵國和親莲趣。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內容

  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本饱溢,Vue即被注冊為全局變量喧伞,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,027評論 4 129
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,214評論 0 6
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容绩郎,還有我對于 Vue 1.0 印象不深的內容潘鲫。關于...
    云之外閱讀 5,050評論 0 29
  • vue.js 從基礎到實戰(zhàn) Vue.js 介紹 什么是vue vue一詞是法語,同英語中的view肋杖。vue.js是...
    記憶的時間差閱讀 2,219評論 1 25
  • 你手握方向盤溉仑,眉頭皺起一根絲。這條路怎么總這么堵~ 我不忍状植,故意坐在車里笑得開懷浊竟,大約是因為總是有像我們這樣的人過...
    bunttime閱讀 291評論 0 0