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

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

智能推荐

前端开发之vue-grid-layout的使用和实例-程序员宅基地

文章浏览阅读1.1w次，点赞7次，收藏34次。vue-grid-layout的使用、实例、遇到的问题和解决方案_vue-grid-layout

Power Apps-上传附件控件_powerapps点击按钮上传附件-程序员宅基地

文章浏览阅读218次。然后连接一个数据源，就会在下面自动产生一个添加附件的组件。把这个控件复制粘贴到页面里，就可以单独使用来上传了。插入一个“编辑”窗体。_powerapps点击按钮上传附件

C++ 面向对象（Object-Oriented）的特征 & 构造函数& 析构函数_"object(cnofd[\"ofdrender\"])十条"-程序员宅基地

文章浏览阅读264次。(1) Abstraction (抽象)(2) Polymorphism (多态)(3) Inheritance (继承)(4) Encapsulation (封装)_"object(cnofd[\"ofdrender\"])十条"

修改node_modules源码，并保存，使用patch-package打补丁，git提交代码后，所有人可以用到修改后的_修改 node_modules-程序员宅基地

文章浏览阅读133次。删除node_modules，重新npm install看是否成功。在 package.json 文件中的 scripts 中加入。修改你的第三方库的bug等。然后目录会多出一个目录文件。_修改 node_modules

【】kali--password:su的 Authentication failure问题，&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure-程序员宅基地

文章浏览阅读883次。【代码】【】kali--password:su的 Authentication failure问题，&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure

整理5个优秀的微信小程序开源项目_微信小程序开源模板-程序员宅基地

文章浏览阅读1w次，点赞13次，收藏97次。整理5个优秀的微信小程序开源项目。收集了微信小程序开发过程中会使用到的资料、问题以及第三方组件库。_微信小程序开源模板

随便推点

Centos7最简搭建NFS服务器_centos7 搭建nfs server-程序员宅基地

文章浏览阅读128次。Centos7最简搭建NFS服务器_centos7 搭建nfs server

Springboot整合Mybatis-Plus使用总结(mybatis 坑补充)_mybaitis-plus ruledataobjectattributemapper' and '-程序员宅基地

文章浏览阅读1.2k次，点赞2次，收藏3次。前言mybatis在持久层框架中还是比较火的，一般项目都是基于ssm。虽然mybatis可以直接在xml中通过SQL语句操作数据库，很是灵活。但正其操作都要通过SQL语句进行，就必须写大量的xml文件，很是麻烦。mybatis-plus就很好的解决了这个问题。..._mybaitis-plus ruledataobjectattributemapper' and 'com.picc.rule.management.d

EECE 1080C / Programming for ECESummer 2022 Laboratory 4: Global Functions Practice_eece1080c-程序员宅基地

文章浏览阅读325次。EECE 1080C / Programming for ECESummer 2022Laboratory 4: Global Functions PracticePlagiarism will not be tolerated:Topics covered:function creation and call statements (emphasis on global functions)Objective:To practice program development b_eece1080c

洛谷p4777 【模板】扩展中国剩余定理-程序员宅基地

文章浏览阅读53次。被同机房早就1年前就学过的东西我现在才学，wtcl。设要求的数为$x$。设当前处理到第$k$个同余式，设$M = LCM ^ {k - 1} _ {i - 1}$ ，前$k - 1$个的通解就是$x + i * M$。那么其实第$k$个来说，其实就是求一个$y$使得$x + y * M ≡ a_k(mod b_k)$转化一下就是\(y * M ...

android 退出应用没有走ondestory方法,[Android基础论]为何Activity退出之后，系统没有调用onDestroy方法？...-程序员宅基地

文章浏览阅读1.3k次。首先，问题是如何出现的？晚上复查代码，发现一个activity没有调用自己的ondestroy方法我表示非常的费解，于是我检查了下代码。发现再finish代码之后接了如下代码finish();System.exit(0);//这就是罪魁祸首为什么这样写会出现问题System.exit(0);////看一下函数的原型public static void exit (int code)//Added ..._android 手动杀死app,activity不执行ondestroy

SylixOS快问快答_select函数导致堆栈溢出 sylixos-程序员宅基地

文章浏览阅读894次。Q: SylixOS 版权是什么形式, 是否分为<开发版税>和<运行时版税>.A: SylixOS 是开源并免费的操作系统, 支持 BSD/GPL 协议(GPL 版本暂未确定). 没有任何的运行时版税. 您可以用她来做任何您喜欢做的项目. 也可以修改 SylixOS 的源代码, 不需要支付任何费用. 当然笔者希望您可以将使用 SylixOS 开发的项目 (不需要开源)或对 SylixOS 源码的修改及时告知笔者.需要指出: SylixOS 本身仅是笔者用来提升自己水平而开发的_select函数导致堆栈溢出 sylixos