MVVM的基本概念：
- M指的是數(shù)據(jù)（model），V是視圖，VM是視圖模型，將數(shù)據(jù)綁定視圖上（雙向綁定），viewModel 將數(shù)據(jù)模型 和視圖層連接起來(lái)，不會(huì)再去操作原生的DOM，只需要關(guān)心數(shù)據(jù)的流向
差值表達(dá)式：
使用大括號(hào)(Mustache 語(yǔ)法) “{{ }}”是最基本的文本插值方法，它會(huì)自動(dòng)將我們雙向綁定的實(shí)時(shí)數(shù)據(jù)顯示出來(lái)，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。
Vue常用系統(tǒng)指令
- v-text : 將一段文本渲染到指定的元素元素中
- v-html : 與差值表達(dá)式和 v-text不同，v-html會(huì)將數(shù)據(jù)渲染為html頁(yè)面
- v-bind : 可以給html元素或者組件動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，例如動(dòng)態(tài)綁定style和class.
可以用來(lái)綁定元素的屬性,(如：title, href , title , 自定義屬性，name, class等)，寫法： 可以省略v-bind, 直接寫為 : 屬性名 - 作用：可以給html元素或者組件動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，例如動(dòng)態(tài)綁定style和clas
- 舉例:
<div :class="[classA, classB]">classA, classB</div>
<div v-bind:class="{ red: isRed }">isred</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">數(shù)組對(duì)象</div>
<div v-bind:style="{ fontSize: size + 'px' }">size22</div>
<img v-bind="{src:imageSrc+'?v=1.0'}" >
<div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>
- v-for： 遍歷數(shù)組或?qū)ο螅?用法：
item in Array ...... {{ item }}
(item, index) in Array ....{{item}}
value in Object ..... {{value}}
(value, key, index) in Object ..............{{index}}.{{key}}.{{value}}
- v-model:
- 在表單控件或者組件上創(chuàng)建雙向綁定
- v-model僅能在如下元素中使用：
input
select
textarea
components（Vue中的組件）
- v-on: 綁定事件
- 作用：綁定事件監(jiān)聽(tīng)，表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語(yǔ)句，
如果沒(méi)有修飾符也可以省略，用在普通的html元素上時(shí)，只能監(jiān)聽(tīng) 原生 DOM 事件。
用在自定義元素組件上時(shí)，也可以監(jiān)聽(tīng)子組件觸發(fā)的自定義事件。
寫法：v-on:事件名 , 簡(jiǎn)寫寫法： @事件名 - 常用事件：
v-on:keydown v-on:keyup v-on:mousedown v-on:mouseover v-on:submit ....- 按鍵修飾符
觸發(fā)像keydown這樣的按鍵事件時(shí)，可以使用按鍵修飾符指定按下特殊的鍵后才觸發(fā)事件,可以給和按鍵相關(guān)的事件添加按鍵修飾符 常用的有 .enter
在監(jiān)聽(tīng)鍵盤事件時(shí)，我們經(jīng)常需要監(jiān)測(cè)常見(jiàn)的鍵值。 Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤事件時(shí)添加按鍵修飾符：
.tab .delete // (捕獲 “刪除” 和 “退格” 鍵) .esc .space .up .down .left .right - 作用：綁定事件監(jiān)聽(tīng)，表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語(yǔ)句，
- 通過(guò)執(zhí)行函數(shù)中添加event參數(shù)傳遞事件對(duì)象，注意只能是event,并且不能加引號(hào)
- 事件修飾符可以給事件添加特殊功能 .stop .prevent
控制元素的顯示和隱藏
- v-if ： v-if="布爾值" , 通過(guò)dom來(lái)控制元素顯示和隱藏,
作用：根據(jù)表達(dá)式的值的真假條件來(lái)決定是否渲染元素，如果條件為false不渲染（達(dá)到隱藏元素的目的），為true則渲染。在切換時(shí)元素及它的數(shù)據(jù)綁定被銷毀并重建.
<h1 v-if="isShow">Yes</h1>
// 也可以用 v-else 添加一個(gè) “else” 塊：
<h1 v-if="isShow">Yes</h1>
<h1 v-else>No</h1>
// v-else 元素必須緊跟在 v-if 元素否則它不能被識(shí)別。
- v-show ： v-show="布爾值",通過(guò)控制樣式display:none來(lái)控制元素顯示和隱藏
- v-if 和v-show 都能夠?qū)崿F(xiàn)對(duì)一個(gè)元素的隱藏和顯示操作,但是v-if是將這個(gè)元素添加或者移除到dom中.
v-show是在這個(gè)元素上添加 style="display:none"和移除它來(lái)控制元素的顯示和隱藏的 - v-cloak : 指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯后自動(dòng)移除，v-cloak和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
