（尚硅谷）Vue笔记-------03

el与data的两种写法

el的两种写法：

之前的写法（第一种写法）：

我们把el注释掉：

 

我们看到了我们的vue对象，其中前面带$符号开头的方法，都是我们可以使用的。我们这里要用的是$mount()方法。

第二种写法：

通过结果，我们发现我们用v.mount()可以代替el完成同样的效果。

先等1秒钟之后，再绑定vue实例：

运行的时候：

1秒钟之后：

data的两种写法：

第一种写法：

第二种写法：

 运行结果：

 

 如果我们写成了箭头函数：

 

箭头函数没有自己的this,它只能向外找，找上一层的this就是window  

所以data不能写成箭头函数，只能写成function函数

但是这么写比较麻烦，一般都用简化一点的写法：

 总结：

1.el有两种写法

（1）new Vue时候配置el属性。

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

2.data有两种写法

（1）对象式

（2）函数式

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

3.一个重要的原则：

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

MVVM模型

1.M:模型(Model)：对应data中的数据

2.V：视图(View):模板

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

总结：

 MVVM模型

1.M：模型（Model）：data中的数据

2.V：视图（View）:模板代码

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

观察发现：

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

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

数据代理

回顾Object.defineProperty方法;

 我们发现浏览器上age属性的颜色要淡一些，那它有什么不同呢？

age属性是不能枚举的，也就是不能被遍历的。

例：

我们直接写age:

我们换成Object.defineProperty方法写入age 

我们发现age获取不到了

 我们用forin循环也可以验证这一点l;

 

运行：

 

那我们有什么办法可以让它能被遍历输出呢？

就要用到enumerable属性了：

 

 

三个属性的颜色一样了，这个时候可能会问，那这两个不就没有区别了么？

当然也不是，虽然都能遍历了但是还是不一样的

例:

当我们直接在person下定义age属性时：

 

 

在控制台可以改变person类中age的值

我们用Object方法时:

 

 

无法改动person类的age属性的值

 

那我们用Object方法就改变不了age 的值了么，当然可以 就要用到新的属性值writable

例：

 

我们正常写法时，如果想删除元素:

 

 

我们可以随意删除

如果是用Object方法的方式:

 

 

我们没法删除。

所以如果想要删除，需要配置项 configurable

例：

 

 

这段代码 我们希望我们改number，age的值跟着更改

 

这时我们要是想完成需求 每次都要值传递：

 

需要我们手动改多了一个中间过程，太麻烦了

所以我们仍然需要引入新的配置项：

 

 

点击三个省略号：

 

 

既然有get就肯定也有set

 运行测试一下:

 我们通过这个Object的方法 把对象里的age和number连在一起了，这个get和set十分重要