vue2+vue3学习笔记

1、安装 — Vue.js  点击点进去下载开发版本生产版本的引用文件

 2、编写helloworld

建立html 文件， 在head引入vue.js  

在body里编写容器，在js代码里面编写vm对象  ，在对象里面指定容器

 红色的是容器  ，绿色的是vue实例，目前的数据还是写死，所以需要在绿色里的紫色维护好数据，在指定的时候自然而然就把数据传过去了（从而实现不用操作真实dom）

 最终案例 ：另外可以把const x去掉 （多余）

 总结：

 vue实例是指new的vue，配置对象是指el、data这些参数

项目运行之时，vue实例拿到vue模板 -》 解析模板，替换数据-》获得新的dom

（即data中的数据一旦发生改变，那么页面中用到该数据的地方也会自动更新）

 注意1：一个vue实例只能对应一个vue模板  一对一的关系。在以后的开发只有一个vue实例和vue模板，但实例里面可以有很多组件

 注意2：

 3、指令语法  vue的指令都是v-开头

{{ }}这种事插值语法，下图是使用v-bind的指令使“ ”里面的字符串变成表达式 。v-bind的意思是让url表达的结果绑定给href  。 v-bind可以简写成：

 插值语法用于标签体内容 ，指令语法用于解析标签

 表达式可以看到data里面的所有属性。

4、数据绑定 

v-bind只是单向绑定                              v-model 双向绑定

 

 4.1 、el 与data的两种写法

 

 

总结：

 5、MV VM模型

vue参考了MVVM模型  ，vm就是vue

具体代码例子：

 

 总结：

 6、数据代理

6.1、回顾object。difineproperty方法  ---给对象追加属性

6.2、什么是数据代理

数据代理：通过一个对象 代理 对另外一个对象中的属性的操作（读写）

 obj是可以操作x，但是现在更高级了，通过obj2也可以操作x，是为数据代理。

6.3、vue如何使用数据代理

 查看数据简单，但是修改有点特殊，虽然通过前端可看出结果，但setter具体结果呢，data一开始就传给vue了，但是后面就没了，不是全局对象。vue存给了_data。

 

f12控制台输入vm 看到的   _data=data

_data.name是等于name，但是在页面模板写{{_data.name}} 太麻烦，直接写{{data.name}}

总结：

7、事件处理

8、计算属性