Vue.js基础入门系列（二）数据绑定

Vue.js数据绑定

数据绑定是将数据和视图相关联，当数据发生变化时，可以自动更新试图

语法

1.1、插值

文本插值是最基本的形式，使用双大括号{{}};
双大括号的分隔符可以在vue.config文件仲修改。例如 <% %>
Mustache标签

--实时更新内容
   <span>Test: {{text}}</span>
--只渲染一次数据，后续数据变化不再关心
   <span>Test: {{*Test}}</span>
--数据包含html片段
   <span>Logo: {{{logo}}}</span>
   logo: '<span>DDFE</span>'
--双大括号标签可以放在html标签内
   <li data-id='{{id}}'></li>

1.2、表达式

表达式是各种数值、变量、运算符的综合体。简单的表达式可以是常量或者变量名称。

    <!--JS表达式-->
    {{ cents / 100 }} //在原值的基础上除以100
    {{ true ? 1 : 0 }} //值为真，则渲染出1，否则渲染为0
    {{ example.split(",") }}
    <!--过滤器-->
    {{example | filterA | filterB }}
    {{example | filter a b }} --a、b为传入参数

1.3、指令

指令是带有v-前缀的特殊特性，其值限定为绑定表达式。
指令的作用是当表达式的值发生变化时，将这个变化也反映到DOM上。

    <div v-if="show">DDFE</div>

有一些特殊指令的语法不同，在指令和表达式之间插入一个参数

    <a v-bind:href="url"></a>
    <div v-on:click="action"></div>