<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <h4>vue3</h4> 

1、概况

Vue 3是一款用于构建用户界面的渐进式JavaScript框架，同时也是一个强大的生态系统。（官方网站：https://cn.vuejs.org/）

讯享网

• 框架定义：Vue 3提供了一套完整的项目解决方案，用于快速构建现代化的Web应用。
• 主要优势：显著提升前端项目的开发效率和可维护性。
• 学习曲线：需要理解和掌握框架的使用规则（详情请参考官方文档）。

2、快速入门

准备

1. 引入Vue模块（官方提供）
2. 创建Vue程序的应用实例，控制视图的元素
3. 准备原色（div），被Vue控制

数据驱动视图

1. 准备数据
2. 通过插值表达式渲染页面

   插值表达式：

   • 形式：{{ 表达式 }}。
   • 内容可以是：

     讯享网<ul><li>变量</li><li>三元运算符</li><li>函数调用</li><li>算术运算</li></ul> </li></ul> 

     实例代码：

3、常用指令

指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

常用指令：

3.1、v-for

• 作用：列表渲染，遍历容器的元素或者对象的属性
• 语法： v-for = “(item,index) in items”
  • 参数说明：

    讯享网<ul><li> <p>tems 为遍历的数组</p> </li><li> <p>item 为遍历出来的元素</p> </li><li> <p>index 为索引/下标&#xff0c;从0开始 &#xff1b;可以省略&#xff0c;省略index语法&#xff1a; v-for &#61; “item in items”</p> </li></ul> </li><li> <p>书写形式&#xff1a;</p> <pre></pre> <p>可能是下面的效果&#xff0c;包含了多条数据展示</p> <p><img src="https://img-blog.csdnimg.cn/img_convert/e44474aea0be0519edba5c7bbf5c6b43.png" alt="image-019953" /></p> <p>遍历的数组&#xff0c;必须在data中定义&#xff1b; 要想让哪个标签循环展示多次&#xff0c;就在哪个标签上使用 v-for 指令。</p> </li></ul> </li></ul> 

    v-for的key

    • 作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用
    • 语法： v-for = “(item,index) in items” :key=“唯一值”
    • 注意点:
      • key的值只能是字符串 或 数字类型
      • key的值必须具有唯一性
      • 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
    • 写法：

      效果如下：

      

      官方推荐在使用 v-for 时提供一个key属性，以遍可以追踪每个节点，提升渲染性能。

    3.2、v-bind

    • 作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
    • 语法：v-bind:属性名=“属性值”
    • 简化：:属性名=“属性值”
    • html标签写法

    

    • v-bind写法

      

    v-bind所绑定的数据，必须在data中定义

    3.3、 v-if & v-show

    • 作用：这两类指令，都是用来控制元素的显示与隐藏的
    • v-if
      • 语法：v-if=“表达式”，表达式值为 true，显示；false，隐藏
      • 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
      • 场景：要么显示，要么不显示，不频繁切换的场景
      • 其它：可以配合 v-else-if / v-else 进行链式调用条件判断
      • 注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后
      • 示例代码：

        讯享网

    • v-show
      • 语法：v-show=“表达式”，表达式值为 true，显示；false，隐藏
      • 原理：基于CSS样式display来控制显示与隐藏
      • 场景：频繁切换显示隐藏的场景
      • 示例代码：

        不展示谢逊这条数据

    3.4、v-model

    需求：用户列表数据渲染，获取用户输入的条件

    搜索栏中当用户点击查询按钮时，需要获取到用户输入的表单数据，并输出出来 。

    

    需要想要实现上面这个功能，就需要使用新的指令，v-model

    v-model

    • 作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
    • 语法：v-model=“变量名”

      

      v-model 中绑定的变量，必须在data中定义。

    3.5、 v-on

    • 作用：为html标签绑定事件（添加时间监听）
    • 语法：
      • v-on:事件名=“内联语句”
      • v-on:事件名=“函数名“
      • 简写为 @事件名=“…”

        示例1：

        讯享网

        示例2：

        

    4 生命周期

    生命周期：指一个对象从创建到销毁的整个过程。

    

    生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

    状态 阶段周期beforeCreate创建前created创建后beforeMount载入前 mounted 挂载完成beforeUpdate数据更新前updated数据更新后beforeUnmount组件销毁前unmounted组件销毁后

    

    5、 工程化

    我们目前的前端开发中，当我们需要使用一些资源时，例如：vue.js，和axios.js文件，都是直接再工程中导入的，如下图所示：

    

    但是上述开发模式存在如下问题：

    • 不规范：每次开发都是从零开始，比较麻烦
    • 难复用：多个页面中的组件共用性不好
    • 难维护：js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护

    所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

    • 模块化：将js和css等，做成一个个可复用模块
    • 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
    • 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
    • 自动化：项目的构建，测试，部署全部都是自动完成

    所以对于前端工程化，说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率，降低开发难度等等。接下来我们就需要学习vue的官方提供的脚手架帮我们完成前端的工程化。

    5.1、环境准备

    • 介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。
    • create-vue提供了如下功能：
      • 统一的目录结构
      • 本地调试
      • 热部署
      • 单元测试
      • 集成打包上线
    • 依赖环境：NodeJS

      

      详细安装方式，请查看资料中的NodeJS安装文档

    • npm：Node Package Manager，是NodeJS的软件包管理器。

      

    5.2、Vue项目-创建

    • 创建一个工程化的Vue项目，执行命令：npm init vue@latest

      

      详细步骤说明：

      

      执行上述指令，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具

      项目创建完成以后，进入项目目录，执行命令安装当前项目的依赖：npm install

      

      创建项目以及安装依赖的过程，都是需要联网的。

    • Vue项目-目录结构

      

    • 启动项目，执行命令：

      

    • 浏览器中可以直接访问，地址：http://127.0.0.1:5173

    

    5.3、Vue项目开发流程

    如下图：

    

    其中是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue 的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里（）

    

    5.4、组合式API

    组合式API是Vue 3中的一种新的编程模式，它提供了更灵活和可组合的方式来编写Vue组件逻辑，使得代码更加清晰、可维护，并且使得组件的复用更加容易。

    官网地址：https://cn.vuejs.org/api/

    

    Vue3中提供了很多的组合式API，当然我们平时开发中使用不了那么多，我们重点讲解几个后面项目常用的API，分别是：

    • reactive、ref、watch、defineProps、defineEmits

    5.5、reactive和ref函数

    reactive：能将对象类型变为【响应式】，对基本类型无效（例如 string，number，boolean）

    讯享网

    ref：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

    二者对比：

    1. 都是用来生成响应式数据
    2. 不同点
       1. reactive不能处理简单类型的数据
       2. ref参数类型支持更好，但是必须通过.value做访问修改
       3. ref函数内部的实现依赖于reactive函数
    3. 在实际工作中的推荐
       1. 推荐使用ref函数，减少记忆负担

    5.6、watch

    侦听一个或者多个数据的变化，数据变化时执行回调函数

    案例代码：

    讯享网

    5.7、父子组件通信

    我们来看下面这个图，有三个组件，组件A的子组件分为是B和C，其中B和C是兄弟关系。我们这次重点研究是父子组件的通信，如果想要实现B和C的通信，需要使用第三方组件pinia才行（不是课程重点）

    

    父组件传递信息到子组件：

    • 父组件中给子组件绑定属性
    • 子组件内部通过props选项接收数据

    子组件传递信息到父组价

    • 父组件中给子组件标签通过@绑定事件
    • 子组件内部通过 emit 方法触发事件

    案例：

    父组件

    子组件：son-com.vue

    讯享网

    6、Vue路由

    组成

    • Router实例：路由实例，基于createRouter函数创建，维护了应用的路由信息。
    • ：路由链接组件，浏览器会解析成。
    • ：动态视图组件，用来渲染展示与路由路径对应的组件。

      

    安装vue-router（创建vue项目已选择）

    • 安装命令：
    • 定义路由