摘要：數(shù)據(jù)綁定方式普通的文本可以使用語法雙大括號(hào)插在標(biāo)簽內(nèi)部表達(dá)式每個(gè)綁定都只能包含單個(gè)表達(dá)式只會(huì)添加一次當(dāng)再次修改時(shí)，不會(huì)觸發(fā)機(jī)制插入文本較少使用插入不推薦使用計(jì)算屬性基于它們的依賴進(jìn)行緩存的，只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。

數(shù)據(jù)綁定方式：

1.普通的文本 可以使用 “Mustache”語法 (雙大括號(hào)) {{data}} 插在標(biāo)簽內(nèi)部eg:

{{}}

//js:
data{
   msg:"welcome to vuejs!",
   ok:true,
   number:0
}

//html:
{{msg}}

javascript表達(dá)式:每個(gè)綁定都只能包含單個(gè)表達(dá)式

{{ok?"Yes":"No"}}
{{ number + 1 }}
{{ msg.split("").reverse().join("") }}

2.v-once

{{msg}}

只會(huì)添加一次msg,當(dāng)再次修改msg時(shí)，不會(huì)觸發(fā)update 機(jī)制

3.v-text 插入文本(較少使用) v-html 插入html(不推薦使用)

    data{
       msg:"welcome to vuejs!",
       rawHtml:"
pppp
"
    }
    

    

4.v-bind <=> ： v-on<=> @

v-bind:id="mask"
      :id="mask"

v-on:click ="showDialog"
    @click ="showDialog"

計(jì)算屬性

基于它們的依賴進(jìn)行緩存的，只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。

computed: {
  now: function () {
    return Date.now()
  }
}

計(jì)算屬性默認(rèn)只有 getter ，也可以自定義setter屬性

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + " " + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(" ")
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

現(xiàn)在再運(yùn)行 vm.fullName = "John Doe" 時(shí)，setter 會(huì)被調(diào)用，vm.firstName 和 vm.lastName 也相應(yīng)地會(huì)被更新。

Class 與 Style 綁定。

對象語法：

data{
    isActive:true,
    hasError:false
}

some message

數(shù)組語法：

//數(shù)組執(zhí)行分支判斷
 some message 
//or
//數(shù)組語法中使用對象語法
 some message 

條件渲染 v-if & v-show
不能2個(gè)一起用在同一個(gè)標(biāo)簽
最多是 在v-if 條件里面加一個(gè)
如

 some message 

列表渲染 v-for

items是源數(shù)據(jù) item 是數(shù)組元素迭代別名

js:
data: {
    parentMessage: "Parent",
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
//html:

{{ item[key] }}

(item, index)中的 index 是索引

  {{ parentMessage }} - {{ index }} - {{ item.message }}

v-for on a