vue数据绑定

插值
　　数据绑定最基础的形式是文本插值，使用 {{}} 语法（双大括号）：

<span>Message: {{ msg }}</span>

　　{{ msg }} 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

　　也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

<span>This will never change: {{* msg }}</span>
如下JavaScript代码:

var data={msg:'Hello Vue.js!'};
new Vue({
  el: '#demo',
  data: data
 })
data.msg="Hello World!";

原始的HTML
　　双大括号标签将数据解析为纯文本而不是HTML。为了输出真的HTML字符串，需要用三大括号标签：

<div>{{{ msg }}}</div>
　　如下javascript代码：

var data={msg:'<p>Hello Vue.js!</p>'};
new Vue({
    el: '#demo',
    data: data
   })

HTML特性
　　双大括号标签也可以用在 HTML 特性 (Attributes) 内：

<div id="{{ id }}"></div>
javascript代码如下：

var data={id:'demo'};
new Vue({
  el: 'div',
  data: data
 })

JavaScript表达式
　　Vue.js 在数据绑定内支持全功能的JavaScript表达式：

{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(”).reverse().join(”) }}

过滤器

<div id='demo'>
<span>{{msg | lowercase | capitalize}}</span>

指令
　　Vue.js指令 (Directives) 是特殊的带有前缀 v- 的特性。本质是模板中出现的特殊标记，让处理模板的库知道需要对这里的DOM元素进行一些对应的处理。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

<p v-if="msg">Hello!</p>

　　这里 v-if 指令将根据表达式 msg 值的真假删除/插入 < p > 元素。

　　在Vue.js中为我们提供了一些指令：v-text，v-html，v-model，v-on，v-else等等，同学们可以去查看Vue.js的指令api(cn.vuejs.org/api/#指令)。

计算属性
　　在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

　　在 Vue.js 中，你可以通过 computed 选项定义计算属性：

<div id="example">
  a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一个计算属性的 getter
    b: function () {
      // `this` 指向 vm 实例
      return this.a + 1
    }
  }
})

运行结果为：a=1,b=2