1. 入门

vue和小程序其实大差不差的，语法差不多一个样。
可以使用如下代码进行加载——

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

它的特点有很多：

1. 从最简单的hello word

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

var app = new Vue({
        el: "#app",
        data: {
          message: "hello Vue!"
        }
      });

2. 到绑定数据

<div id="app2">
      <span v-bind:title="message">鼠标悬停几秒钟查看此处状态绑定的提示信息。</span>
    </div>

 var app2 = new Vue({
        el: "#app2",
        data: {
          message: "页面加载于" + new Date().toLocaleString()
        }
      });

3. 再到控制是否加载与隐藏

<div class="app3">
      <p v-if="seen">现在你看到我了</p>
    </div>

 var app3 = new Vue({
        el: ".app3",
        data: {
          seen: false
        }
      });

4. 循环

<div class="app4">
      <ol>
        <li v-for="item in arrs">
          {{ item }}
        </li>
      </ol>
    </div>

var app4 = new Vue({
        el: ".app4",
        data: {
          arrs: ["你好", "我好", "大家好"]
        }
      });

5. 监听与数据处理

<div class="app5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">逆转消息</button>
    </div>

var app5 = new Vue({
        el: ".app5",
        data: { message: "Hello 方峻" },
        methods: {
          reverseMessage: function() {
            this.message = this.message
              .split("")
              .reverse()
              .join("");
          }
        }
      });

6. 和数据的双向绑定

<div class="app6">
      <p>{{ message }}</p>
      <input v-model="message" />
    </div>

var app6 = new Vue({
        el: ".app6",
        data: {
          message: "nihaoa"
        }
      });