vue2+vue3——1~35-程序员宅基地

技术标签：软件工程文档自动化 vue.js

vue2+vue3

尚硅谷

在这里插入图片描述

尚硅谷

vue2

vue2 课程简介【02:24】

vue2 Vue简介【17:59】

在这里插入图片描述

vue2 Vue官网使用指南【14:07】

在这里插入图片描述

vue2 搭建Vue开发环境【13:54】

在这里插入图片描述

vue2 Hello小案例【22:25】

在这里插入图片描述

了解：不常用

在这里插入图片描述

常用：

id 更常用简单

在这里插入图片描述

class

在这里插入图片描述

差值

在这里插入图片描述

总结

vue 实例

在这里插入图片描述

vue 模板：先取，再放回去

在这里插入图片描述

什么是选择器

选择页面上的某一个或某一类元素。因为自从CSS2.0后，提出来将HTML和CSS分离的思想。因为将标签和样式分开后，标签和样式失去了对应关系，导致样式和标签不匹配，所以用到了选择器，选择器就是给标签起来个名字，样式通过名字对应指定的标签。

三大选择器

标签选择器

标签选择器会选择页面上所有的这个标签的元素，选择同类标签
在这里插入图片描述

类选择器

可以多个标签归类，使用同一个class，可以复用。格式：.class的名称{}
在这里插入图片描述

ID选择器

id必须保证全局唯一，同类选择器类似。格式：#id名称{}
在这里插入图片描述

vue2 分析Hello案例【19:39】

{ {}} JS表达式

在这里插入图片描述

vue 开发者

在这里插入图片描述

开发版 vue

在这里插入图片描述

非开发板 vue.min.js

vue2 模板语法【17:43】

模板

插值 { {表达式}}

标签体

在这里插入图片描述

指令 v-bind:href=“表达式”

在这里插入图片描述

未找到绑定属性、方法

在这里插入图片描述

简写 :href

在这里插入图片描述

标签属性

在这里插入图片描述

总结

功能

在这里插入图片描述

JS 表达式

在这里插入图片描述

data ：层级

在这里插入图片描述

vue2 数据绑定【10:39】

单向数据绑定 v-bind:href = “xxValue”

在这里插入图片描述

双向数据绑定 v-model:value = “xxValue”

在这里插入图片描述

v-model:value 只能用于表单、多行/输入input、单选多选、select，都有 value 值

在这里插入图片描述

简写 v-model = “xxValue”

在这里插入图片描述

vue2 el与data的两种写法【11:48】

配置代码片段

在这里插入图片描述

实例实例缔造者

在这里插入图片描述

el 两种写法

延迟等一会：回头指定 v.$mount(‘#root’) //id v.$mount(‘.root’) //class

在这里插入图片描述

data两种写法

对象 vs 函数(返回data对象)

在这里插入图片描述

组件必须使用函数式

在这里插入图片描述

可以简写 data(){}

在这里插入图片描述

vue 管理的函数，不能箭头函数 data:()=>{}

在这里插入图片描述

总结

在这里插入图片描述

vue2 理解MVVM【14:34】

在这里插入图片描述

DOM

DOM和HTML的关系
构建 DOM 树的输入内容是一个非常简单的 HTML 文件，然后经由 HTML 解析器解析，最终输出树状结构的 DOM。
document 就是 DOM 结构，DOM 和 HTML 内容几乎是一样的，但是和 HTML 不同的是，DOM 是保存在内存中树状结构，可以通过 JavaScript 来查询或修改其内容。
进阶
和 HTML 文件一样，浏览器也是无法直接理解纯文本的 CSS 样式，所以当渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构——styleSheets。
查看方式：只需要在控制台中输入 document.styleSheets

DOM，html，JavaScript，xml，CSS，浏览器之间的关系

DOM树解释：

W3C所制订的DOM Level分为两大模块：Core和HTML。

1.Core核心，W3C规范：满足软件开发者和Web脚本编写者，访问和操控产品项目中包含的可解析的HTML和XML内容。
2.HTML模块，规范描述为：HTML之中特定元素的功能，和恰到好处的、易用的、针对常见性任务的HTML文档操作机制。

核心DOM-针对任何结构化文档的标准模型
XML DOM-针对XML文档的标准模型
HTML DOM-针对HTML文档的标准模型
DOM和浏览器之间的关系：

浏览器将DOM翻译成html和Images

JavaScript 操作DOM，处理完DOM，此时浏览器得到DOM这棵树，将其渲染成HTML，加上这种css，最终是我们看到的页面。当网页加载完成后，就可以看到我们访问的页面。反之，当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM 模型被构造为对象的树。

DOM，浏览器，HTML，javasript，css之间的关系可以理解成；一个画家(程序员)用画笔(javascript)画了个画(DOM),接着打印机（浏览器）打印，在打印过程中加上彩墨(css),最终一张漂亮好看的一张纸（html）就展示在大家面前。
JavaScript 作用说明：

JS可以解析HTML文档书和XML文档树，它将一切节点视为文档对象，从而进行操作。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
HTML和XML：前者负责数据的显示，而后者则负责数据的存储。
而Javascript则负责实现两者之间的交互操作。例如读取XML中数据的操作就放在Javascript模块中。

首先来看用来操作HTML和XML的接口：
HTML DOM和XML DOM是相似的两种接口。它们分别将HTML文件和XML文件解析成为树状结构，
文件中的标签全部作为节点。然后利用DOM中提供的各种函数来获取并操作节点。

当浏览器打开一个窗口时，会自动为HTML文档创建一个名为window的Window对象（Window对象是JS层次中的顶层对象）。
当在该窗口载入某个网页（即某个HTML文档时），浏览器会将该文档解析成为一个Document对象，
并将其赋给window的document属性。
之后就可以通过利用document来对当前的HTML文档进行操作了。
下面介绍下实际应用：

HTML DOM树：

一个html文档及其对应的html DOM 树如下：
在这里插入图片描述

一个xml文档及其对应的xml DOM：
在这里插入图片描述

https://www.cnblogs.com/Shunia123/p/10589126.html

VUE 对应：监听双向绑定

在这里插入图片描述

vm 身上的东西，可以直接用

在这里插入图片描述

vue2 Object.defineProperty【18:11】

插件过多，可能出现如下问题

在这里插入图片描述

其他插件关掉后，就正常了

在这里插入图片描述

对比

直接写，浏览器 vue 显示同样颜色

在这里插入图片描述

可以枚举

在这里插入图片描述

可以修改，从控制台

在这里插入图片描述

可以删除

在这里插入图片描述

高级 Object.defineProperty ，不枚举、不遍历

在这里插入图片描述

Object.keys( person )

在这里插入图片描述

for ( let key in person) {}

在这里插入图片描述

enumerable : true 就可以枚举了

在这里插入图片描述

不可以通过控制台修改

在这里插入图片描述

writable : true 就可以修改了

在这里插入图片描述

configurable : true 就可以删除了

在这里插入图片描述

get:function(){}

在这里插入图片描述

点一下…就出来了

在这里插入图片描述

修改

在这里插入图片描述

一般不起名字

在这里插入图片描述

get() {}

在这里插入图片描述

set () {}

在这里插入图片描述

vue2 理解数据代理【02:59】

在这里插入图片描述

vue2 Vue中的数据代理【23:15】

在这里插入图片描述

验证

在这里插入图片描述

修改

在这里插入图片描述

直接访问 vm._data

在这里插入图片描述

数据代理 object.defineProperty

在这里插入图片描述

数据劫持

在这里插入图片描述

双向绑定

在这里插入图片描述

vue2 事件处理【16:00】

v-on:click ：点击click button 元素事件，找字符串函数

在这里插入图片描述

不能传入

在这里插入图片描述

传入 event

在这里插入图片描述

拿其他：文字

在这里插入图片描述

this === vm （vue的实例对象），普通函数

在这里插入图片描述

this === window 箭头函数

在这里插入图片描述

简写 @click = “函数名”

在这里插入图片描述

参数 @click = “函数名(参数)”

在这里插入图片描述

$event @click = “函数名($event)”

在这里插入图片描述

鼠标事件

在这里插入图片描述

直接给 vue

在这里插入图片描述

不需要数据代理、数据劫持，不要写在data中

在这里插入图片描述

vue2 事件修饰符【19:56】

阻止默认行为

在这里插入图片描述

方法二： @click.prevent 时间修饰符，对 click 事件

在这里插入图片描述

一共6个时间修饰符

在这里插入图片描述

@click.stop 内层加【阻止冒泡(点一次、只出现一次弹窗、不会出现多次)】

在这里插入图片描述

@click.one 内层加【只能点一次、再点击无用】

@click.capture 外层加【.capture加在外面盒子，指定在【捕获阶段】处理事件】【默认：先捕获（由外往内），再冒泡（由内往外，处理事件：先打印2，再打印1）】

在这里插入图片描述

@click.once 外层加【event.target都是按钮，加了.once之后，只有是自己div才调用showInfo，也能组织冒泡】

在这里插入图片描述

@wheel.passive 【】

@scroll 滚动条滚动：拉动滚动条、键盘上下键

在这里插入图片描述

@wheel 鼠标滚轮，就可以触发（及时到头）

在这里插入图片描述

滚动鼠标滚轮、触发demo函数调用、调用结束滚轮条往下走一丢丢、for循环导致卡顿。

在这里插入图片描述

@wheel.passive 【立即解决，只计算，但是滚动条不动的问题】

在这里插入图片描述

@scroll 不存在这个问题

移动端项目，passive都会用一下

vue2 键盘事件【16:39】

@keyup 是抬起松开键盘， @keydown 是按下键盘

键盘按下任何，都会触发函数

在这里插入图片描述

键盘按下【回车enter】13 ，才触发

在这里插入图片描述

@keyup.enter

在这里插入图片描述

@keyup.delete 删除delete & 退格backspace 两个

在这里插入图片描述

@keyup. 真正的名字Enter

在这里插入图片描述

event.keycode 是编码，event.key 是按键名字

在这里插入图片描述

ctrl

在这里插入图片描述

enter

在这里插入图片描述

alt

在这里插入图片描述

capslock 两个单词，都要小写用 “-” 连接，caps-lock

在这里插入图片描述

不是所有的按键都可以捕获（比如：音量、光线亮度）

在这里插入图片描述

tab 不能使用up，使用down

在这里插入图片描述

@keyup.tab 浏览器的焦点跑走

在这里插入图片描述

@keydown.tab 可以捕获，但是任然会切走

在这里插入图片描述

系统修饰键 4个 @key up / down 都可以用

@keyup

在这里插入图片描述

@keydown

在这里插入图片描述

meta ： windows的方片win键，苹果的command键

在这里插入图片描述

其他系统修饰按键

在这里插入图片描述

字符码 ASCII ：不建议使用

@keydown.13

在这里插入图片描述

vue.config.keyCodes.xxx = 13

在这里插入图片描述

vue2 事件总结【04:08】

事件连续写

在这里插入图片描述

可以调换位置；最终效果、只不过处理顺序变了

在这里插入图片描述

修饰符连续写：同时发生

在这里插入图片描述

vue2 姓名案例【16:44】

用三种发方法

在这里插入图片描述

问题提出

不行： v-bind 放数据到模板html ，只输出不行

在这里插入图片描述

{ {}} 插值语法，不推荐

v-model

在这里插入图片描述

拼接

在这里插入图片描述

只要前三位

在这里插入图片描述

风格

在这里插入图片描述

methods

绑定事件， methods 函数作为事件的回调函数使用

在这里插入图片描述

可以加括号

在这里插入图片描述

亲自调用 methods 函数，不作为回调函数

{ {函数不加括号}} ，显示函数定义，不对

在这里插入图片描述

{ {函数（）}}必须加括号，插值语法中插入返回值

在这里插入图片描述

普通函数 this 就是 vue ；箭头函数 this 是 window

在这里插入图片描述

vue 重新解析：一旦数据发生变化

在这里插入图片描述

{ {}}方法也会重新调用

在这里插入图片描述

vue2 计算属性【28:20】

拿 data中的属性，计算生成全新的属性【计算属性】

在这里插入图片描述

computed 配置成对象，否则 get 缺失

在这里插入图片描述

底层就是 Object.defineProperty

在这里插入图片描述

点一下【计算属性】，就会有输出，返回值作为 fullname

在这里插入图片描述

vm._data 里面不会有【计算属性】

在这里插入图片描述

computed.fullname.get() 帮你维护 vm 的 this 指针

在这里插入图片描述

this 指针的使用，辅助【计算属性】

在这里插入图片描述

get() 调用时期，只调用一次，可以做缓存

在这里插入图片描述

1. 初次调用、 2.依赖数据发生变化（data 其他数据改变，不用影响）

methods 会调用 5次

在这里插入图片描述

初学者容易犯错：直接写【计算属性】，不要加get

在这里插入图片描述

methods 写啥修是啥； computed 直接写【计算属性】名字

在这里插入图片描述

set() get() ； set 需输入、 get 需返回

修改需要实现 set（）

在这里插入图片描述

set()

没有写处理逻辑

在这里插入图片描述

写处理逻辑

在这里插入图片描述

绝对：不写箭头函数、不用其他变量，必须是 data中的数据

vue2 计算属性_简写【04:42】

简写：当只有 get（）的时候

在这里插入图片描述

简化 1

在这里插入图片描述

简化 2

在这里插入图片描述

参考对比： get:function(){} 简化

vue2 天气案例【13:58】

vscode vue插件推荐

在这里插入图片描述

提示、自动补全

在这里插入图片描述

三目运算：切换

在这里插入图片描述

【计算属性】简写：计算属性info 监听 isHot变化

在这里插入图片描述

【计算属性】不写 this 指针报错

在这里插入图片描述

给按钮绑定事件

在这里插入图片描述

methods 中实现 button 按下后切换 true false

在这里插入图片描述

vue 的配置项全部都用上了

如果在模板中 data 、 computed 都不用，那么会出现问题 methods 变动，但是 data、computed 不更新

在这里插入图片描述

点击切换天气

在这里插入图片描述

模板中没有出现，不给你更新了，改了但不体现出来

在这里插入图片描述

输出打印变了；但是不显示

在这里插入图片描述

小问题， vue 开发者工具的问题

简写

在这里插入图片描述

模板可以直接读取 isHot ，省去 methods

在这里插入图片描述

复杂还是写 methods

在这里插入图片描述

不是什么都可以简写，比如 alert（2）弹出

在这里插入图片描述

去vm 、 vue 上找，没找到，报错

在这里插入图片描述

window 也不行

在这里插入图片描述

解决方法

在这里插入图片描述

绑定事件的时候， @事件名 : “要执行的语句”

vue2 监视属性【10:56】

不需要 computed 、 methods 写什么

在这里插入图片描述

witch

在这里插入图片描述

·形式类似 computed

在这里插入图片描述

可以获取到新值和旧值：用来检测温度差等

在这里插入图片描述

配置对象：目前只写了一组配置 Handle

在这里插入图片描述

其他配置

immediate 默认 false

在这里插入图片描述

immediate 改成 true ， isHot没有变化，但一上来也执行了

在这里插入图片描述

没有点【切换天气】，但也执行了：初始化阿时，让 Handle 调用一下

在这里插入图片描述

watch 监视： data 属性、 computed 计算属性

在这里插入图片描述

computed 计算属性： true 一上来先执行一下，修改时还要执行

在这里插入图片描述

$watch 写在外面，第二种方法（前面 new vm 是第一种写法）

报错

在这里插入图片描述

watch 原始写法

在这里插入图片描述

$watch 放在外面

在这里插入图片描述

vue2 深度监视【11:16】

监测不存在的属性

在这里插入图片描述

原始写法 "number . a "

在这里插入图片描述

多个

分开监测

在这里插入图片描述

错误：写合起来 number ：只监视 number 的value，；不监视里面的地址值（成员）

在这里插入图片描述

彻底改变： number 的地址

在这里插入图片描述

watch {number: { deep ： true } } 深度监测，多少层都可以

在这里插入图片描述

vue2 监视的简写形式【06:15】

不需要 immediate 不需要 deep ，只有 Handle ，才可以简写，类似于【计算属性】

在这里插入图片描述

类似于【计算属性】

在这里插入图片描述

$watch 简写

在这里插入图片描述

普通函数，不能是箭头函数： methods 、 computed get() set() 简写fullname() 、 watch Handle() 简写isHot:(n,o) $watch handler() 简写function()

在这里插入图片描述

vue2 watch对比computed【21:31】

姓名案例 watch 实现

在这里插入图片描述

必须要在 data 中定义 fullname

在这里插入图片描述

watch 正确写法

在这里插入图片描述

computed 对比 watch

computed

在这里插入图片描述

watch

在这里插入图片描述

延迟 1s 再变

在这里插入图片描述

watch 可以开启【异步任务】 setTimeout

在这里插入图片描述

JS模块浏览器定时模块帮你回调函数，箭头函数从 window 到外面找是vm vue

在这里插入图片描述

普通函数，window

在这里插入图片描述

computed 没法异步： setTimeout 返回值给 window 了， fullname 没有返回值了

在这里插入图片描述

所有被vm管理的函数： vm身上的东西，必须用普通函数；所以，最好写普通函数

所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等），最好写成箭头函数，这样 this 才能指向 vm 或者组件实例对象

vue2 绑定class样式【23:34】

在这里插入图片描述

心情三选一

在这里插入图片描述

basic、123可以同时

在这里插入图片描述

basic

在这里插入图片描述

又宽又高，有边框

在这里插入图片描述

happy

在这里插入图片描述

sad

在这里插入图片描述

normal

在这里插入图片描述

atguigu1

在这里插入图片描述

atguigu2

文字变大，红色阴影

在这里插入图片描述

atguigu3

边框变成圆角

在这里插入图片描述

案例：更改样式

DOM ：最要不要用这种方式，不用学vue了

在这里插入图片描述

v-bind:class=“表达式” 可以省略v-bind ，只写 : 冒号， vue会帮你解析

在这里插入图片描述

可以给你汇总成为一个 class

在这里插入图片描述

违规写法：不写 v-bind: ，两个class违规

在这里插入图片描述

点击之后变颜色

在这里插入图片描述

绑定 class 样式 —— 字符串写法：适用于样式的类名不确定，需要动态指定

在这里插入图片描述

三种心情随机切换

随机数

在这里插入图片描述

向下取整

在这里插入图片描述

class 样式的个数不确定

在这里插入图片描述

绑定 class 样式 —— 数组写法：适用于要绑定的 class 样式的个数不确定、名字也不确定

class 样式的个数不确定、名字也不确定：适合用数组形式

在这里插入图片描述

考你一下：有引号和无引号

有引号：数组，将每一个字符串值，都加入 class

在这里插入图片描述

无引号：三个变量

在这里插入图片描述

不定义 abc ，报错

在这里插入图片描述

绑定 class 样式 —— 对象写法：适用于样式的类名确定，个数确定，但是要动态决定用不用 true false

不确定到底用不用：确定 59 行只用2种

在这里插入图片描述

vue2 绑定style样式【08:55】

在这里插入图片描述

错误写法

在这里插入图片描述

属性名不合法：修改

在这里插入图片描述

后面加 ‘px’ 单引号

在这里插入图片描述

对比 JS 对象： key ： value

在这里插入图片描述

vue 开发者工具

在这里插入图片描述

对象写法

在这里插入图片描述

数组写法：数组嵌套对象

在这里插入图片描述

总结： class 、 style

在这里插入图片描述

总结

在这里插入图片描述

样式对象： key 不能乱写

在这里插入图片描述

vue2 条件渲染【19:35】

v-show

在这里插入图片描述

视觉隐藏 display ; none

在这里插入图片描述

动态赋值

在这里插入图片描述

v-if

在这里插入图片描述

结构没了

在这里插入图片描述

v-show 切换频繁、节点在，只是动态控制一下隐藏or显示

在这里插入图片描述

v-if

在这里插入图片描述

v-else-if 一组判断：效率高、可以略过

在这里插入图片描述

验证

在这里插入图片描述

v-else 不用写条件

在这里插入图片描述

v-if 、 v-if-else 、 v-else 中间不容许打断

在这里插入图片描述

打断后，都不奏效

在这里插入图片描述

同时展示

按住 alt 选中多行

在这里插入图片描述

div 容器：破坏结构；包了一层div，导致css选择器拿不到 h2

在这里插入图片描述

template 只能配合 v-if ：渲染的时候会脱掉

在这里插入图片描述

v-if 可能拿不到元素， v-show 一定可以拿到

vue2 列表渲染【17:29】

v-for

长度是几，就生成几个

在这里插入图片描述

插值语法：来自： data 、 computed 、 v-for=" p in persons "

在这里插入图片描述

展示一下

在这里插入图片描述

:key=“p.id”

学习 -> API -> key

在这里插入图片描述

加入 :key

在这里插入图片描述

错误：key=“1”

在这里插入图片描述

(a 是 item , b 索引 , c 未定义)

在这里插入图片描述

保证 :key 不一样

p.id

在这里插入图片描述

index

在这里插入图片描述

小括号可以省略

在这里插入图片描述

可以拿到 index

在这里插入图片描述

in 换成 of 都可以

在这里插入图片描述

对象遍历

在这里插入图片描述

(value, key)

在这里插入图片描述

字符串遍历

在这里插入图片描述

指定次数遍历：左边 number 值，右边索引值

在这里插入图片描述

vue2 key作用与原理【32:26】

在这里插入图片描述

数据库维护 id

在这里插入图片描述

前插

在这里插入图片描述

@click.once 指点一次

在这里插入图片描述

:key 会被 vue 用掉

在这里插入图片描述

添加文本

:key=index 出问题、效率低

在这里插入图片描述

:key=“p.id” 不出问题

在这里插入图片描述

什么都不写 == index ，都有问题

在这里插入图片描述

index 动画：破坏顺序的操作，输入类型的节点DOM，会出问题

在这里插入图片描述

虚拟DOM ： Vnodes 虚拟节点

在这里插入图片描述

用户输入真实 DOM

在这里插入图片描述

以上初始化结束，后面开始数据更新

在这里插入图片描述

不是直接生成，不然要虚拟DOM 干啥

在这里插入图片描述

虚拟DOM对比算法： diff 算法

在这里插入图片描述

结果

在这里插入图片描述

p.id 动画

在这里插入图片描述

复用

在这里插入图片描述

新生的节点只有两个

在这里插入图片描述

不写:key ：默认 index

在这里插入图片描述

vue2 列表过滤【26:52】

v-model ：输入到vue

在这里插入图片描述

watch:{KeyWord(a, b){} }

在这里插入图片描述

过滤

在这里插入图片描述

filter return 匹配的条件： watch 的箭头函数返回 vue

在这里插入图片描述

indexOf(newValue) != -1

在这里插入图片描述

filter 返回新数组：没拿到新数组，就不会影响页面变化

在这里插入图片描述

数据全没了：问题

在这里插入图片描述

数据丢失：解决

在这里插入图片描述

数据初始为空：问题

在这里插入图片描述

数据初始为空：解决方法1 复制粘贴

在这里插入图片描述

数据初始为空：解决2 —— 空字符串

在这里插入图片描述

数据初始为空：解决3 —— immediate:true

在这里插入图片描述

computed

#region #endregion 代码折叠

在这里插入图片描述

对比 watch ：输入 val 、没有返回值

在这里插入图片描述

computed ：只有 return ； filter 内返回 bool，外返回【计算属性】

在这里插入图片描述

计算属性：调用：一上来就调用、变动时调用

在这里插入图片描述

vue2 列表排序【12:08】

data.sortType

在这里插入图片描述

sort(前项a, 后项b)

在这里插入图片描述

原顺序 0 ：不进入排序，直接返回搜索结果

在这里插入图片描述

升序 return a-b

在这里插入图片描述

降序 return b-a

在这里插入图片描述

vue2 更新时的一个问题【14:04】

:key=“p.id” 追加输入

在这里插入图片描述

整个对象修改：失效，代码改了，但是 vue 没有检测到

在这里插入图片描述

先点按钮，再点 vue开发者工具

在这里插入图片描述

vue2 Vue监测数据的原理_对象【27:07】

在这里插入图片描述

对象

在这里插入图片描述

name 一改、 set() 就被调、 vue 重新解析模板

在这里插入图片描述

！！生成 DOC

在这里插入图片描述

定时器：开死了

在这里插入图片描述

get() set() 错误：地柜死循环

在这里插入图片描述

正确写法：

构造函数

在这里插入图片描述

设置 get() set()

在这里插入图片描述

vm._data = observer

在这里插入图片描述

vue 更完善的地方

数据代理

在这里插入图片描述

我们的：嵌套对象：没有 get() set() ; 但 vue 可以做到嵌套

在这里插入图片描述

vue 两层对象

在这里插入图片描述

vue 三层对象

在这里插入图片描述

vue数组

在这里插入图片描述

vue2 Vue.set()方法【24:37】

data.a 不能少， data.a.b 可以少b

在这里插入图片描述

注释掉不报错， student 对象没有 sex 属性，返回 undefined

在这里插入图片描述

undefined 没有定义，只是不显示在界面上，所以不报错

在这里插入图片描述

直接写从 data 中找不到，报错

在这里插入图片描述

vm._data.student.age = 'xx ’ 找到再加？没有get() set()

在这里插入图片描述

数据代理

在这里插入图片描述

vue 后续添加正确做法

vue

在这里插入图片描述

$vm

在这里插入图片描述

简写

在这里插入图片描述

按钮添加性别

在这里插入图片描述

age 有就展示、没有就不展示

在这里插入图片描述

局限增加不了data ，只能增加 data.student

在这里插入图片描述

vue api set()

在这里插入图片描述

vue2 Vue监测数据的原理_数组【18:56】

vue2 总结Vue监视数据【23:49】

vue2 收集表单数据【31:17】

vue2 过滤器【25:51】

vue2 v-text指令【04:59】

vue2 v-html指令【26:37】

vue2 v-cloak指令【14:14】

vue2 v-once指令【04:16】

vue2 v-pre指令【04:14】

vue2 自定义指令_函数式【17:52】

vue2 自定义指令_对象式【19:57】

vue2 自定义指令_总结【12:18】

vue2 引出生命周期【23:20】

vue2 生命周期_挂载流程【29:49】

vue2 生命周期_更新流程【09:26】

vue2 生命周期_销毁流程【19:20】

vue2 生命周期_总结【20:46】

vue2 对组件的理解【24:24】

vue2 非单文件组件【33:10】

vue2 组件的几个注意点【17:29】

vue2 组件的嵌套【12:29】

vue2 VueComponent构造函数【25:21】

vue2 Vue实例与组件实例【09:04】

vue2 一个重要的内置关系【28:26】

vue2 单文件组件【32:08】

vue2 创建Vue脚手架【13:47】

vue2 分析脚手架结构【27:35】

vue2 render函数【29:46】

vue2 修改默认配置【17:15】

vue2 ref属性【18:37】

vue2 props配置【30:21】

vue2 mixin混入【13:35】

vue2 插件【12:51】

vue2 scoped样式【14:55】

vue2 TodoList案例_静态【23:42】

vue2 TodoList案例_初始化列表【15:02】

vue2 TodoList案例_添加【28:45】

vue2 TodoList案例_勾选【21:59】

vue2 TodoList案例_删除【09:49】

vue2 TodoList案例_底部统计【14:51】

vue2 TodoList案例_底部交互【15:35】

vue2 TodoList案例_总结【10:20】

vue2 浏览器本地存储【22:35】

vue2 TodoList_本地存储【08:50】

vue2 组件自定义事件_绑定【24:57】

vue2 组件自定义事件_解绑【12:53】

vue2 组件自定义事件_总结【22:36】

vue2 TodoList案例_自定义事件【07:14】

vue2 全局事件总线1【22:02】

vue2 全局事件总线2【20:35】

vue2 TodoList案例_事件总线【08:00】

vue2 消息订阅与发布_pubsub【18:16】

vue2 TodoList案例_pubsub【05:42】

vue2 TodoList案例_编辑【25:52】

vue2 $nextTick【08:05】

vue2 动画效果【14:02】

vue2 过度效果【12:40】

vue2 多个元素过度【04:07】

vue2 集成第三方动画【04:53】

vue2 总结过度与动画【10:15】

vue2 配置代理_方式一【29:10】

vue2 配置代理_方式二【19:26】

vue2 github案例_静态组件【13:15】

vue2 github案例_列表展示【14:53】

vue2 github案例_完善案例【22:51】

vue2 vue-resource【06:50】

vue2 默认插槽【21:22】

vue2 具名插槽【12:49】

vue2 作用域插槽【22:00】

vue2 Vuex简介【13:39】

vue2 求和案例_纯vue版【11:45】

vue2 Vuex工作原理图【23:54】

vue2 搭建Vuex环境【26:40】

vue2 求和案例_vuex版【22:39】

vue2 vuex开发者工具的使用【23:21】

vue2 getters配置项【07:55】

vue2 mapState与mapGetters【25:20】

vue2 mapActions与mapMutations【17:48】

vue2 多组件共享数据【14:31】

vue2 vuex模块化+namespace_1【24:18】

vue2 vuex模块化+namespace_2【20:32】

vue2 路由的简介【23:07】

vue2 路由基本使用【26:50】

vue2 几个注意点【11:44】

vue2 嵌套路由【14:03】

vue2 路由的query参数【20:05】

vue2 命名路由【04:12】

vue2 路由的params参数【07:31】

vue2 路由的props配置【14:31】

vue2 router-link的replace属性【09:51】

vue2 编程式路由导航【18:11】

vue2 缓存路由组件【08:02】

vue2 两个新的生命周期钩子【09:58】

vue2 全局前置_路由守卫【20:32】

vue2 全局后置_路由守卫【17:03】

vue2 独享路由守卫【04:17】

vue2 组件内路由守卫【14:02】

vue2 history模式与hash模式【26:04】

vue2 element-ui基本使用【19:14】

vue2 element-ui按需引入【15:30】

vue3

vue3 vue3简介【13:07】

vue3 使用vue-cli创建工程【03:38】

vue3 使用vite创建工程【09:39】

vue3 分析工程结构【16:07】

vue3 安装开发者工具【03:48】

vue3 初识setup【22:33】

vue3 ref函数_处理基本类型【13:52】

vue3 ref函数_处理对象类型【15:42】

vue3 reactive函数【16:16】

vue3 回顾Vue2的响应式原理【11:24】

vue3 Vue3响应式原理_Proxy【28:44】

vue3 Vue3响应式原理_Reflect【13:11】

vue3 reactive对比ref【02:41】

vue3 setup的两个注意点【27:50】

vue3 computed计算属性【10:34】

vue3 watch监视ref定义的数据【10:59】

vue3 watch监视reactive定义的数据【21:50】

vue3 watch时value的问题【10:58】

vue3 watchEffect函数【09:02】

vue3 Vue3生命周期【22:26】

vue3 自定义hook【19:29】

vue3 toRef与toRefs【26:24】

vue3 shallowReactive与shallowRef【11:40】

vue3 readonly与shallowReadonly【09:58】

vue3 toRaw与markRaw【19:36】

vue3 customRef【27:42】

vue3 provide与inject【12:35】

vue3 响应式数据的判断【04:30】

vue3 CompositionAPI的优势【08:21】

vue3 Fragment组件【02:38】

vue3 Teleport组件【16:35】

vue3 Suspense组件【18:12】

vue3 Vue3中其他的改变【12:07】

本文链接：https://blog.csdn.net/zsssss333/article/details/130178613

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

艾美捷Epigentek DNA样品的超声能量处理方案-程序员宅基地

文章浏览阅读15次。空化气泡的大小和相应的空化能量可以通过调整完全标度的振幅水平来操纵和数字控制。通过强调超声技术中的更高通量处理和防止样品污染，Epigentek EpiSonic超声仪可以轻松集成到现有的实验室工作流程中，并且特别适合与表观遗传学和下一代应用的兼容性。Epigentek的EpiSonic已成为一种有效的剪切设备，用于在染色质免疫沉淀技术中制备染色质样品，以及用于下一代测序平台的DNA文库制备。该装置的经济性及其多重样品的能力使其成为每个实验室拥有的经济高效的工具，而不仅仅是核心设施。

11、合宙Air模块Luat开发：通过http协议获取天气信息_合宙获取天气-程序员宅基地

文章浏览阅读4.2k次，点赞3次，收藏14次。目录点击这里查看所有博文本系列博客，理论上适用于合宙的Air202、Air268、Air720x、Air720S以及最近发布的Air720U（我还没拿到样机，应该也能支持）。先不管支不支持，如果你用的是合宙的模块，那都不妨一试，也许会有意外收获。我使用的是Air720SL模块，如果在其他模块上不能用，那就是底层core固件暂时还没有支持，这里的代码是没有问题的。例程仅供参考！..._合宙获取天气

EasyMesh和802.11s对比-程序员宅基地

文章浏览阅读7.7k次，点赞2次，收藏41次。1 关于meshMesh的意思是网状物，以前读书的时候，在自动化领域有传感器自组网，zigbee、蓝牙等无线方式实现各个网络节点消息通信，通过各种算法，保证整个网络中所有节点信息能经过多跳最终传递到目的地，用于数据采集。十多年过去了，在无线路由器领域又把这个mesh概念翻炒了一下，各大品牌都推出了mesh路由器，大多数是3个为一组，实现在面积较大的住宅里，增强wifi覆盖范围，智能在多热点之间切换，提升上网体验。因为节点基本上在3个以内，所以mesh的算法不必太复杂，组网形式比较简单。各厂家都自定义了组_802.11s

线程的几种状态_线程状态-程序员宅基地

文章浏览阅读5.2k次，点赞8次，收藏21次。线程的几种状态_线程状态

stack的常见用法详解_stack函数用法-程序员宅基地

文章浏览阅读4.2w次，点赞124次，收藏688次。stack翻译为栈，是STL中实现的一个后进先出的容器。要使用 stack，应先添加头文件include<stack>，并在头文件下面加上“ using namespacestd;"1. stack的定义其定义的写法和其他STL容器相同, typename可以任意基本数据类型或容器：stack<typename> name;2. stack容器内元素的访问..._stack函数用法

2018.11.16javascript课上随笔（DOM）-程序员宅基地

文章浏览阅读71次。<li> <a href = "“#”>-</a></li><li>子节点：文本节点（回车），元素节点，文本节点。不同节点树：　　节点（各种类型节点）childNodes:返回子节点的所有子节点的集合，包含任何类型、元素节点（元素类型节点）：child。node.getAttribute(at...

随便推点

layui.extend的一点知识第三方模块base 路径_layui extend-程序员宅基地

文章浏览阅读3.4k次。//config的设置是全局的layui.config({ base: '/res/js/' //假设这是你存放拓展模块的根目录}).extend({ //设定模块别名 mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录}); //你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）layui.exten_layui extend

5G云计算：5G网络的分层思想_5g分层结构-程序员宅基地

文章浏览阅读3.2k次，点赞6次，收藏13次。分层思想分层思想分层思想-1分层思想-2分层思想-2OSI七层参考模型物理层和数据链路层物理层数据链路层网络层传输层会话层表示层应用层OSI七层模型的分层结构TCP/IP协议族的组成数据封装过程数据解封装过程PDU设备与层的对应关系各层通信分层思想分层思想-1在现实生活种，我们在喝牛奶时，未必了解他的生产过程，我们所接触的或许只是从超时购买牛奶。分层思想-2平时我们在网络时也未必知道数据的传输过程我们的所考虑的就是可以传就可以，不用管他时怎么传输的分层思想-2将复杂的流程分解为几个功能_5g分层结构