Vue學習01

個人github地址https://github.com/zhangl-w/VueDemo/tree/master/VueDemo

1、基本代碼

1.導入Vue包，導包後瀏覽器內存中會產生一個Vue的構造函數

2.建立一個Vue實例

3.el 表示，當前咱們new的這個Vue實例，要控制頁面上的哪一個區域

4.date屬性中存放的是el中要用到的數據

5.傳遞內容插值表達式{{msg}}

 經過Vue提供的指令很方便的就能把數據渲染到頁面，程序員不在手動操做DOM元素

2、v-cloak指令

1.使用v-clock指令設置樣式能夠解決插值表達式閃爍的問題

2.默認v-text沒有閃爍問題
   v-text會覆蓋元素中本來的內容，可是插值表達式只會替換本身的這個佔位符不會把整個元素的內容清空

3.v-html會以html形式傳遞內容，會覆蓋元素中本來的內容

3、v-bind

v-bind: 是Vue中提供用於綁定屬性的指令
v-bind： 指令能夠被簡寫爲 :要綁定的屬性
v-bind 中能夠寫合法的JS表達式

4、Vue中提供了 v-on: 事件綁定機制 簡寫是@

5、事件修飾符

    使用.stop阻止冒泡

    使用 .prevent 阻止默認行爲

    使用 .capture 實現捕獲事件的機制

    使用 .self 實現只有點擊當前元素的時候纔會觸發事件處理函數

    使用 .once 只觸發一次事件處理函數

     .self和.stop 的區別：.self 只會阻止本身身上冒泡的觸發，並不會真正阻止冒泡的行爲

6、v-model

    v-bind 只能實現數據的單向綁定，從m自動綁定到v，沒法實現數據雙向綁定

    v-model 指令，能夠實現表單元素和 Model中數據的雙向綁定
    注意： v-model 只能運用在 表單元素中

7、Vue中樣式

    第一種使用方式，直接傳遞一個數組，注意：這裏的class須要使用v-bind作數據綁定

    第二種方式，在數組中使用三元表達式

    第三種方式，在數組中使用對象來代替三元表達式

    第四種方式，在爲class使用v-bind 綁定對象的時候，對象的屬性是類名屬性的值是一個標識符