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

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

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

{{}}

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

//html:
{{msg}}

javascript表達式:每個綁定都只能包含單個表達式

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

2.v-once

{{msg}}

只會添加一次msg,當再次修改msg時，不會觸發(fā)update 機制

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"

計算屬性

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

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

計算屬性默認只有 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)在再運行 vm.fullName = "John Doe" 時，setter 會被調(diào)用，vm.firstName 和 vm.lastName 也相應(yīng)地會被更新。

Class 與 Style 綁定。

對象語法：

data{
    isActive:true,
    hasError:false
}

some message

數(shù)組語法：

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

條件渲染 v-if & v-show
不能2個一起用在同一個標簽
最多是 在v-if 條件里面加一個
如

 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