vue3

前端工程化

组件化开发：将一个大型项目拆分 非常多的的小功能点 最后组装

前端工程化环境

node--nvm(管理和切换node版本)

npm: 下载三方包工具

webpack

1. node环境与node开发环境

• nvm node版本管理器
• nvm 常用命令
• node 运行jsd代码
• npm 安装和使用别人的三防包
• 代替npm工具 yarn cnpm pnpm

1. 安装node

• 安装nvm 控制node版本

  网上下载

  nvm list 查看 安装 的所以的node

  C:\Users\y2722\AppData\Local\nvm

• 安装 node

  nvm list  查看 安装 的所以的node
  nvm install node版本号  安装
  nvm uninstall node版本号  卸载
  nvm use node版本号  使用

node 和前端的三方包 默认npm 官网

版本网站：Node.js — Node.js 版本

安装是否成功

node -v

2. node 模块化

将大型模块 拆分为小的 模块 用时再组装

nodejs模块化规范 ： commonJS模块化规范

js模块化规范： ESmodule 规范

3. commonJS模块化规范

• 导入 暴露

  // a.js
  let num = 23
  let str = '你好'
  
  const fn = () => {
    return '我是函数'
  }
  
  module.exports = {  // 暴露
    num,
    str,
    fn
  }

  // b.js
  const { num, str, fn } = require('./a') // 导入
  
  console.log(num)
  console.log(str)
  console.log(fn())

4. ES6 新模块化语法 ESmodule 规范

• 单个暴露

  // a,js
  let a = 0
  let b = 0
  export a
  export a

• 单个导入

  import {a, b} from './a.js'
  import * as xxx from './a.js' //单个暴露别名取法  不可多个暴露 
  //多个暴露需要  xxx.default

• 批量暴露

  let a = 0
  let b = 0
  export default {a, b}

• 批量导入

  import num = from './a.js'

注意: 页面 html 引入 js 文件时 需要告诉浏览器

<script src='./b.js' type="module"></script>

1. 前端工程化

1. npm的使用

node安装 自动三方包的管理工具

• 的文件说明 项目根目录下 使用npm 自动创建三方包 package.json

  说明这个项目使用了哪些三方吧包 和版本

2. 常见命令

npm install 三方包报名  #安装三方包
npm i 包名  -g  # -golabl(全局安装) 不会安装的根目录下 会安装在node同级目录 多个项目只需安装一次全局包
npm i 报名@版本号 -D  # --dev-save(开发环境的包)

npm uninstall #卸载三方包

开发环境： 项目中 有些三方包 只会在开发过程中使用 上线不需要这个三方包（编译代码的包 webpack less-loader stylus-loader css-loader） 在命令后加 -D

生产环境：

测试环境 ：

编译：不可直接通过浏览器直接运行 需要编译 index.less .scss .stylus 【css的预处理语言 的预处理器】

node 基础父的都有编译

编译后在本地运行：开发环境代码

前端项目打包 编译后在本地运行：生产环境环境代码 上线

测试环境：开发环境中的特殊环境（单元测试）

依赖

3. 创建前端工程化

• npm init

• 安装三方包

  npm install 三方包报名  #安装三方包
  npm i 包名  -g  # -golabl(全局安装) 不会安装的根目录下 会安装在node同级目录 多个项目只需安装一次全局包
  npm i 报名@版本号 -D  # --dev-save(开发环境的包)
  
  npm uninstall #卸载三方包

  package-lock.json 三方包锁定器

• 用三方包

  导入

  const _ = require('lodash')  //node 环境运行

2. vue3 创建

声明式渲染： 有自己的模板语法 template

响应式数据：不再操作DOM 只要数据改变 页面自动刷新 单个页面就一个inde.html

1. vite 创建vue3

npm create vite@latest 项目名 -- --template vue

• scripts 项目可以使用命令

  "script": {
  "dev": "vite", #启动命令
  "build": "vite build" #编译为 生产环境 
  "preview": "vite preview" // 本地预览生产构建产物
  }

• 插件

  Vue 3 Snippets  #Tab 代码补全
  Vue - Official #高亮

• 页面入口 main.js

  import { createApp } from 'vue' // 导入Vue实例创建方法
  import App from './App.vue'  // 导入组件
  
  createApp(App).mount('#app')  // 创建Vue实例对象  把vue所以代码挂载到index.html

2. 单个文件组件SFC

文件以.vue结尾的

vue 文件里面可以写什么内容

<script setup> // 

</script>

<template>
  <div>
    你好vite + vue
  </div>

</template>

<style scoped labg="less | stylus | scss">
</style>

// scoped 作用
 //data-v-7a7a37b1   
.p[data-v-7a7a37b1] {

}

3. 响应式数据mustach语法---解析js变量

${} {} {

数据改 页面改

• reactive 适合大型对象

  接收对象类型数据 返回响应数据

  import { reactive } from 'vue'
  let unm  = reactive({
      count: 1000
  })
  
  {{ unm.count }}

• ref 适合普通 和简单类型

  传入简单类型 返回响应式数据----对象

  原有数据类型包了一层对象 底层也是用 reactive 实现响应式

  import { ref } from 'vue'
  
  let num = ref(123) // 返回对象
  num.vue // js 中
  {{ num }}  //模板中

4. vue的14个指令

1. v-on @事件

• v-on:事件类型=“时间执行函数” @事件 = “执行函数”

<didv v-on:click = "fn"></didv>
<didv @click = "fn(参数)"></didv>

什么是指令修饰符？

所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

• @keyup.enter —>当点击enter回车键的时候才触发
• @v-model.trim -> 去掉前后空格
• v-model.number —>转数字
• @事件名.stop —> 阻止冒泡
• @事件名.prevent —>阻止默认行为
• @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为

2. v-text v-html

v-html ---> innerHTML 包括标签和文本

v-text 纯文本渲染

3. v-if v-show

都会还可以控制节点显隐

v-if 是通过创建节点来控制 适合不经常显示 和隐藏 只有显示才有节点

v-show 是通过 display:'none' 控制 无论显示还是隐藏 都会有节点

4. v-model

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

**语法：**v-model="变量"

5. v-bind :属性

1. **作用：**动态设置html的标签属性 比如：src、url、title
2. 语法：**v-bind:**属性名=“表达式”
3. **v-bind:**可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

• <img v-bind:src="url" />

• <img :src="url" /> （v-bind可以省略）

• v-bind对样式的支持

  1.语法：

  <div> :class = "对象/数组">这是一个div</div>

  2.对象语法

  当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

  <div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

  ​ 适用场景：一个类名，来回切换

  3.数组语法

  当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

  <div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

  使用场景:批量添加或删除类

• v-bind对有样式控制的增强-操作style

  1.语法

  <div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

6. v-for

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

• item 是数组中的每一项
• index 是每一项的索引，不需要可以省略
• arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

v-for中的key

语法： :key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

**为什么加key：**Vue 的默认行为会尝试原地修改元素（就地复用）

实例代码：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

注意：

1. key 的值只能是字符串 或 数字类型
2. key 的值必须具有唯一性
3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

7. v-pre

在页面在输入展示

<div v-pre>
    {{ 你的全世界 }}
</div>

8. v-cloak

等到页面数据 拿到后再渲染

<div v-cloak>
    {{ a }}  // 防止异步 打印{{ a }}
</div>

9. v-once

只渲染一次 -- 数据只有在赋初值 会渲染

<div v-once>
    {{ a }}  // 初值后 不渲染
</div>

5. 生命周期

创建 挂载 更新(反复执行) 销毁

vue2	vue3.0	vue3.2	备注
beforeCreate		setup	组件创建之前 可以获取顶级实例对象
created		setup	组件创建完成，可以获取变量
beforeMount		onBeforeMount	挂载前，VNdom创建完成，真实dom未渲染
mounted		onMounted	挂载完成，真实dom创建完成，可以获取dom
beforeUpdate		onBeforeUpdate	dom更新前触发
updated		onUpdated	dom更新完成触发
beforedestroy，destroyed	beforeUnmount	onBeforeUnmount	组件卸载后触发 所有的挂载的数据 子组件全部卸载后触发
	errorCaptured	onErrorCaptured	在捕获一个来自后代组件的错误时被调用
	renderTracked	onRenderTracked	跟踪虚拟 DOM 重新渲染时调用
	renderTriggered	onRenderTriggered	当虚拟 DOM 重新渲染被触发时调用
activated	activated	onActivated	缓存组件激活时调用
deactivated	deactivated	onDeactivated	缓存组件失活时调用

<template>
  <div>
      <div class="box"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
  //生命周期钩子监听
  onMounted(()=>{
    console.log(document.querySelector('.box')); //可以获取dom
  })
</script>

6. 监听器

7. 计算属性 computed

8. 组件开发-组件通信

3. 模块化开发

优点：

可重复利用

便于维护

子组件必须大驼峰

子组件不发生axios请求

4. 路由

1.路由概念

2.组件分类

• 页面级组件【页面】
• 业务及组件【某页面 的一些功能模块 封装起来用】
• 公共组件【多个页面使用】

3.vue-router 基础使用

• 安装

  yarn add vue-router

• 配置4 步骤

  1. 创(页面组件) 2.配(配路由表)3.暴露注册(main.js导入挂载)4.路由出口

  1. router/index.js

     配路由表

     导入创建路由实例对象 createRouter

     导入路由模式 ：哈希模式 createWebHashHistory 原理是利用锚点 url地址有#

     history模式 createWebHistory

     
     import { createMemoryHistory, createRouter, createWebHashHistory } from 'vue-router'
     const Layout = () => import('../views/layout/index.vue')
     const Content = () => import('../views/layout/content/index.vue')
     const My = () => import('../views/my/index.vue')
     const router = createRouter({
       history: createWebHashHistory(), //路由模式
       routes: [
         {
           path: '/',
           component: Layout,
             redirext: '/a'  // 重定向 展示'/' 是展示'/a'
           children: [ // 二级路由
             {
               path: '/a',
               component: Content
             }
           ]
         },
           {
           path: '/my',
           component: My
         }
       ]
     })
     export default router

     2. mian.js挂载

        import router from './router'
        app.use(router)

     3. 配置路由出口

        <router-view />

4.通过vue-router 实现1级页面的跳转

• 关于hash 和 history 路由的区别
• 标签跳转
• 函数式编程跳转【路由的两个顶级对象 useRouter useRoute】

5.路由重定向

 redirext: '/a'  // 重定向 展示'/' 是展示'/a'

6.路由的两个顶级对象 useRouter useRoute

• router-link

  <router-link to="地址"></router-link>

• 动态跳转 useRouter

  const router = useRouter()
  router.push('路径')
  router.replace('路径')// 不可返回

• 原生js

  location.href = '/#/b'

7.多层级路由的实现 与理解

5. 组件通信

 const props =  defineProps({  
    title: {    
        type: String,  // 数据类型    
        default: '',   // 默认值 // 数组默认() => []  对象 () => ({})
        required: true,  // 是否必填    
        validator (value) {        
            // 自定义校验逻辑        
            return 是否通过           
        }  }})

1. 父传子

在组建中使用直接写属性

在js中 props.message

2. 子传父

利用defineEmits 定义自定义事件 让父亲监听获取参数

3. 状态管理

快速生成SFC模版

{
	"Vue 3 tempalte Pane": {
		"prefix": "vue3",
		"body": [
		"<template>",
		"  <div>   </div>",
		"</template>",
		"",
		"<script setup>",
		"</script>",
		"",
		"<style scoped>",
		
		"</style>"
		],
		"description": "Vue 3 Split Pane Component"
	},
	"Vue 3 Coment": {
		"prefix": "vc",
		"body": [
			"// 导入工具库",
			"import { ref, onMounted, onUnmounted } from 'vue'",
			"// 导入组件库",
			"// 定义属性",
			"const v = ref()",
			"// 定义方法",
			"const hanlder = () => {}",
			"// 生命周期",
			"onMounted(() => {",
			"})",
			"",
			"onUnmounted(() => {",
			"})",
		],
		"description": "Vue 3 Coment"
	}
}

css 预处理器

支持定义变量和变量取值

层级嵌套语法

内置函数 内置处理语句

• less

  @import url('.引入其他样式')

  npm i less  -D
  
  // 全局样式定义变量
  
  // 其他地方导入使用
  @import url('.引入其他样式')

@width: 10px;
@heigth: @width + 10px;
#header {
    width:@width;
    heigt:@heigt;
}

• sass

  1. 安装 .scss

     npm install sass --save-dev       //安装node-sass
     npm install loader --save-dev     //安装依赖包sass-loader
     npm install loader --save-dev     //安装style-loader

  2.安装 node-sass 和 sass-loader sass-loader：把 sass编译成css node-sass：nodejs环境中将sass转css

提示：限制 node-sass，sass-loader 版本号，防止默认安装的版本号过高 1 npm i sass-loader@7.3.1 -D npm i node-sass@4.14.1 -D

原文链接：https://blog.csdn.net/Maxueyingying/article/details/137344192

定义变量

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

@别名路径配置

• 安装

  yarn add @types/node --save-dev

• vite.config.js

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import path from 'path';
  
  // https://vite.dev/config/
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
      '@': path.resolve(__dirname, 'src')
      }
      }
  })

• 想要提示 建文件 jsconfig.json

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["./src/*"],
        // 其他自定义别名（需与构建工具配置一致）
        "#/*": ["./src/assets/*"]
      }
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }

面试题

1. reactive 和 ref 区别

2. v-html 和 mustach -- v-text 区别

可以用表达式 可以多个变量 运算

v-text 存文本 不可表达式

v-html 可以解析标签 不可表达式

3. v-if 与 v-show

都会还可以控制节点显隐

v-if 是通过创建节点来控制 适合不经常显示 和隐藏 只有显示才有节点

v-show 是通过 display:'none' 控制 无论显示还是隐藏 都会有节点

1. v-show

   1. 作用： 控制元素显示隐藏
   2. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
   3. 原理： 切换 display:none 控制显示隐藏
   4. 场景：频繁切换显示隐藏的场景

2. v-if

   1. 作用： 控制元素显示隐藏（条件渲染）
   2. 语法： v-if= "表达式" 表达式值 true显示， false 隐藏
   3. 原理： 基于条件判断，是否创建 或 移除元素节点
   4. 场景： 要么显示，要么隐藏，不频繁切换的场景