vue

vue学习笔记

第一天

什么是vue

创建实例Vue

插值表达式

响应式特性

vue开发者工具

如果在edge下载插件直接获取扩展，前提是打开左下的开发者模式，如果出现下载失败，可能是服务器问题：

解决办法：

首先来到C:\Windows\System32\drivers\etc，用记事本打开hosts文件（没错，在2202年还是要用经典hosts来解决）

最下面添加：

117.28.245.88 edge.microsoft.com #Edge翻译
117.28.245.88 msedgeextensions.sf.tlu.dl.delivery.mp.microsoft.com #Edge商店扩展

最后Win+R打开cmd输入ipconfig /flushdns刷新一下dns就完成了

如果不行试试这个：

131.253.33.219 edge.microsoft.com #Edge翻译
131.253.33.219 msedgeextensions.sf.tlu.dl.delivery.mp.microsoft.com #Edge商店扩展

---

附加：

如果你登录微软账号也有问题可以在hosts里加：

117.28.245.88 logincdn.msauth.net #微软账户
117.28.245.88 login.live.com #微软账户
117.28.245.88 account.live.com #微软账户
117.28.245.88 acctcdn.msauth.net #微软账户

如果不行试试这个：

131.253.33.219 logincdn.msauth.net #微软账户
131.253.33.219 login.live.com #微软账户
131.253.33.219 account.live.com #微软账户
131.253.33.219 acctcdn.msauth.net #微软账户

Q：改hosts提示没有权限

A：搜索一下hosts权限相关问题都有解决办法，这里分享个最简单的办法：

1. 复制hosts文件到桌面

2. 到桌面右键打开方式-记事本-把文章里的链接复制进去-保存

3. 删除原hosts文件

4. 把桌面hosts文件粘贴进去

   下载好插件运行发现如下错误：

• 大致意思 : 在此页面上检测到Vue.js。Devtools检查不可用，因为它处于生产模式或被作者明确禁用。
  • 原因是vue的mini版的是默认关闭调试的, 所以才不能用插件进行调试

解决方法：

第一种 : 直接在代码中加入允许调试代码 Vue.config.devtools = true;

第二种 : 直接引入标准版的vue : https://vuejs.org/js/vue.js

文字只能使用双引号，我还以为没搞好，搞了半天

出现这个并且调试栏有vue则成功

总结以下：

必须使用

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>

不能使用：

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

至此，edge和chrome都设置成功

Vue指令

1.v-html

v-html=表达式

类似innerhtml

2.v-show和v-if

3.v-else和v-else-if

4.v-on

v-on:可以整体替换为@

methods中 this始终指向当前vue实例对象

5.v-on调用传参

6.v-bind

可以简写v-bind:src=‘ ’ 成 :src=‘ ’（引号需要保留）

案例一：波仔学习之旅（图片切换）

7.v-for

key:给列表添加唯一标识，便于Vue进行列表项的正常排列

v-for的默认行为会尝试原地修改元素（就地复用）

案例二小黑书架（删除元素）

8.v-model

作用：给表单元素使用，双向数据绑定，可以快捷获取或设置表单元素内容 ；

数据变化，视图自动更新；视图变化，数据自动更新；

综合案例小黑记事本

1.三种居中方法

在父元素使用flex，消除子元素间隔，justify-content:center居中

margin：auto（定宽，块状）

text-aglin：center

第二天

指令的修饰符

v-bind操作class

案例：京东秒杀tab高亮

v-bind操作style

有-的属性要么引号引起来，要么改成驼峰

值用‘ ’

案例：动态设置进度条

一个类增加/删除用对象，多个用数组

v-model应用于其他表单元素

计算属性

reduce进行数组求和（（sum,item）=>sum+item.num,0)

computed和methods区别

计算属性的完整写法

slice截取数组

成绩案例

保留小数toFixed（1）

border-collapse边框合并

watch监视器

发送请求与得到值

防抖优化：延迟执行，避免多次发送请求，等用户输完再发送请求；

不具备响应式特性的数据可以不写到data中

完整写法：

深度监视对该对象所有属性都监视

水果购物车案例

细写

第三天

生命周期和生命周期的四个阶段

vue生命周期函数（钩子函数）

综合案例小黑记账清单

在这里发送请求获取数据使用了(methods)：

async getList(){
  const res = await axio.get('url',{
  params:{
  参数：‘’
  }
  })
  this.list=res.data.data//需要对页面重新渲染，把get的值给list
}

• async/await 更加优雅的异步编程的写法
  1.它是消灭异步回调的终极武器
  2.它是同步语法，也就是用同步的写法写异步的代码

发送添加请求(methods中)：

async add(){
  const res = await axio.post('url',{
   参数：‘’
  })
  this.getList()
}//就是先上传自己添加数据，而后请求数据并给list渲染页面

删除数据使用了：

async del（id）{
  const res = await axios.delete(`url后面改成${id}`)//动态设置使用`${}`
  this.getList
  }

饼图渲染

echarts查官方文档进行设置饼图

用shuzu.map（item=>({value:item.value,name:item.name})),由旧数组获得有新属性的新数组

工程化开发和脚手架Vue CLI

项目目录介绍和运行流程

由npm run serve =>main.js

组件化开发和根组件

普通组件的注册-普通组件

普通组件的注册-全局注册

小兔鲜案例

先拆分组件模块搭架子

实现结构和样式

ctrl+k ctrl+0全部折叠

ctrl+k ctrl+j全部展开

第四天

scope样式冲突

data是一个函数

组件通信

父传子：

子组件标签中写 ：子数据项=‘父数据’

props：写传的数据类型

然后子组件就可以使用

props详解

子传父：

在子组件中绑定v-model、@click=’函数’，然后在methods中创建一个函数，函数中使用this.$emit(‘add’,v-model绑定数据)，在父组件中的子组件标签绑定 @事件名=‘’函数‘’，该函数能接收数据

这里@可以理解为前面变化，启动后面函数，即监听；this.$emit(‘add’,v-model绑定数据)，理解add启动v-model给父组件add监听绑定的函数；

本地持久化存储：

非父子通信

事件总线

一对多

创建事件总线

provide&inject

跨层级访问数据

通常包成复杂类型传对象

v-model详解

表单类组件封装&v-model简化代码

.sync修饰符

ref和$refs

Vue异步更新、$nextTick

第五天

自定义指令

v-loading指令封装

插槽

默认插槽

组件中加入数据外部要套tamplate

插槽的基本语法：

1. 组件内需要定制的结构部分，改用****占位
2. 使用组件时, ****标签内部, 传入结构替换slot
3. 给插槽传入内容时，可以传入纯文本、html标签、组件

具名插槽

取了name就只能定向分发

作用域插槽

综合案例商品列表

商场清单

单页应用程序&多页 ，路由简介

所有功能在一个html页面实现，页面按需更新；多个页面更新

路由：设备和ip的映射关系

Vue中路由是路径和组件的映射关系

路由的基本使用&VueRouter

标签是用于放切换的页面

组件存放目录问题

.vue文件分为：页面组件，复用组件

第六天

路由模块封装

拆分模块，利于封装

在src新建index.js放路由

使用router-link

声明式导航-跳转传参

路由重定向

编程式导航-俩种路由跳转方式

案例面经基础版

四节

基于VueCli自定义创建项目

ESlint代码规范

编码规范，使团队代码风格统一

Vuex的概述

构建多组件数据共享的环境

创建空仓库

mutations

辅助函数mapMutations

actions和getters

模块module（进阶语法）

vuex是单一状态树

放在index太难维护于是选择拆分

音乐播放器遇到的问题

傻呗babel天天说我没得配置文件整不来，版本还不兼容，我直接给它禁用

安装特定版本实现兼容

Vue3

setup组件使用

语法糖减少代码：

响应式数据：

reative()

ref()数据声明同一用这个

computed

watch

父子通信

大事件

新建项目文件配置

prettier配置 .prettierrc eslint

pinia

husky

好用的小技巧

一.在 Visual Studio Code 中设置代码模块

在 Visual Studio Code 中设置代码模块通常是指配置代码片段（snippets），这样可以通过简短的触发词来快速插入常用的代码块。下面是如何在 Visual Studio Code 中设置代码模块的步骤：

步骤 1: 打开用户代码片段文件

1. 打开 Visual Studio Code。
2. 按下 Ctrl + Shift + P （Windows/Linux）或 Cmd + Shift + P （Mac）打开命令面板。
3. 输入 “snippets” 并选择 “Preferences: Configure User Snippets”（偏好设置：配置用户代码片段），然后选择相应的语言。如果你要设置的语言是 JavaScript 或 TypeScript，就选择 “javascript.json” 或 “typescript.json”。

步骤 2: 添加代码模块

在打开的代码片段文件中，你将看到一个 JSON 格式的对象，键是代码片段的触发词，值是插入的代码块。你可以在这个对象中添加你自己的代码模块。以下是一个示例，向 JavaScript 代码片段文件中添加一个模块：

jsonCopy code{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  },
  "Basic HTML Structure": {
    "prefix": "html",
    "body": [
      "<!DOCTYPE html>",
      "<html lang='en'>",
      "<head>",
      "    <meta charset='UTF-8'>",
      "    <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
      "    <title>$1</title>",
      "</head>",
      "<body>",
      "    $0",
      "</body>",
      "</html>"
    ],
    "description": "Basic HTML Structure"
  }
}

在这个示例中，”Print to console” 和 “Basic HTML Structure” 是触发词，”prefix” 是在编辑器中输入时触发代码模块的关键字，”body” 是实际插入的代码块，”$1”, “$2”, “$0” 是插入代码后光标的位置，description 是对代码模块的描述。

步骤 3: 保存并使用代码模块

添加完代码模块后，保存文件（Ctrl + S 或 Cmd + S），然后在代码编辑器中输入触发词并按下 Tab 键即可插入相应的代码块。

通过这些步骤，你就可以在 Visual Studio Code 中设置和使用自定义的代码模块了。你可以根据自己的需要添加更多的代码模块，以提高代码编写的效率。

本文作者： lllry
本文链接： http://wusterlllry.xyz/2023/07/11/vue/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！