前端面试vue

jiezi

6 年前

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>

<!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>

前端面试vue

1. 最简单的 vue

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