Vue 各类数据绑定

    <div class="panel-body" v-if="activeName === 'first'">
      <div class="form form-horizontal">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <div class="form-group">
            <label class="col-sm-3 control-label">
              标题 <em>*</em>：
            </label>
            <div class="col-sm-4">
              <el-form-item prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>
            </div>
          </div>

title: Vue 各类数据绑定
date: 2016-09-16 18:30
categories: Front-End
tags:
- Vue
- JavaScript
description: Demonstrate Using Data Binding Syntax；演示运用Vue数据绑定语法。

---

『天下武功，唯快不破』√，这一直是对武学造诣方面的追捧，虽然对于这个丝毫不会；更是对待现实工作不懈渴求，乃至苛求。因为这已不是遁隐修行，而是职场卖命，唯有先快速解决需求，方能攫取更为充盈的时间去深究技术机理，以使臻于更强，更强而优于快，如此优良循环得以形成。言归正传，作为前端ER，一度觉得，这 Vue 的诞生，好比一柄倚天利器，其易上手，写以及运行也都很高效，十分让人爱不释手；但这易上手，倒不等于容易精通，蛮多东西都需悉心学习、练习、理解，才能运用自如。

在使用Vue开发过程中，那基于Dom实现的模版，总是无可避免的要遇到，也是一个令人欣喜的存在。Vue.js 模板不仅都是可解析的有效的 HTML，且通过一些特殊的特性做了增强，这使得很多先行，需要借助jQuery等类库在逻辑中操纵的部分，已然可以在模版中进行，不得不说这使得一定程度上，Dom结构变的更加清晰明了。因此，这部分如果用运得当，对于 Vue 组件化编写大有裨益；虽然说 Vue官方已经有很完善的文档～数据绑定语法，但依然还是可以对这块儿再进行探讨，毕竟Vue数据绑定，其实际功能比目测的文档中描述更为强大。

在文档中，我们可以轻易的知道，Vue 为数据，Class, Style，表单控件的绑定；属性的计算，条件、列表渲染；方法、事件处理等等等提供了诸多便捷的方法；所以我们可以很简洁的写出模版，例如这样的；

<span>Bindind Message Using Mustache（双大括号）: {{ msg }}</span>
span>This will never change(mustache with *): {{* msg }}</span>
<div>Bing htmlText using three Mustache label Like This :{{{ html_text }}}</div>
<div id="item-{{ id }}">Html Attributes Using Mustache</div>
<div>{{ message.split('').reverse().join('') }}</div>
<div class="{{ className }}">Binding class using Mustache Label</div>

谈及这数据的绑定就涉及到好几种符号®，比如：Mustache 语法标签的{{}},三Mustache标签{{{}}}，引号(单双)，括号()，对象{}，甚至数组[]；初始用起来，挺容易使人迷惑的，如果没认真读文档的话；用了蛮久之后，回过头再读文档，有以下感悟，如有不准确处，请慷慨予以指正：

1. Mustache之{{{}}}，是用来将传来数据解析成HTML的，这个很清晰；
2. Mustache之{{}},是要将数据解析为纯文本，这个用的最多；
3. 引号(包括单双)，这是 Vue 可来承载字符串，用来映射对应实例中定义的各类对象(
   Number，布尔值，字符串，数据，对象等等)和方法；也用来解析特定语法：譬如v-for="item in items"；还能支持部分简单的表达式：v-if="Math.random() > 0.5"; 当涉及有多层引号之时，就得不同引号相互套用，一般采用双引号套单引号；比如<div :style="{ fontSize: fontSize + 'px' }"></div>；
4. 括号()，这个用到的地方，比如v-for="(index, item) in items"，再比如：<a href="#" @click="onXXClick(param)"></a>之类的；
5. 当涉及到解析class,stylee时候，本来这类属性是html自带本来就需具有引号，所以要用 Mustache 来绑定的话，就是这样class="xx-{{ className }}"；
6. 对于上一条，Vue 温馨的考量到字符串拼接麻烦又易错，所以对于class 和 style的绑定，除了支持字符串外，还额外增强使其能支持对象或数组，所以就可以有以下用法：

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
<div v-bind:class="[classA, classB]">

以上这写几点，有使用jsfiddle做一小 Demo 予以说明，这也是对部分特殊写法的一个小记录；其中有提到这样的写法：

<div :style="{'width': `${100 / this.count}%`}">Text Desc</div>