1体系化Vue再学习——vue对象基础1

初识Vue

 通过el将对应名字下的DOM容器和Vue实例做绑定。

 在 Vue的{{ }}中需要注意可以用js表达式

Vue模板语法

插值语法

通过{{}}进行赋值，赋值的地方属于标签体就用插值语法

 注意：其实对于{{}}来说，他可以看到vm对象所携带的所属性、方法。都可以直接使用

指令语法

通过v-bind:【属性】进行赋值，赋值的地方为标签属性

数据绑定

单向绑定和双向绑定：

单向绑定仅仅界面数据变化，属性不变。双向绑定属性和界面数据都发生变化。

 

注意: v-model只能应用在表单元素上（）

界面绑定和data语法:

注意：这里的function()不能用箭头函数替换，因为箭头函数没有持有Vue实例，如果用this会找到上一层的window对象

VUE中数据代理

基础知识:通过Object.defineProperty设置动态属性

 通过get和set方法，在调用或修改person的age属性时都需要通过这两个方法

VUE数据代理模型

 

 在_data内部，并非是直接的属性，而是一个监听。vue直接展示的数据是_data做了代理展示出来的。

Vue事件处理

事件基本使用

注意:

1、v-on:onclick 只能调用Vue实例下的方法

2、通过Vue管理的函数，都不要用箭头函数

js事件流：

点击div2的结果为:

输处:2和1

先触发捕获节点，再出发冒泡阶段：

捕获为从外向内，冒泡为从内向外

事件修饰符

1、事件冒泡：

防止上一个控件接收事件

2、捕获事件模式:

点击div2，则div1的事件在捕获阶段就开始处理

3、self：

 只有点击和触发是同一个元素时才执行

4、passive：

控件有一些默认的事件:如滚动条滑动，一般触发规则为先执行绑定的时间，再出发默认界面的移动，但因为有一些绑定方法延迟有点高，会导致默认事件迟迟无法执行，通过passive则先执行默认事件，在执行绑定事件

 

键盘事件

 通过事件修饰符进行处理

Vue计算属性

基础使用

计算属性compited：根据给定的值计算出对应的值。

 

注意：

在Vue中，只要data中的值发生改变，则会重新解析模板，导致效率不高。

通过计算属性则解决该问题

get在获取fullname时被调用

set在修改fullname时调用

简写方式

这里看似是函数，实际上是在执行之后往vm.fullName属性设置执行的结果。所以调用时按照属性调用。

 简写形式在只有get的情况下才能使用

Vue监听属性

普通监听

通过watch可实现对属性改变的监听，监听的是data中的数据。通过handler进行数据改变的处理。

 同时，也可以在Vue创建之外进行监视调用。 

注意：原始的写法中这里是需要用’ ’ 括起来的。’isHot’

深度监听

对于多级数据numbers，当内部属性变化时需要numbers.a才能监听到a，通过设置属性deep，监听多级结构中的所有属性

 

 

监听中的属性设置

监听的简写形式

watch对比computed

computed是计算属性，依赖的是返回值，是没办法开启异步任务的，因为return在其内部。而watch不靠返回值，而是亲自写代码修改。

 注意：我们都说在vue下的function不要写成箭头函数，因为this指向不了vue，但是在定时函数中，虽然其在vue下面，但是不受vue控制，而是受js引擎调用。所以这里一定要用箭头函数，不用的话，则this指向window

 

Vue样式绑定

 

普通class和动态:class

Vue中样式 可以有 正常样式，用class带出，也可以有动态样式，通过:class设置

 class一般写固定样式， :class 写变化的样式

class几种写法

1、数组写法：

对于数据写法，在解析数组的样式时，如果 引号‘’则会去找对应的样式数据

 如果不带引号，则会被当成变量去找对应data下的数据 

2、对象写法

动态觉得那个样式展示

 

style样式

对于style来说和class一样，如果要设置为动态需要加冒号:  ,对于style来说，需要写成对象的形式，key:value

style几种写发：

Vue条件渲染

v-if / v-show：v-if 是删除对应节点， v-show 是隐藏节点；所以对于高频率的展示用v-show，对于低频率的展示用v-if

注意:v-if是需要连贯的，中间被隔断则不再生效

Vue列表渲染

Vue基础使用

在这里，:key 最好写上，且不能重复，相当于每个数组的身份证。这里最好设置为数据的唯一标识！index只是权宜之计

遍历数组 VS 遍历对象

key所引起的bug

Key的使用中用index作为key可能产生错误：对于破坏了数据顺序的情况会造成错误

若不写key，则默认的index为唯一标识

Vue列表过滤

 

在watch中监听keyword的变化，然后通过数组过滤之后的值赋给filPersons。

Vue列表排列顺序

 

Vue检测数据改变原理

对象监测

大概数据流程

 

这里对data的修改、获取通过get和set方法实现的。

我们这里还原属性赋值过程:

 

 注意，这里的问题是，我们忽略了对象的层次，复杂对象有很多层，则需要遍历多层的属性

Vue .set方法：

在vue中直接对对象赋值是不行的，必须依赖set方法

 

只有在_data中存在数据，且有对应的get、set才算是添加属性成功。

注意：set不能对data和其根数据进行赋值

 

数组监测:

对于对象来说，Vue是会创建一套get、set方法，但是对于数组来说是没有对应的get、set方法的

没有get、set这意味着：直接对数组某一个值改变，是不会同步对界面进行修改的。

Hobby[0] = “xx”是不会修改界面的。

只有调用修改数组的7个标准方法，才会引起数组的变化。（7个方法包装了修改数据的更新方法）

总结：

 

对于数组的filter来说，可以用重新赋值的方式对值进行改变