vue2知识点

最新推荐文章于 2025-06-27 14:34:37 发布

原创最新推荐文章于 2025-06-27 14:34:37 发布 · 885 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

Xxxu2

关注

标签

#vue.js #javascript #前端

分类前端开发

1.vue基础

开发环境搭建

1.下载vuejs并引入[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uAb9ecN1-1673095816594)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213142600334.png)]

2.安装vue.js devtools扩展程序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e93COraj-1673095816595)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213142527863.png)]

3.引入vue.js并且控制台查看是否引入成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P7bMP2Wg-1673095816595)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213143624994.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4eob0uc3-1673095816595)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213143539338.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbWn0lLj-1673095816596)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213143606549.png)]

Hello小案例

容器和vue实例是一对一的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RVIfhpbi-1673095816596)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213152235839.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uuJ2udHK-1673095816596)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213150511075.png)]

<body>
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>

    <script>
        //创建vue实例
        const x = new Vue({
            // el用来指定为哪个容器服务
            el: '#root',
            data: {
                name: 'xxxu'
            }
        });

    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WSPKhF3a-1673095816596)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213151445352.png)]

注意区分js表达式和语句

表达式是一种特殊的语句

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KnH3bJKE-1673095816597)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213151654352.png)]

模板代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afeG37E9-1673095816597)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213161313929.png)]

//模板代码举例
<h3>你好, {{name}}</h3>
<a v-bind:href='......'>

数据绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6nB7nxX8-1673095816597)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213162855277.png)]

v-model 只能用于表单元素

<div id="root">
        单向数据绑定: <input type="text" v-bind:value="name">
        双向数据绑定:<input type="text" v-model:value="name">
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hx2VTaoB-1673095816597)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213162948440.png)]

el和data两种写法

el是用来指明Vue挂载目标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qCC8F2OJ-1673095816598)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213164635794.png)]

el两种写法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q5U7akml-1673095816598)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213164230664.png)]

data两种写法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YUODfHo8-1673095816598)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213164602489.png)]

MVVM模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Td08jZH4-1673095816598)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213170019766.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fG2lP17F-1673095816598)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213170047306.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOHJAeDl-1673095816598)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213165339304.png)]

数据代理

Object.defineProperty方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AlowRGUr-1673095816599)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214075110537.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQ0Fbhg6-1673095816599)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221213171854689.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T07eQAJH-1673095816599)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214080621784.png)]

什么是数据代理

就是通过一个对象操控另一个对象的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAUVxxRt-1673095816599)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214081136274.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2c9c7w0L-1673095816599)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214081038925.png)]

vue中的数据代理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YqcudIjw-1673095816600)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215100353526.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFU2AzdZ-1673095816600)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214093905777.png)]

事件处理

事件处理基本使用

一般使用@xxx 绑定事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F4WFDXNe-1673095816600)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214100728124.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HIXGFV6s-1673095816600)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214095349019.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pPqiYSdn-1673095816600)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214100714540.png)]

事件修饰符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kTP29ohM-1673095816601)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214141931930.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NP3PY6aP-1673095816601)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214142002912.png)]

键盘事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VsoG76Kj-1673095816601)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214144006454.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C24LCNPd-1673095816601)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214144116699.png)]

事件总结

事件修饰符可以连写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ubCg5IRu-1673095816601)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214144421230.png)]

事件可以设置同时触发

同时按下ctrl和y才触发

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r50hj8z5-1673095816602)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214144603965.png)]

事件重要记忆部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BCE4QSnu-1673095816602)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214144651102.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sPlsZpFI-1673095816602)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214144715964.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v5oqX747-1673095816602)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214144722760.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1jqpr3VT-1673095816602)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214144730386.png)]

姓名小案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B1HG03qH-1673095816602)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214151433604.png)]

计算属性 computed

一句话总结：计算属性仍是属性,不要加()

computed和get() set(value)绑定使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eCF2rUQK-1673095816603)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214153941360.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qhVLJ72m-1673095816603)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214154122167.png)]

计算属性简写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DVgq25Wf-1673095816603)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214155921670.png)]

监视 watch

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mOry1wNn-1673095816603)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214162933381.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9aYLgQEt-1673095816603)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214163027802.png)]

深度监视

deep:true 开启深度监视

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CutrBNJP-1673095816604)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214165129463.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2YuSHzb6-1673095816604)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214165227639.png)]

监视简写

只有监视里面只有handler时候,才可以用简写[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xRmJXp3m-1673095816604)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214165847005.png)]

watch和computed区别

记住箭头函数的特点：本身不存在this，但是可以通过调用上下域中的this供自己使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jI03cBJy-1673095816604)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214171837275.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-93leshbE-1673095816604)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214171629654.png)]

绑定class样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1jYBSS8G-1673095816605)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214175609203.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7BeHD7LV-1673095816605)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214174849600.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UgfB1eyV-1673095816605)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214175028688.png)]

绑定style样式(了解)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5HFhhTrn-1673095816605)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221214175636385.png)]

条件渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IhJRCN4A-1673095816605)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215080151793.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q2ePayGd-1673095816605)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215080318403.png)]

列表渲染

基本列表

v-for

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-StzssWD5-1673095816606)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215082300820.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKuZNRrN-1673095816606)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215082340917.png)]

key的作用与原理

key就是用来标识的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OrOypVTb-1673095816606)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215085745646.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VrEpIMUm-1673095816606)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215085903510.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rg00Siqo-1673095816606)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215085922580.png)]

列表过滤和排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-24Y25X3Z-1673095816607)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215094757384.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaaVRLha-1673095816607)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215094724252.png)]

更新时的一个问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JuAKnF3A-1673095816607)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215100118242.png)]

Vue.set的使用

只能给vue_data里的对象加

数据代理是将数据移交给某个代理类来进行管理和操作，与直接操作该数据的一摸一样的

这个是用在控制台的命令,添加的是响应式数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OleyMgn1-1673095816607)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215110650330.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iB8I09mJ-1673095816607)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215105930536.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wp9vPyBE-1673095816607)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215110217341.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XwYXt8Vt-1673095816608)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215110205888.png)]

总结Vue监测数据

就是说vm检测一定要通过get和set方法,不然检测不到更改无法渲染模板(浏览器内容)

不管对象在哪儿，数组里也行，改对象属性就能被检测到，但是数组没有属性，检测不到得用方法修改，所以不是下标问题，是看通过下标拿到了什么类型的数据

每个数据经过数据代理的过程就叫数据劫持

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GqFNFvvQ-1673095816608)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215115219752.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWDJ7xpp-1673095816608)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215115133625.png)]

收集表单数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kq1jZlys-1673095816608)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215143151172.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-glBeAydz-1673095816608)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215143414705.png)]

过滤器(选用)

内置指令

指令复习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DrRygQIJ-1673095816609)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215143732451.png)]

v-text指令

不支持结构解析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NXqpTQvV-1673095816609)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215144510065.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XnzvRKgn-1673095816609)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215144534353.png)]

v-html指令

v-html支持结构解析(里面可以写html和css代码)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SeCNOV2v-1673095816609)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215153010766.png)]

v-cloak指令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5bV39BSH-1673095816609)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215155530772.png)]

v-once指令

v-once 节点只响应一次

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQxPvZV5-1673095816610)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215155959680.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-onVTnTbI-1673095816610)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215160032272.png)]

v-pre指令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z4HS3O15-1673095816610)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215160506322.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BtFZj7Mt-1673095816610)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215160535981.png)]

自定义指令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LE9h7DbD-1673095816610)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215164659166.png)]

element是绑定的哪个节点

binding是绑定的指令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9mRhcXnS-1673095816611)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215162637853.png)]

自定义绑定

第一次绑定好了但是dom还没放上页面点击n+1模板就解析才放在dom上就这么简单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jw80avK5-1673095816611)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215164533766.png)]

自定义指令总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5uJmLDa-1673095816611)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215170424915.png)]

生命周期

引出生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-anS8epMf-1673095816611)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215172957931.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HvZv20NL-1673095816611)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215172749521.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dn1GtjFv-1673095816612)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221215172948732.png)]

分析生命周期

挂载流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wdzsEUHG-1673095816612)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217081001142.png)]

更新流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O770ua6o-1673095816612)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217081923334.png)]

销毁流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TfgJWVCX-1673095816612)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217084834626.png)]

生命周期-总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgZ7A8rS-1673095816612)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217090302958.png)]

2.Vue组件化编程

组件化的理解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KP3VNtQT-1673095816613)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217093118714.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UcIYnuJW-1673095816613)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217092750956.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gbVKjHC6-1673095816613)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217091251869.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AJahqsEk-1673095816613)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217092614596.png)]

非单文件组件

组件基本使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aeVnqmQa-1673095816613)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217100210622.png)]

使用组件分三个步骤

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvrImcha-1673095816614)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217100406248.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r97RE7CV-1673095816614)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217100432286.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nc5NccJV-1673095816614)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217100452129.png)]

1.创建组件 extend
2.注册组件  components 
3.编写组件标签 <组件名></组件名>

非单文件组件 == 一个文件包含n个组件

单文件组件 == 一个文件只包含1个组件

全局注册参数:第二个参数就是你的组件，第一个是名字，所以要加上引号

组件几个注意点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r1YHlMRM-1673095816614)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217104543183.png)]

组件的嵌套

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6EyuHzo-1673095816614)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217110731699.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jhPSkXxh-1673095816614)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217110613420.png)]

VueComponent构造函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L38XiZ10-1673095816615)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217114038077.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-62eQH0kP-1673095816615)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217113409477.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwT49jDg-1673095816615)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217113848587.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rfnx7jAN-1673095816616)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217114457100.png)]

一个重要的内置关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qLktmDWy-1673095816616)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217150020706.png)]

讲这个的目的大概就是让你知道 vm能调用的方法组件也能调用并且告诉你了内部实现原理

原型复习

复习了一点点,建议重新找视频巩固

vm和vc的区别:

1.vm可以用el: 指定绑定的容器,vdc不可以,只能跟着vm

2.vc里data只能用函数形式定义

就把这个关系当成类的继承就行

Vue和VC的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BWbMZg2r-1673095816616)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217145723096.png)]

单文件组件

<v + tab 键快速生成单文件vue文件格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u3yfSdz2-1673095816616)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217150449207.png)]

单组件写法:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IXGVqynf-1673095816617)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217152009359.png)]

app组件:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4UmaU4e6-1673095816617)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217153402940.png)]

main.js:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NtXy0rxf-1673095816617)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217153316586.png)]

3.vue-cli 脚手架

脚手架使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tHS0mg9u-1673095816617)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217155657622.png)]

1.下载镜像切换为npm淘宝

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxdznDfh-1673095816618)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217160035763.png)]

2.全局安装@vue/cli

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Lyxlzdb-1673095816618)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217160226572.png)]

3.cd Desktop 切换到桌面安装

vue create vue_test 命名为vue_test

4.安装成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IW6E8EnF-1673095816618)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217160852868.png)]

5.编译启动npm

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o8hs9tfO-1673095816618)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217161024135.png)]

6.浏览器输入localhost:8080查看helloworld

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1vFxUTKA-1673095816619)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217161228646.png)]

在VScode里输入npm run serve 启动服务

分析脚手架结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JIH5tOda-1673095816619)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217162810044.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1qSjNBPm-1673095816619)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217165022725.png)]

render函数

因为Vue默认引用的是残缺版Vue,不包含模板解析器

所以需要render函数来解析模板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CiEn1vST-1673095816619)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217172035242.png)]

这个render函数写一遍就行了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pa2C9AZm-1673095816619)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217172111392.png)]

修改默认配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-da8SPdjs-1673095816619)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217175006497.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eri5ZuR7-1673095816620)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217175026287.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CwCJvdYx-1673095816620)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217175038809.png)]

npx vue inspect > output.js 查看webpack配置

语法检查关闭:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZOaetWzQ-1673095816620)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221217174850535.png)]

ref属性

ref就相当于替代getElementById

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3um2eXf-1673095816620)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218080244437.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BlXOZSZ3-1673095816620)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218080335563.png)]

props配置

props的数据不能改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jbw3Ek5e-1673095816621)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218082540104.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u5NHgIMy-1673095816621)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218082132080.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AF87LWxr-1673095816621)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218082042205.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53sBkdal-1673095816621)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218082106225.png)]

mixin混入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wm8F1U0S-1673095816621)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218084713456.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMpXsHOW-1673095816622)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218084808598.png)]

插件

Vue的插件就是一个对象里面的一个install特殊函数方法，该函数里面的参数第一个是Vue构造函数插件相当于游戏外挂要提前引入main里面并且使用Vue.use（函数方法使用该插件）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lhcc2qn7-1673095816622)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218090120761.png)]

scoped样式

scpoed解决style标签类名重复问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-av9A5KD8-1673095816622)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218091245390.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zx3Pxejc-1673095816622)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218091403480.png)]

TodoList案例

组件化编码流程(通用)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OLxHylCJ-1673095816622)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218093241441.png)]

1.实现静态页面’

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8MvL142-1673095816623)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218100403941.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ccSpYOz-1673095816623)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218100829565.png)]

Vue调试工具查看静态页面写入成功

2.展示动态数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cMWyhMoY-1673095816623)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218111451055.png)]

TodoList案例总结

组件化编码流程：

(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

1).一个组件在用：放在组件自身即可。

2). 一些组件在用：放在他们共同的父组件上（状态提升）。

(3).实现交互：从绑定事件开始。
props适用于：

(1).父组件 ==> 子组件通信

(2).子组件 ==> 父组件通信（要求父先给子一个函数,通过传参）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

浏览器本地存储

参考pink老师的

组件自定义事件

绑定

v-on就是@的意思

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhIJctxU-1673095816623)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218161012080.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BXdsD7xy-1673095816623)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218151052671.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BesDd0BB-1673095816624)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218151744015.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xPbMXyoK-1673095816624)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218151757980.png)]

解绑

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vOZ5DEmU-1673095816624)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218152847152.png)]

总结

普通函数的this指向其调用者，箭头函数的this指向其拥有者

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中：
```
<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件this.$off('atguigu')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NATqAIMG-1673095816624)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218160453375.png)]

全局事件总线

原理图

就是哪个组件要收数据,就在x留个回调函数

哪个组件要传数据,就触发接收方的回调函数(在x上)

往原型对象里面加，所有的都能访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YQVFSY4f-1673095816624)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218162541416.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UuZf0z6x-1673095816625)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218164531820.png)]

哪个组件要数据就给哪个组件绑定事件哪个组件传数据就在那个组件调用方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wDHsJ2j8-1673095816625)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218170857887.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JzFrLWDf-1673095816625)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218170730993.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51K3BfIG-1673095816625)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218170614889.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oxH17HSk-1673095816625)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218171546035.png)]

消息订阅与发布

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Aknhg9C1-1673095816626)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218174233294.png)]

安装pubsub-js包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0tNGsLF1-1673095816626)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218172432999.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZqgtEk4-1673095816626)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218173720885.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UarBh5Hl-1673095816626)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221218174124221.png)]

动画效果

中间课程跳过了,跳到总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rD4k0bLU-1673095816626)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219145633593.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtPfJ5eh-1673095816627)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219145641373.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hObaTI9m-1673095816627)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219144436196.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t6xaexyk-1673095816627)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219144600052.png)]

4.Vue中的AJAX

AJAX复习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXaKTKju-1673095816627)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219151658438.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lCwOkU46-1673095816627)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219150352583.png)]

安装axios

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ctocW5gS-1673095816628)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219150440097.png)]

配置代理

开启代理服务器-方式一

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-52QQ6DOB-1673095816628)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219160642858.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cTmEJ2xh-1673095816628)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219152842180.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IKqVE16w-1673095816628)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219152614296.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Lo3Cvp4-1673095816628)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219152632940.png)]

方式二(常用)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5INfPVxl-1673095816629)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219160824077.png)]

github案例_静态组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-09W4hO7J-1673095816629)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219163446664.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YC8b3mK6-1673095816629)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219165559258.png)]

插槽 slot

默认插槽

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YPm3m2N5-1673095816629)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219172038783.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZXRrbVfC-1673095816629)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219171955346.png)]

具名插槽

现在变成v-slot了,要放在template标签里

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GDk6u9cN-1673095816630)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219173519140.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQVYrOUD-1673095816630)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219173858500.png)]

作用域插槽

难以理解跳过了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opEvsnri-1673095816630)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219174131211.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eurDkYJm-1673095816630)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221219174142311.png)]

5.vuex

什么是vuex

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lk4RRolU-1673095816630)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220075320854.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wo2WiVNd-1673095816631)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220075632136.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kwfLDfd3-1673095816631)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220075752981.png)]

vuex工作原理图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b5y01O4O-1673095816631)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220091546027.png)]

在脚手架中会先扫描所有的import按照编写顺序进行编译

store是大老板，Action是前台，Mutation是服务人员，state是仓库管理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cN3lRSTe-1673095816631)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220084422210.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tS7pqJaN-1673095816632)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220082529480.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zaePwoZA-1673095816632)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220084303380.png)]

搭建vuex环境

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1XO1KFeO-1673095816632)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220091557976.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JrgR9iWR-1673095816632)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220091610552.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pITOQjXA-1673095816632)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220084623921.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-89aJpxac-1673095816633)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220084718836.png)]

1.编写store文件,准备store三件套

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LhkHyiwi-1673095816633)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220090128054.png)]

vuex基本使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IhSUM77j-1673095816633)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220103700802.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r9yq76rh-1673095816633)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220103711415.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZqHv6Rt-1673095816633)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220103633898.png)]

getters配置项

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ANguETa-1673095816634)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220104639612.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ywE4kPl-1673095816634)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220104258868.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkbzOwLD-1673095816634)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220104528364.png)]

4个map使用方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0krbz4Zl-1673095816634)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220110921932.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kSMAKQKA-1673095816634)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220110322991.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VbrufOLU-1673095816635)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220105911234.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8enT2dYO-1673095816635)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220110709997.png)]

MapGetters

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RHpGXZ4N-1673095816635)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220110830740.png)]

mapActions和mapMutations

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-riCvmPwf-1673095816635)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220113018925.png)]

多组件共享数据

弹幕说没什么用,跳过了

vuex模块化+命名空间

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gymuqGos-1673095816635)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220144046011.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-56OHIdQ7-1673095816636)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220144102349.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gq5frwOy-1673095816636)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220143656178.png)]

6.vue-router

路由简介

路由路由，根据路径展示组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4BfZ0K5r-1673095816636)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220151147726.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TUVvZ8JW-1673095816636)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220151405321.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hRQkZqQP-1673095816636)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220150102318.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Toy8qhKK-1673095816637)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220150927812.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3P3L8c4h-1673095816637)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220150858699.png)]

路由基本使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Iejfiz6z-1673095816637)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220153038781.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q2TN0ShB-1673095816637)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220161021216.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M3Xev8qB-1673095816637)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220161028198.png)]

几个注意点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UYvlTou5-1673095816638)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220161937514.png)]

嵌套路由

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3at0zcQ-1673095816638)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220163217734.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-28Jx4hcp-1673095816638)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220162845578.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CjGWCdjB-1673095816638)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220163138591.png)]

路由传参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-etWOd3OZ-1673095816638)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220170001743.png)]

命名路由

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DxFUkhLg-1673095816639)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220170409826.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r2iVu9JT-1673095816639)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220170427669.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zcDxv2G-1673095816639)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220170200987.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-95WqJZ9f-1673095816639)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220170236061.png)]

路由的params参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i4v2zVP7-1673095816639)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220171009262.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rHgIZlUM-1673095816640)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220171044381.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rju2M1xL-1673095816640)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220171052245.png)]

路由的props配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V4ilD7mF-1673095816640)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220172253805.png)]

router-link的replace属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OizfRm0R-1673095816640)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220173929218.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGvvi8Rc-1673095816640)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220174013150.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JNkd6nMr-1673095816641)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220173907347.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzDkv6o5-1673095816641)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221220173915797.png)]

编程式导航

就是不借助routerlink导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HZzt7KFE-1673095816641)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221080134607.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oHgNpczT-1673095816641)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221080126461.png)]

缓存路由组件

因为路由组件切换会销毁组件,所以有时候需要保存组件输入内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CLWmWESS-1673095816641)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221080919067.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xKDdFITY-1673095816642)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221080858215.png)]

两个新生命周期钩子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VlMYsZKz-1673095816642)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221081820254.png)]

还有一个钩子nextTick：下一次dom更新完成后，在执行相关回调。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A1ToBuxu-1673095816642)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221081746957.png)]

路由守卫

前置和后置路由守卫

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8oMXZewG-1673095816642)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221090057430.png)]

1.前置路由守卫

像“路由门卫”：你从哪来，你到哪去，告诉你下一步怎么走

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zjAjbbnF-1673095816642)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221084802679.png)]

2.后置路由守卫

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Op0ISqWK-1673095816643)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221090029932.png)]

独享路由守卫

就是某一个路由所独享的守卫

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHM1qSox-1673095816643)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221090523373.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IvtD87U5-1673095816643)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221090355197.png)]

组件内路由守卫

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bIczZDek-1673095816643)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221091505854.png)]

就是通过路由规则时候,进入和离开组件时,设置调用一个路由守卫

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YbSXHtOi-1673095816643)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221090823663.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pr1Dg4Em-1673095816644)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221091522853.png)]

history和hash模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-28BGx02f-1673095816644)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221095247448.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5NxSecr-1673095816644)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221095308324.png)]

1.打包项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tTG7vGMN-1673095816644)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221093513501.png)]

2.部署在服务器上

需要会nodejs和express框架,

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lfPhhnEK-1673095816644)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221094120171.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BEmtWHYW-1673095816645)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221094133738.png)]

7.Vue UI组件库

移动端常用UI组件库

Vant https://youzan.github.io/vant
Cube UI https://didi.github.io/cube-ui
Mint UI http://mint-ui.github.io

PC端常用UI组件库

Element UI https://element.eleme.cn
IView UI https://www.iviewui.com

element-ui基本使用

1.[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iacXfUwn-1673095816645)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221100800628.png)]

2.main.js引入element[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zRBcC5Ni-1673095816645)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221100827845.png)]

3.复制黏贴代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OexfOGji-1673095816645)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221100902496.png)]

4.修改组件参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yVXCFJGy-1673095816645)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221101113539.png)]

element-ui按需引用

看官方文档就行了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oPAYo3Rl-1673095816646)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221103512760.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8odb63pF-1673095816646)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221221103719291.png)]