1. 最简单的vue

el: dom节点
data: 数据

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body>    <div id="app">        <p> {{ message }}</p>        <input type="text" v-model="message">    </div>    <script type="text/javascript">        var app = new Vue({            el: '#app',            data: {                message: 'Hello Vue!'            }        })    </script></body></html>

2. Vue 数据里的数组对象更新,但是视图不更新

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body>    <div id="app">        <p>arr:{{arr}}</p>        <p>obj:{{obj}}</p>        <button @click="btn">默认方法</button>        <button @click="btn2">this.$set</button>    </div>    <script type="text/javascript">        var vm = new Vue({            el: '#app',            data() {                return {                    arr: [1, 2, 3],                    obj: {                        a: 1,                        b: 2                    }                }            },            methods: {                btn() {                    this.arr[0] = '11';                    this.arr.length = 1;                    console.log(this.arr); // ['OBKoro1'];                    this.obj.c = '11';                    delete this.obj.a;                    console.log(this.obj); // {b:2,c:'OBKoro1'}                },                btn2() {                    this.$set(this.arr, 0, "11"); // 改变数组                    this.$set(this.obj, "c", "11"); // 改变对象                }            }        })    </script></body></html>