前端面试vue

44次阅读

共计 1050 个字符，预计需要花费 3 分钟才能阅读完成。

1. 最简单的 vue

  1. el: dom 节点
  2. 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>

正文完
发表至： javascript
2019-05-14
 0
js
关于javascript:vue的双向绑定的原理是什么
实现一个简易版的vuex持久化工具
React实战与原理笔记