<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

其作用是将'a {{b+"text"}} c {{d+f}}' 这样的字符串转换成 '"a " + b + "text" + " c" + d + f'这样的表达式。

元素节点就要提取各种v-xxx指令，然后做三件事：1) 根据指令类型设置节点的属性并将指令内的变量与vm绑定起来; 2) 将表达式加入到监控（订阅者）中 3) 指定相应的视图更新方法。

model双向绑定(v-model="expression")

for指令的编译

<li v-for="item in items">
  Parent.name: {{name}}; item: {{item.id}}:
</li>

表达式的求值

假如有'{{b+"text"}} c {{d+f}}'这样的一个绑定表达式，最后的求值结果就是scope.b + "text" + " c " + scope.d + scope.f 。 做法有两种，一种是构造一个函数，函数体就是要求值的表达式，返回值为表达式的结果，执行这个函数就可以得到求值结果，构造这样的函数可以使用new Function来构造。 上述还有一个作用域的限制，可以根据有无""来判断是否变量或者直接改造parseTextExp函数返回变量的数组，然后给每个变量加一个scope.

class指令的对象语法是这样的：

最后要根据isActive、hasError的值返回相应的class。而isActive还可以computed属性或者表达式，这里你会怎么实现呢？

使用三元判断语句，构造出 (isActive)？"active":""这样一个个语句，连起来执行就可以得到期望的class了

样式绑定==计算==显示隐藏

<h3 class="cls" :id="name">{{ title }}</h3>
  <p v-if="isActive">{{"This is expression: "+ title }}, " ' , {{ name }}</p>
  <p>Computed: {{computedData}}： <span v-html="test"></span></p>
  <h3 class="static"
      v-show="isActive"
      :class="{ active: name === 'Vue', 'text-danger': hasError }">bind:class test</h3>
  <h3 v-if="isActive" v-bind:class="[isActive ? activeClass : '', errorClass]">bind:class test</h3>
  <ul v-show="isActive">
    <li v-for="item in items">
      Parent.name: {{name}}; item: {{item.id}}, text:
      <span v-for="t in item.text">{{t.txt}}</span>
    </li>
  </ul>
  <h3 style="margin-left:25px" v-bind:style="{ color: activeColor, font-size: fontSize }">model & event</h3>
  <input v-model="name"><br>
  <input type="button" value="测试" v-on:click="resetInput">
  <input type="button" value="增加Item" @click="addItem">
</div>

<script>
  var vm = new Vueuv({
    el      : '#app',
    data    : {
      name       : 'Vue',
      title      : 'Hello',
      test       : '\<button\>按钮\<\/button\>',
      items      : [
        {id: '10000', text: [{txt: 'start'}, {txt: ',10000,'}, {txt: 'end'},]},
        {id: '10001', text: [{txt: 'start'}, {txt: ',10001,'}, {txt: 'end'},]},
        {id: '10002', text: [{txt: 'start'}, {txt: ',10002,'}, {txt: 'end'},]},
      ],
      isActive   : true,
      hasError   : false,
      activeColor: 'blue',
      fontSize   : '18px',
      activeClass: 'active-class',
      errorClass : 'error-class',
    },
    computed: {
      computedData: function () {
        return this.title + ', ' + this.name;
      },
    },
    methods : {
      resetInput: function () {
        this.name = 'reset input';
        this.test = '\<input type="date"\>';
        this.items[1].text[0].txt = 'changed text';
        this.isActive = !this.isActive;
        this.fontSize = '28px';
        this.activeClass = 'active-class-changed';
      },
      addItem   : function () {
        this.items.push({id: 'push', text: [{txt: 'push'}, {txt: ',11111,'}, {txt: 'push'}]});
        this.items[2].text.unshift({txt: 'nest array unshift'});
      }
    }
  });

</script>