Vue入门知识

缺乏、安全感 2023-10-02 22:16 11阅读 0赞

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

[https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js][https_cdn.jsdelivr.net_npm_vue_2_dist_vue.js]

可以写成<script src="[https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js][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实例了。

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中对应的属性。

[https_cdn.jsdelivr.net_npm_vue_2_dist_vue.js]: https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

还没有评论，来说两句吧...