<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>vue实例</title>
</head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound title!
      </span>
    </div>

  <script type="text/javascript">
   //简单渲染
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    //指令方式渲染
    var app2 = new Vue({
      el: '#app-2',
      data: {
        message: 'You loaded this page on ' + new Date()
      }
    })
  </script>
  </body>
  </html>

此时页面显示如下：

动态的修改js中元素的值，可以动态的显示到Dom元素中。实现了数据绑定，这样我们就可以省去使用js来替换html元素中内容之类的操作了。

2.2 DOM绑定

v-if v-else 来进行条件渲染，除了数据可对DOM进行绑定。 v-for 进行循环渲染，可对列表和字典数据做遍历。

参考实例：

    <!--条件/循环-->
    <div id="app-3">
      <p v-if="seen">Now you see me</p>
      <p v-else>I am else </p>
    </div>
    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
      <div v-for="(value, key, index) in object">
       {{ index }}. {{ key }} : {{ value }}
      </div>
    </div>

    <script>
        var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true
      }
    })
    var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    })
    </script>

2.3 事件绑定

v-on 进行事件绑定，缩写 @

<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
//按键修饰符
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
<!--
全部的按键别名：
- enter
- tab
- delete (捕获 “删除” 和 “退格” 键)
- esc
- space
- up
- down
- left
- right
-->

2.4 表单控件绑定

v-model 来绑定表单控件

<!--文本-->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<!--多文本-->
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<!--复选-->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!--单选-->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
<!--选择列表-->
<select v-model="selected">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<!--修饰符-->
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
<!-- 将age 转为num -->
<input v-model.number="age" type="number">
<!-- 去除msg空格 -->
<input v-model.trim="msg">