Vue学习记录

Vue

vue是一套用于构建用户界面的渐进式JavaScript框架

构建用户界面：使用某种方式拿到数据，将数据放到合适的位置

渐进式：可以自底向上逐层应用

vue特点：

1.采用组件化开发，提高代码复用率，并且让代码更好的维护

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率

3.使用虚拟DOM+Diff算法，尽量复用DOM节点

vue安装

1.直接使用script标签引入

1.1直接用网址引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

1.2去官网下载到本地再引用

安装 — Vue.js

2.npm方式

npm install vue

刚开始引入的时候控制台会显示调试信息

 只需要添加如下命令即可关闭调试信息

单项数据绑定

v-bind

数据只能从data流向页面

hello world例子

 显示效果：

 数据里面可以存放对象，对象里的数据照样可以读取到

当一个实例对应多个容器时，只会读取第一个

【一个容器对应一个实例，一个实例对应一个容器】

显示效果：

 

 { {}}里可以是vue实例data中的数据，也可以是js表达式

真实开发中只有一个vue实例

一旦data里的数据改变，页面中的数据也会马上跟着改变

vue的模板语法：

 效果：

 v-bind表示动态绑定数据，可以简写为【：】

双向数据绑定

v-model

数据可以在页面和data之间互相流动

 注意：双向绑定只能是用于具有value值的元素（表单元素），如input，select等，因为v-model默认是用来收集value值的

el的两种写法：

第一种：

 第二种：

先创实例，再指定

 data的两种写法

第一种：

对象形式

第二种

函数形式

 

 函数形式也可以简写为

 如果使用的是箭头函数

data:()=>{}

this指向就是window

MVVM模型

M：（Model）对应data中的数据

V：（View）模板

VM：（ViewModel）Vue实例对象

 注意：

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

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

Object.defineProperty

可以用Object.defineProperty方法添加新属性

Object.defineProperty（）接收三个参数

1.对象，2.属性名，3.配置对象

 该方法添加的属性默认不能被枚举（遍历）等，但是可以修改

get(getter)读取属性时调用

set(setter)修改属性时调用，并返回修改后的值

不能和以上Object.defineProperty里的配置一起使用

 数据代理

通过一个对象代理另一个对象中属性的操作（读/写）

例如操作obj2可以控制obj1

vue中的数据代理

 事件的处理

1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods对象中，最终会在vm上

3.methods中配置的函数不能使用箭头函数，否则this就不是指向vm了

4.@click='xxx'和@click='xxx($event)'效果一致，但是后者可以传参