【前端之Vue3入门快速体验】

66678666 2024-08-04 14:33:17 阅读 90

Vue3

简介Vue3快速体验(非工程化方式)Vue3通过Vite实现工程化① Vite的介绍② Vite创建Vue3工程化项目③ Vite+Vue3项目的目录结构④ Vite+Vue3项目组件(SFC入门)工程化vue项目组件的组织过程

⑤ Vite+Vue3响应式入门和setup函数

Vue3视图渲染技术① 插值表达式和文本渲染**`Ⅰ、插值表达式渲染`****`Ⅱ、文本渲染`**

② Attribute属性渲染③ 事件的绑定④ 响应式基础⑤ 条件和列表渲染⑥ 双向绑定⑦ 属性计算computed（了解）⑧ 数据监听器（了解）⑨ 生命周期（了解）⑩ 组件化入门案例

简介

Vue官网

Vue 是一款用于<code>构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

Vue的 两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM

Vue3快速体验(非工程化方式)

在这里插入图片描述

创建一个<code>index.html文件，引入vue.global.js

直接引入方式：<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>code>
也可以用浏览器打开 vue.global.js, 然后copy所有内容，将其保存在一个vue.js的文件,导入vue.js文件即可

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8" />code>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />code>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />code>

<title>Document</title>

<script src="./js/vue.js"></script>code>

</head>

<body>

<div id="app">code>

<!-- 绑定div内部元素：

方式① v-text=声明的变量名称；

方式②：{ {声明的比变量名称}} -->

<h1 v-text="message" v-bind:style="styleColor">你好</h1>code>

<h1 style="background-color: yellow">{ {message}}</h1>code>

<button @click="fun01()">change</button>code>

</div>

<script>

const app = Vue.createApp({

setup() {

//定义数据以变量、对象的形式

//绑定div内部元素：

//方式① v-text=声明的变量名称；方式②：{ {声明的比变量名称}}

let message = "helloVue";

//绑定style样式用v-bind,参考下面

let styleColor = { "background-color": "red" };

//绑定事件用@click,参考下面

function fun01() {

alert("20240710205533----Vue绑定事件测试!");

}

//在return中要返回变量、方法，才能和HTML元素进行关联

return {

message,

styleColor,

fun01,

};

},

});

//将app对象挂载指定元素上，这样被挂载的元素内部就可以通过Vue框架实现数据的渲染了

app.mount("#app");

</script>

</body>

</html>

执行结果：

 Vue3通过Vite实现工程化
 ① Vite的介绍
 Vite官网
   
  
 vite是一种<code>前端项目构建工具，能够显著提升前端开发体验
  
 ② Vite创建Vue3工程化项目
   在本地创建一个文件夹，用于存储多个前端项目，然后用VScode打开
  
  
  
 
 按照顺序运行以下命令：

① 创建 vite 命令：<code>npm create vite@latest 或 npm create vite

第一次使用vite时会提示下载 vite,输入y回车即可,下次使用vite就不会出现了;

然后选择vue+JavaScript选项即可，最后输入名字即可

② cd到创建好的文件下，安装基础依赖：npm install 或 npm i

③ 启动项目：npm run dev

④ 退出项目：ctrl+c

如图所示：

在这里插入图片描述

③ Vite+Vue3项目的目录结构

在这里插入图片描述

<code>public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：

assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。layouts/ 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。store/ 目录：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率。utils/ 目录：用于存放一些通用的工具函数，如日期处理函数、字符串操作函数等。 vite.config.js 文件：Vite 的配置文件，可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行配置。package.json 文件：标准的 Node.js 项目配置文件，包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令，如 dev、build、serve 等，用于启动开发、构建和启动本地服务器等操作。Vite 项目的入口为 src/main.js 文件，这是 Vue.js 应用程序的启动文件，也是整个前端应用程序的入口文件。在该文件中，通常会引入 Vue.js 及其相关插件和组件，同时会创建 Vue 实例，挂载到 HTML 页面上指定的 DOM 元素中。

更改端口号

④ Vite+Vue3项目组件(SFC入门)

<code>VUE组件:

一个页面由多个部分组成,每部分都可以理解为一个组件；而每个

.vue文件可以理解为一个组件,多个.vue文件就可以构成一个整体页面，而且组件之间可以复用，这样方便维护

.VUE文件:

(Single-File Component，简称 SFC，单文件组件)

该文件是对html/css/js文件的统一封装

工程化vue项目组件的组织过程

<code>index.html是项目的入口,其中 <div id ='app'></div>是用于挂载所有组建的元素index.html中的script标签引入了一个main.js文件,具体的挂载过程在main.js中执行main.js是vue工程中非常重要的文件,他决定这项目使用哪些依赖,导入的第一个组件App.vue是vue中的核心组件,所有的其他组件都要通过该组件进行导入,该组件通过路由可以控制页面的切换

⑤ Vite+Vue3响应式入门和setup函数

非响应式数据: 修改后VUE不会更新DOM

响应式数据: 修改后VUE会更新DOM

VUE2中数据默认是响应式的;

VUE3中数据要导入ref或者reactive处理后才是响应式的

ref处理的响应式数据在js编码修改的时候需要通过.value操作，而绑定到html上或者template上时不需要.value

setup关键字：

在 script 中加入 setup ，返回变量和方法都可以省略掉，即：通过setup关键字可以 省略 export default {setup(){ return{}}} 这些冗余的语法结构

代码示例演示:

在VScode中创建一个vue3的项目，main.js中去掉系统默认引入的css样式

在这里插入图片描述

App.vue代码：

//在 script 中加入 setup ，下面的导入的固定格式，返回变量和方法都可以省略掉了

//通过setup关键字可以省略 export default {setup(){ return{}}}这些冗余的语法结构

//存储vue页面逻辑js代码

import { ref } from "vue";

// export default {

// setup() {

//非响应式数据: 修改后VUE不会更新DOM

//响应式数据: 修改后VUE会更新DOM

//VUE2中数据默认是响应式的

//VUE3中数据要经过ref或者reactive处理后才是响应式的

//ref是VUE3框架提供的一个函数,需要《导入》

//let counter = 1

//ref处理的响应式数据在js编码修改的时候需要通过.value操作

//ref响应式数据在绑定到html上时不需要.value

//ref响应式数据在绑定到template上时不需要.value

//定义一些要展示到html上的一些数据，对象或方法

let countNum = ref(8);

//让countNum自增方法

function countNumIncr() {

countNum.value++;

}

//让countNum自减方法

function countNumDecr() {

countNum.value--;

}

//显示countNum值的方法

function showCountNum() {

alert(countNum.value);

}

// return {

// countNum,

// countNumIncr,

// countNumDecr,

// showCountNum,

// };

// },

// };

</script>

<template>

<div>

<button @click="countNumIncr()">+</button>code>

<span>{ { countNum }}</span>

<button @click="countNumDecr()">-</button><br />code>

<hr />

<button @click="showCountNum()">显示countNum值</button>code>

</div>

</template>

<style scoped>

/** 存储的是css代码! <style scoped> 是 Vue.js 单文件组件中用于设置组件样式的一种方式。

它的含义是将样式局限在当前组件中，不对全局样式造成影响。 */

</style>

启动项目后演示图片：点击 + 或 - 中间数字实时增加或减少，点击显示按钮会展示最新的结果值

 Vue3视图渲染技术
 ① 插值表达式和文本渲染
 <code>Ⅰ、插值表达式渲染
 插值表达式 :最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 ,即双大括号{ {}} 插值表达式 :支持使用{ {}}绑定变量名称、函数调用、javascript的运算表达式等内容
 
App.vue代码示例【项目构建过程省略】：
 
<script setup>
let msg = "①插值表达式渲染数据到元素指定位置，使用{ {}}接收展示信息！";
let msg2 = 61;
let result = () => { 
 return "②插值表达式支持函数的调用！";
};
</script>
<template>
 <div>
 ①普通变量：{ {  msg }}
 <hr />
 ①普通变量：
 <h3>{ {  msg }}</h3>
 <hr />
 ②函数调用：
 <h1>{ {  result() }}</h1>
 <hr />
 ③javascript的三目运算：
 <h1>{ {  msg2 > 60 ? "③老人" : "③非老人" }}</h1>
 <hr />
 </div>
</template>
<style scoped></style>
 
  
  
 执行结果图示:

`<code>Ⅱ、文本渲染`

使用vue的 v-text 和 v-html 命令，该命令必须依赖元素，并且一定要写在元素开始标签中

v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本

App.vue代码示例【项目构建过程省略】：

<script setup>

let msg = "①插值表达式渲染数据到元素指定位置，使用{ {}}接收展示信息！";

let msg2 = 61;

let result = () => {

return "②插值表达式支持函数的调用！";

};

</script>

<template>

<div>

<span v-text="msg"></span>code>

<hr />

<span v-text="msg2"></span>code>

<hr />

<span v-text="result()"></span>code>

<hr />

<span v-text="age > 60 ? '老人' : '非老人'"></span>code>

<hr />

<hr />

<hr />

</div>

</template>

<style scoped></style>

执行结果图示:

 ② Attribute属性渲染
   
  
 <code> v-bind 指令用来渲染元素的属性；
  
   
  
 语法: v-bind:属性名='数据名', 可以简写为 :属性名='数据名'
  
 App.vue代码示例【项目构建过程省略】：
 
<script setup>
/* 
想要渲染一个元素的 attribute，应该使用 v-bind指令
- 由于插值表达式不能直接放在标签的属性中,所有要渲染元素的属性就应该使用v-bind
- v-bind可以用于渲染任何元素的属性,语法为 v-bind:属性名='数据名', 可以简写为 :属性名='数据名'
*/
const data = { 
 name: "百度",
 url: "http://www.baidu.com",
 logo: "http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
};
</script>
<template>
 <div>
 <div>
 <a v-bind:href="data.url" target="_self">code>
 <img :src="data.logo" :title="data.name" />code>
 <br />
 <input type="button" :value="`点击访问${data.name}`" />code>
 </a>
 </div>
 </div>
</template>
<style scoped></style>
 
  
  
 执行结果图示:
  
  
  
 
  
  
  
 
  
 ③ 事件的绑定
   
  
 <code>v-on 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。vue中的事件名一般是原生事件名去掉on
  
  如：onClick --> click
  
   
  
 语法：v-on:click="handler"code> 简写： @click="handler"code>
  
  handler的值可以是方法事件处理器,也可以是内联事件处理器
  
  方法事件处理器 是编程中的一个概念，‌它指的是确定控件如何响应事件的过程。‌事件处理器的名称由控件名称和相应事件的名称共同构成，‌例如“Form Load ()”表示对象是“Form”窗体，‌“Load”表示窗体的加载事件，‌即窗体启动时发生的事件。‌
  
  内联事件处理器 是指在事件被触发时执行的内联JavaScript语句。‌这种处理器通常用于在特定的事件（‌如点击、‌加载等）‌发生时执行特定的代码块。‌
  
 App.vue代码示例【项目构建过程省略】：
 
<script setup>
/* 
事件的绑定
我们可以使用 v-on 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。
- 用法：v-on:click="handler" 或简写为 @click="handler"code>
- vue中的事件名=原生事件名去掉on 前缀 如:onClick --> click
- handler的值可以是方法事件处理器,也可以是内联事件处理器
- 绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下
 - .once：只触发一次事件。[重点]
 - .prevent：阻止默认事件。[重点]
 - .stop：阻止事件冒泡。
 - .capture：使用事件捕获模式而不是冒泡模式。
 - .self：只在事件发送者自身触发时才触发事件。
*/
import {  ref } from "vue";
// 响应式数据 当发生变化时,会自动更新 dom树
let count = ref(0);
//增加
let addCount = () => { 
 count.value++;
};
// //减少
// let incrCount = () => { 
// count.value--;
// };
// 通过事件对象阻止组件的默认行为
function stopCount(event) { 
 let flag = confirm("确定访问qq音乐吗？");
 if (!flag) { 
 event.preventDefault();
 }
};
// @click.prevent="" 不询问直接阻止访问百度code>
function preventCount(event) { 
 alert("@click.prevent方法不询问直接阻止访问百度");
};
</script>
<template>
 <div>
 <h1>count的值是:{ {  count }}</h1> <hr />
 <!-- 方法事件处理器 -->
 <button v-on:click="addCount()">增加</button> <br /><hr />code>
 <!-- 内联事件处理器 将方法逻辑写在标签里面-->
 <button @click="count--">减少</button> <br /><hr />code>
 <!-- 事件修饰符 once 只绑定事件一次 -->
 <button @click.once="count++">.once 方法只触发一次事件(增加)</button> <br /><hr />code>
 <!-- 事件修饰符 prevent 阻止组件的默认行为 -->
 <a href="http://www.baidu.com" @click.prevent="preventCount()">事件修饰符 prevent 阻止组件的默认行为</a>code>
 <br /><hr />
 <!-- 原生js方式阻止组件默认行为 (推荐) -->
 <a href="https://y.qq.com/" @click="stopCount($event)">原生js方式阻止组件默认行为(推荐) </a>code>
 <br />
 </div>
</template>
<style scoped></style>
 
  
  
 代码结果演示：
  
  
  
  
  
   
  
  
  
 vue事件绑定代码结果演示
  
  
  
  
  
  
  
 ④ 响应式基础
 普通数据转换为响应式数据的两种方式
   
  
 Ⅰ、<code>ref 函数：适合单个变量
  
  在 script 标签中操作 ref 函数要通过 .value 在 template 标签中操作 ref 函数则不需要 .value 
  
  
  
 Ⅱ、reactive 函数：适合对象
  
  在 script/template 标签中操作 reactive 响应式数据时直接使用对象名.属性名方式即可 
  
 App.vue代码示例【项目构建过程省略】：
 
<script setup>
import {  ref, reactive } from "vue";
let num = ref(0);
function addNum() { 
 num.value++;
}
let user = reactive({ 
 name: "",
 age: 16,
});
function addAge() { 
 user.age++;
}
</script>
<template>
 <div>
 <h1>ref 计数结果：{ {  num }}</h1>
 <hr />
 <button @click="addNum()">ref:【方法事件处理器】绑定事件计数</button>code>
 <hr />
 <button @click="num++">code>
 ref:【内联事件处理器】template标签中操作ref无需.value
 </button>
 <hr />
 <hr />
 <h1>reactive 年龄值：{ {  user.age }}</h1>
 <hr />
 <button @click="addAge()">reactive:【方法事件处理器】绑定事件计算年龄</button>code>
 <hr />
 <button @click="user.age++">code>
 reactive:【内联事件处理器】script/template标签中操作reactive无需.value
 </button>
 </div>
</template>
<style scoped></style>
 
  
  
 代码结果演示：
  
  
  
  
  
   
  
  
  
 ref reacitve响应式数据代码演示
  
  
  
  
  
  
  
   
  
 <code>拓展：扩展响应式关键字toRefs 和 toRef【代码演示略】
  
  toRef:将一个reactive响应式对象中的某个属性转换成一个ref响应式对象;
  
  toRefs:将一个reactive响应式对象中的多个属性转换成多个ref响应式对象;
  
 ⑤ 条件和列表渲染
 Ⅰ、条件渲染：
 
  
  
 v-if: 表达式/数据为ture,则当前元素会渲染到Dom树中`;
  
  
  
 v-else: 自动和前一个v-if做取反操作;
  
  
  
 v-show: 数据为ture,元素则展示在页面上，否则不展示;
  
   
  
 v-if和 v-show的区别:
  
  对于 v-if来说，数据为false时,元素 不在dom 树中了；
  
  对于 v-show来说，数据为false时,元素 仍在dom 树中，只是通过dispaly的css样式给隐藏起来了
  
  
  
   
  
 总之：v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。
  
  因此，如果需要频繁切换，则使用 v-show 较好；
  
  如果在运行时绑定条件很少改变，则 v-if 会更合适。
  
  
  
 
 
 App.vue代码示例【项目构建过程省略】：
 
<script setup>
import {  ref, reactive } from "vue";
let flag = ref(2 == 1);
</script>
<template>
 <div>
 <h1 v-if="!flag">"v-if='表达式'只会在指令的表达式返回真值时才被渲染"</h1>code>
 <h1 v-else>
 "一个 v-else 元素必须跟在一个 v-if 元素后面,否则它将不会被识别"
 </h1>
 <hr />
 <h1 v-show="flag">"v-show: 数据为ture,元素则展示在页面上，否则不展示"</h1>code>
 <hr />
 <button @click="flag = !flag">【内联事件处理器】数据值：{ { flag}}</button>code>
 </div>
</template>
<style scoped></style>
 
  
  
 代码结果演示：
  
  
  
  
  
   
  
  
  
 条件渲染：v-if和v-show
  
  
  
  
  
  
  
 Ⅱ、列表渲染：
   
  
 <code>v-for 指令基于一个数组来渲染一个列表,指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item是迭代项的别名
  
 App.vue代码示例【项目构建过程省略】：
 
<script setup>
import {  ref, reactive } from "vue";
let cities = reactive([
 { 
 id: "city1",
 name: "北京",
 },
 { 
 id: "city2",
 name: "上海",
 },
 { 
 id: "city3",
 name: "伊春",
 },
]);
</script>
<template>
 <div>
 <ul>
 <!-- :key可以不写 -->
 <li v-for="city in cities" :key="city.id">code>
 { {  city.name }}
 </li>
 </ul>
 </div>
</template>
<style scoped></style>
 
  
  
 代码结果演示：
  
  
  
 
  
 ⑥ 双向绑定
   <code>单向绑定 v-bind: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变不会同步更新到响应式数据双向绑定 v-model: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变会同步更新到响应式数据 
  
   
  
 v-model专门用于双向绑定表单标签的value属性,语法为 v-model:value=''code>,可以简写为 v-model=''code>
  
 App.vue代码示例【项目构建过程省略】：
 
<script setup>
import {  ref, reactive } from "vue";
let cityName = ref("北京123");
</script>
<template>
 <div>
 <input type="text" v-bind:value="cityName" />code>
 "v-bind 【单向】绑定：{ { cityName }}"
 <hr />
 <hr />
 <input type="text" v-model="cityName" />code>
 "v-model 【双向】绑定：{ { cityName }}"
 </div>
</template>
<style scoped></style>
 
  
  
 代码结果演示：
  
  
  
  
  
   
  
  
  
 单向绑定和双向绑定
  
  
  
  
  
  
  
 ⑦ 属性计算computed（了解）
   
  
 <code>computed() 方法计算属性值会基于其响应式依赖被缓存，而普通方法不会
  
  具体区别参考下述代码
  
 App.vue代码示例【项目构建过程省略】：
 
<script setup>
import {  reactive, computed } from "vue";
let user = reactive({ 
 name: "xiaoming",
 age: 16,
});
function isAdult() { 
 console.log("普通函数");
 return user.age > 18 ? "成年" : "未成年";
}
let result = computed(function () { 
 console.log("计算属性(computed)函数");
 return user.age > 18 ? "成年" : "未成年";
});
</script>
<template>
 <div>
 <h1>{ {  user.name }}</h1>
 <hr />
 是否成年(普通函数)：{ {  isAdult() }}<br />
 是否成年(普通函数)：{ {  isAdult() }}<br />
 是否成年(普通函数)：{ {  isAdult() }}<br />
 <hr />
 是否成年(计算属性(computed))：{ {  result }}<br />
 是否成年(计算属性(computed))：{ {  result }}<br />
 是否成年(计算属性(computed))：{ {  result }}<br />
 <hr />
 </div>
</template>
<style scoped></style>
 
执行结果：
 
 
⑧ 数据监听器（了解）
   
  
 <code>watch 用于声明在数据更改时调用的侦听回调
  
  Ⅰ、监听reactive的响应式数据
  
  
  
 
  
  -Ⅱ、监听reactive的响应式数据,这是监听country里面的某个属性，对象.属性名
  
  
  
 
  Ⅲ、监听reactive的响应式数据，监听对象的所有属性，直接传入对象， 
  并且使用 <code>deep: true 代表深度监听
  
  immediate:true 代表页面加载完就执行一次
  
  
  
 
  
   
  
 <code>watchEffect 默认监听所有的响应式数据
  
  直接使用watchEffect方法，监听所有数据,无需将要监听的响应式数据作为参数传入
  
  
  
 
  
   
  
 <code>watch vs watchEffect
  
  watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：
  
  watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
  
  watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
  
 App.vue代码示例【项目构建过程省略】：
 
<script setup>
import {  reactive, ref, watch, watchEffect } from "vue";
let city = ref("");
let address = ref("");
let country = reactive({ 
 name: "",
});
//监听ref的响应式数据
watch(city, (newValue, oldValue) => { 
 console.log(`${ oldValue}变为${ newValue}`);
 address.value = country.name + newValue;
});
//监听reactive的响应式数据,这是监听country里面的某个属性，对象.属性名
watch(
 () => country.name,
 (newValue, oldValue) => { 
 console.log(`${ oldValue}变为${ newValue}`);
 address.value = country.name + city.value;
 }
);
//监听reactive的响应式数据,如果监听对象country里面的所有属性，
//直接传入对象，并且使用 deep: true 代表深度监听
//如果要让监听对象在页面加载完就执行一次，直接使用 immediate:true
watch( () => country,
 (newValue, oldValue) => { 
 console.log(`${ oldValue}变为${ newValue}`);
 address.value = country.name + city.value;
 },
 {  deep: true, immediate: true }
);
//------------------------------------------
//更为简单的做法，直接使用watchEffect方法，监听所有数据,
//无需将要监听的响应式数据作为参数传入
watchEffect(() => { 
 address.value = country.name + city.value;
});
</script>
<template>
 <div>
 国家：<input type="text" v-model="country.name" />code>
 <hr />
 省市：<input type="text" v-model="city" />code>
 <hr />
 地址：{ {  address }}
 <hr />
 </div>
</template>
<style scoped></style>
 
 
 
⑨ 生命周期（了解）
   
  
 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好<code>数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
  
 生命周期图示
 
   
  
 常见钩子函数
  
  <code>onMounted() 注册一个回调函数，在组件挂载完成后执行。onUpdated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用。onBeforeMount()  注册一个钩子，在组件被挂载之前被调用。onBeforeUpdate()  注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。onBeforeUnmount() 注册一个钩子，在组件实例被卸载之前调用。 
  
   
  
 对于生命周期钩子的通用使用方法，请看 指南 - 生命周期钩子
  
 App.vue代码示例【项目构建过程省略】：
 
<script setup>
 import { ref,onUpdated,onMounted,onBeforeUpdate} from 'vue'
 
 let message =ref('hello')
 
 // 挂载完毕生命周期
 onMounted(()=>{ 
 console.log('-----------onMounted---------')
 let span1 =document.getElementById("span1")
 console.log(span1.innerText)
 })
 // 更新前生命周期
 onBeforeUpdate(()=>{ 
 console.log('-----------onBeforeUpdate---------')
 console.log(message.value)
 let span1 =document.getElementById("span1")
 console.log(span1.innerText)
 })
 // 更新完成生命周期
 onUpdated(()=>{ 
 console.log('-----------onUpdated---------')
 let span1 =document.getElementById("span1")
 console.log(span1.innerText)
 })
</script>
<template>
 <div>
 <span id="span1" v-text="message"></span> <br>code>
 <input type="text" v-model="message">code>
 </div>
 
</template>
<style scoped>
</style>
 
⑩ 组件化入门案例
   
  
 VUE组件: 
  
  一个页面由多个部分组成,每部分都可以理解为一个组件；而每个
  
  .vue文件可以理解为一个组件,多个.vue文件就可以构成一个整体页面，而且组件之间可以复用，这样方便维护组件化：对js/css/html统一封装,这是VUE中的概念模块化：对js的统一封装,这是ES6中的概念组件化中,对js部分代码的处理使用ES6中的模块化 
  
   
  
 传统方式编写应用：js/css/html会各自分成多个文件单独来写；
  
  组件方式编写应用：会对js/css/html统一封装
  
 工程化vue项目组件的组织过程
 
  index.html是项目的入口,其中 <div id ='app'></div>是用于挂载所有组建的元素index.html中的script标签引入了一个main.js文件,具体的挂载过程在main.js中执行main.js是vue工程中非常重要的文件,他决定这项目使用哪些依赖,导入的第一个组件App.vue是vue中的核心组件,所有的其他组件都要通过该组件进行导入,该组件通过路由可以控制页面的切换 
  
 案例需求： 创建一个页面，包含头部和菜单以及内容显示区域，每个区域使用独立组建！【涉及组件之间数据的传递】
 
 
 <code>代码如下：【创建项目、下载依赖过程省略】
 
  
  
 main.js
  
 import {  createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
 
  
  
 Header.vue
  
 <script setup></script>
<template>
 <div>欢迎： xx <a href="#">退出登录</a></div>code>
</template>
<style scoped></style>
 
  
  
 Navigator.vue
  
 
<script setup>
/* 
组件之间传递数据：父传子、子传父、兄弟传参（实际也是先通过子传父，然后再父传子实现的）
Vue3 中父组件向子组件传值可以通过 props 进行，具体操作如下：
1. 首先，在父组件中定义需要传递给子组件的值，接着，在父组件的模板中引入子组件，同时在引入子组件的标签中添加 props 属性并为其设置需要传递的值。
2. 在 Vue3 中，父组件通过 props 传递给子组件的值是响应式的。也就是说，如果在父组件中的传递的值发生了改变，子组件中的值也会相应地更新。
*/
//defineEmits 用于定义向父组件提交数据的事件以及正式提交的数据
import {  defineEmits } from "vue";
//定义一个向父组件提交数据的事件，事件名称自定义
const emits = defineEmits(["sendMessage"]);
//提交数据的方法
function send(data) { 
 emits("sendMessage", data);
}
</script>
<template>
 <div>
 <ul>
 <li @click="send('学员管理')">学员管理</li>code>
 <li @click="send('图书管理')">图书管理</li>code>
 <li @click="send('请假管理')">请假管理</li>code>
 <li @click="send('考试管理')">考试管理</li>code>
 <li @click="send('讲师管理')">讲师管理</li>code>
 </ul>
 </div>
</template>
<style scoped></style>
 
  
  
 Content.vue
  
 <script setup>
//定义接收父组件的参数
import {  defineProps } from "vue";
defineProps({ 
 //receive要和App中定义的<Content class="content" :receive="message"></Content>code>
 //名称一致，后面类型是String，因为前面传参类型是String，所以接收也要是String
 receive: String,
});
</script>
<template>
 <div>展示主要内容：{ {  receive }}</div>
</template>
<style scoped></style>
 
  
  
 App.vue
  
 <script setup>
import {  ref } from "vue";
/* 引入components下的三个组件 */
import Header from "./components/Header.vue";
import Navigator from "./components/Navigator.vue";
import Content from "./components/Content.vue";
let message = ref("");
function receiver(data) { 
 message.value = data;
}
</script>
<template>
 <div>
 { {  message }}
 <Header class="header"></Header>code>
 <Navigator @sendMessage="receiver" class="navigator"></Navigator>code>
 <Content class="content" :receive="message"></Content>code>
 </div>
</template>
<style scoped>
.header { 
 height: 80px;
 border: 1px solid red;
}
.navigator { 
 width: 15%;
 height: 660px;
 border: 1px solid green;
 float: left;
}
.content { 
 width: 84%;
 height: 660px;
 border: 1px solid yellow;
 float: right;
}
</style>
 
  
  
 代码结果演示：
  
  
  
  
  
   
  
  
  
 组件之间数据传递
  
  
  
  
  
  
  
   
  
 <code>组件之间的参数传递适合少量的数据，如果涉及大量的数据需要传递时，还是建议使用状态管理 Pinia

 
 
   上一篇： FlutterWeb启动耗时优化 
  下一篇： ISCC2024 Web部分题解 
  本文标签 
  【前端之Vue3入门快速体验】    
 
  
  声明
  本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
 如有涉及侵权，请联系本站进行删除
 转载本站原创文章，请注明来源及作者。