Vue入门知识

注：编写任何关于vue的代码时，都需先引入vue.js文件

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

可以写成<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">

也可以进入src的链接里面 ctrl + a 全选复制，然后粘贴到自己创建的空的vue.js文件中再引入即可

1、 data与el的两种写法

1.el有2种写法

(1).new Vue时候配置el属性。

(2).先创建Vue实例，随后再通过vm. $mount( ' #root')指定el的值。

2.data有2种写法

(1).对象式(2).函数式

如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则:

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

<script>
        // const v = new Vue({
        //     //第一种写法
        //     // el: '#root',
        //     // data第一种写法
        //     data: {
        //         name: 'world'
        //     }
        // })
        // // 第二种写法
​
        // v.$mount("#root")
​
        const v = new Vue({
            el: '#root',
            // data第二种写法，:function可省略
            data: function () {
                return {
                    name: 'world'
                }
            }
        })
    </script>

2、MVVM模型

1. M：模型（Model）：对应data种的数据

2. V：视图（View）：模板

3. VM：视图模型（ViewModel）：Vue实例对象

测试发现：

1. data种所有的属性，最后都出现在了vm身上

2. vm身上所有的属性及Vue原型上所有属性，在Vue模板种都可以直接使用

3、数据代理

1.Vue中的数据代理:

通过vm对象来代理data对象中属性的操作（读/写)

2.Vue中数据代理的好处:

更加方便的操作data中的数据

3.基本原理:

通过object.defineProperty()把data对象中所有属性添加到vm上.为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。