Vue入门指南（2）

数据绑定

1.插入值

文本
数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双花括号）：

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

<script src="vue.js"></script>
<script>
  new Vue({
    el: "div",
    data: {
      msg: "大家好，我是奔哥！"
    }
  })
</script>

TIM图片20180124154637.png

Mustache 标签会被相应数据对象的 msg属性的值替换。每当这个属性变化时它也会更新。
当然，我们也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

<span>This will never change: {{* msg }}</span>

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

<span>This is raw HTML : {{{ raw_html }}}</span>

<script src="vue.js"></script>
<script>
new Vue({
  el: "span",
  data: {
    raw_html: "alert（123）"
  }
})
</script>

TIM图片20180124155251.png
内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。
HTML特性
Mustache 标签也可以用在 HTML 特性 (Attributes) 内：

<div id="item-{{ id }}">我的id是：item-{{ id }}</div>

<script src="vue.js"></script>
<script>
  new Vue({
    el: "div",
    data: {
      id: 1
    }
  })
</script>

TIM图片20180124155613.png

在 Vue.js 指令和特殊特性内不能用插值。不必担心，如果 Mustache 标签用错了地方 Vue.js 会给出警告。

2. 绑定表达式

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

<div id="example1">{{ 5 + 5 }}</div>
<div id="example2">{{ number + 1 }}</div>
<div id="example3">{{ ok ? "Yes" : "No" }}</div>
<div id="example4">{{ str.split("").reverse().join("") }}</div>

<script src="vue.js"></script>
<script>
new Vue ({ 
  el: "#example1" 
})
new Vue ({
  el: "#example2",
  data: {
    number: 3
  }
})
new Vue ({
  el: "#example3",
  data: {
    ok: true
  }
})
new Vue ({
  el: "#example4",
  data: {
    str: "abcde"
  }
})  
</script>

TIM图片20180124161227.png
过滤器
过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个结果的简单函数。Vue.js 允许在表达式后添加可选的过滤器 (Filter) 。过滤器通常会使用管道标志 “ | ”，注意，管道语法不是 JavaScript 语法，因此不能在表达式内使用过滤器，只能添加到表达式的后面。

<div>{{ message | capitalize }}</div>

<script src="vue.js"></script>
<script>
  new Vue({
    el: "div",
      data: {
        message: "hello world!"
    }
  })
</script>

TIM图片20180124161635.png

在上述的例子中，我们在插值时用了Vue的capitalize过滤器，capitalize过滤器可以将输入的字符串首字母转换成大写字母。
过滤器还可以串联：

<div>{{ message | filterA | filterB }}</div>

过滤器也可以接受参数：

<div>{{ message | filterA 'arg1' arg2 }}</div>

3. 指令

指令 (Directives) 是特殊的带有前缀 v- 的特性

<style>
.style {
  color: red;
  font-size: 50px;
}
</style>

<div>
  <div class="style" v-if="display">Hello!我是惠皎</div>
</div>

<script src="vue.js"></script>
<script>
  new Vue ({
    el: "div",
    data: {
        display: true
    }
  })
</script>

TIM图片20180124175448.png

当然，如果我们把display的值改为false，那浏览器就什么都没有。
有些指令可以在其名称后面带一个“参数”，中间放一个冒号隔开。

<style>
  .style{
      color: red;
      font-size:50px;
   }
</style>

<div>
  <div id="demo" v-bind:class="{'style' : bol}">{{ innerText }}</div>
</div>

<script src="vue.js"></script>
<script>
  new Vue ({
    el: "#demo",
    data: {
      innerText: "我最酷你服不服！",
      bol: true
    }
  })
</script>

TIM图片20180124184103.png

4. 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>