vue note 01

摘要：数据绑定方式普通的文本可以使用语法双大括号插在标签内部表达式每个绑定都只能包含单个表达式只会添加一次当再次修改时，不会触发机制插入文本较少使用插入不推荐使用计算属性基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。

数据绑定方式：

1.普通的文本 可以使用 “Mustache”语法 (双大括号) {{data}} 插在标签内部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时，不会触发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"

计算属性

基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。

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]
    }
  }
}
// ...

现在再运行 vm.fullName = "John Doe" 时，setter 会被调用，vm.firstName 和 vm.lastName 也相应地会被更新。

Class 与 Style 绑定。

对象语法：

data{
    isActive:true,
    hasError:false
}

some message

数组语法：

//数组执行分支判断
 some message 
//or
//数组语法中使用对象语法
 some message 

条件渲染 v-if & v-show
不能2个一起用在同一个标签
最多是 在v-if 条件里面加一个
如

 some message 

列表渲染 v-for

items是源数据 item 是数组元素迭代别名

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

{{ item[key] }}

(item, index)中的 index 是索引

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

v-for on a