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

Vue3

简介

Vue官网

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

Vue的 **
两个核心功能
**：

**声明式渲染**：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

**响应性**：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM

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

在这里插入图片描述

创建一个
index.html
文件，引入
vue.global.js
直接引入方式：<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

也可以用浏览器打开 vue.global.js, 然后copy所有内容，将其保存在一个vue.js的文件,导入vue.js文件即可

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title><!-- 导入vue依赖    核心的vue3的js文件 --><scriptsrc="./js/vue.js"></script></head><body><divid="app"><!-- 绑定div内部元素：
        方式① v-text=声明的变量名称；
        方式②：{{声明的比变量名称}} --><h1v-text="message"v-bind:style="styleColor">你好</h1><h1style="background-color: yellow">{{message}}</h1><button@click="fun01()">change</button></div><script>const app = Vue.createApp({setup(){//定义数据     以变量、对象的形式//绑定div内部元素：//方式① v-text=声明的变量名称； 方式②：{{声明的比变量名称}}let message ="helloVue";//绑定style样式用v-bind,参考下面let styleColor ={"background-color":"red"};//绑定事件用@click,参考下面functionfun01(){alert("20240710205533----Vue绑定事件测试!");}//在return中要返回变量、方法，才能和HTML元素进行关联return{
          message,
          styleColor,
          fun01,};},});//将app对象挂载指定元素上，这样被挂载的元素内部就可以通过Vue框架实现数据的渲染了
    app.mount("#app");</script></body></html>

执行结果：

Vue3通过Vite实现工程化

① Vite的介绍

Vite官网

vite是一种
前端项目构建工具
，能够显著提升前端开发体验

② Vite创建Vue3工程化项目

在本地创建一个文件夹，用于存储多个前端项目，然后用VScode打开

按照顺序运行以下命令：

① 创建 vite 命令：
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项目的目录结构

在这里插入图片描述

public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。
src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议： 1. assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。2. components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。3. layouts/ 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。4. pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。5. plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。6. router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。7. store/ 目录：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率。8. 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入门)

**
VUE组件: 
**

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

**
.VUE文件: 
**

(Single-File Component，简称 SFC，单文件组件) 该文件是对html/css/js文件的统一封装

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

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>//在 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自增方法functioncountNumIncr(){
  countNum.value++;}//让countNum自减方法functioncountNumDecr(){
  countNum.value--;}//显示countNum值的方法functionshowCountNum(){alert(countNum.value);}//     return {//       countNum,//       countNumIncr,//       countNumDecr,//       showCountNum,//     };//   },// };</script><template><!-- 页面的样式的是html代码--><div><button @click="countNumIncr()">+</button><span>{{ countNum }}</span><button @click="countNumDecr()">-</button><br /><hr /><button @click="showCountNum()">显示countNum值</button></div></template><style scoped>/** 存储的是css代码! <style scoped> 是 Vue.js 单文件组件中用于设置组件样式的一种方式。
    它的含义是将样式局限在当前组件中，不对全局样式造成影响。 */</style>

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

Vue3视图渲染技术

① 插值表达式和文本渲染

**

Ⅰ、插值表达式渲染

插值表达式

** :最基本的数据绑定形式是

文本插值

，它使用的是“Mustache”语法 ,即双大括号

{{}}

插值表达式

** :支持使用

{{}}

绑定

变量名称

、

函数调用

、

javascript的运算表达式

等内容

App.vue代码示例【

项目构建过程省略

】：

<script setup>let msg ="①插值表达式渲染数据到元素指定位置，使用{{}}接收展示信息！";let msg2 =61;letresult=()=>{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>

执行结果图示

**:
在这里插入图片描述

**

Ⅱ、文本渲染

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

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

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

App.vue代码示例【

项目构建过程省略

】：

<script setup>let msg ="①插值表达式渲染数据到元素指定位置，使用{{}}接收展示信息！";let msg2 =61;letresult=()=>{return"②插值表达式支持函数的调用！";};</script><template><div><span v-text="msg"></span><hr /><span v-text="msg2"></span><hr /><span v-text="result()"></span><hr /><span v-text="age > 60 ? '老人' : '非老人'"></span><hr /><!--  v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本 --><span v-text="`<font color='red'>${msg2}</font>`"></span><hr /><span v-html="`<font color='red'>${msg2}</font>`"></span><hr /></div></template><style scoped></style>

执行结果图示

**:
在这里插入图片描述

② Attribute属性渲染

 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"><img :src="data.logo":title="data.name"/><br /><input type="button":value="`点击访问${data.name}`"/></a></div></div></template><style scoped></style>

执行结果图示

**:
在这里插入图片描述

③ 事件的绑定

v-on
来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。
vue
中的
事件名
一般是
原生事件
名去掉
on
如：
onClick --> click

**语法：
v-on:click="handler"
****简写：
@click="handler"
**
handler
的值可以是
方法事件处理器
,也可以是
内联事件处理器
方法事件处理器是编程中的一个概念，‌它指的是确定控件如何响应事件的过程。‌事件处理器的名称由控件名称和相应事件的名称共同构成，‌例如“Form Load ()”表示对象是“Form”窗体，‌“Load”表示窗体的加载事件，‌即窗体启动时发生的事件。‌
内联事件处理器是指在事件被触发时执行的内联JavaScript语句。‌这种处理器通常用于在特定的事件（‌如点击、‌加载等）‌发生时执行特定的代码块。‌

App.vue代码示例【

项目构建过程省略

】：

<script setup>/* 
事件的绑定

我们可以使用 v-on 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。

- 用法：v-on:click="handler" 或简写为 @click="handler"
- vue中的事件名=原生事件名去掉on 前缀   如:onClick --> click
- handler的值可以是方法事件处理器,也可以是内联事件处理器
- 绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下
  - .once：只触发一次事件。[重点]
  - .prevent：阻止默认事件。[重点]
  - .stop：阻止事件冒泡。
  - .capture：使用事件捕获模式而不是冒泡模式。
  - .self：只在事件发送者自身触发时才触发事件。
*/import{ ref }from"vue";// 响应式数据 当发生变化时,会自动更新 dom树let count =ref(0);//增加letaddCount=()=>{
  count.value++;};// //减少// let incrCount = () => {//   count.value--;// };// 通过事件对象阻止组件的默认行为functionstopCount(event){let flag =confirm("确定访问qq音乐吗？");if(!flag){
    event.preventDefault();}};// @click.prevent=""  不询问直接阻止访问百度functionpreventCount(event){alert("@click.prevent方法不询问直接阻止访问百度");};</script><template><div><h1>count的值是:{{ count }}</h1><hr /><!-- 方法事件处理器 --><button v-on:click="addCount()">增加</button><br /><hr /><!-- 内联事件处理器 将方法逻辑写在标签里面--><button @click="count--">减少</button><br /><hr /><!-- 事件修饰符 once 只绑定事件一次 --><button @click.once="count++">.once 方法只触发一次事件(增加)</button><br /><hr /><!-- 事件修饰符 prevent 阻止组件的默认行为 --><a href="http://www.baidu.com" @click.prevent="preventCount()">事件修饰符 prevent 阻止组件的默认行为</a><br /><hr /><!--原生js方式阻止组件默认行为(推荐)--><a href="https://y.qq.com/" @click="stopCount($event)">原生js方式阻止组件默认行为(推荐)</a><br /></div></template><style scoped></style>

代码结果演示：

vue事件绑定代码结果演示

④ 响应式基础

普通数据转换为响应式数据的两种方式

Ⅰ、**
ref 函数
：适合
单个变量
**

在 script 标签中操作 ref 函数要通过 .value

在 template 标签中操作 ref 函数则不需要 .value

Ⅱ、**
reactive
函数：适合
对象
**

在 script/template 标签中操作 reactive 响应式数据时直接使用对象名.属性名方式即可

App.vue代码示例【

项目构建过程省略

】：

<script setup>import{ ref, reactive }from"vue";let num =ref(0);functionaddNum(){
  num.value++;}let user =reactive({name:"",age:16,});functionaddAge(){
  user.age++;}</script><template><div><h1>ref 计数结果：{{ num }}</h1><hr /><button @click="addNum()">ref:【方法事件处理器】绑定事件计数</button><hr /><button @click="num++">ref:【内联事件处理器】template标签中操作ref无需.value
    </button><hr /><hr /><h1>reactive 年龄值：{{ user.age }}</h1><hr /><button @click="addAge()">reactive:【方法事件处理器】绑定事件计算年龄</button><hr /><button @click="user.age++">reactive:【内联事件处理器】script/template标签中操作reactive无需.value
    </button></div></template><style scoped></style>

代码结果演示：

ref reacitve响应式数据代码演示

拓展
：**扩展响应式关键字
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><h1 v-else>"一个 v-else 元素必须跟在一个 v-if 元素后面,否则它将不会被识别"</h1><hr /><h1 v-show="flag">"v-show: 数据为ture,元素则展示在页面上，否则不展示"</h1><hr /><button @click="flag = !flag">【内联事件处理器】数据值：{{flag}}</button></div></template><style scoped></style>

代码结果演示：

条件渲染：v-if和v-show

Ⅱ、列表渲染：

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">{{ city.name }}</li></ul></div></template><style scoped></style>

代码结果演示：

⑥ 双向绑定

单向绑定 v-bind: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变不会同步更新到响应式数据

双向绑定 v-model: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变会同步更新到响应式数据

v-model
专门
用于双向绑定
表单标签的
value属性
,语法为
v-model:value=''
,可以简写为
v-model=''

App.vue代码示例【

项目构建过程省略

】：

<script setup>import{ ref, reactive }from"vue";let cityName =ref("北京123");</script><template><div><input type="text" v-bind:value="cityName"/>"v-bind 【单向】绑定：{{ cityName }}"<hr /><hr /><input type="text" v-model="cityName"/>"v-model 【双向】绑定：{{ cityName }}"</div></template><style scoped></style>

代码结果演示：

单向绑定和双向绑定

⑦ 属性计算computed（了解）

computed() 
方法计算属性值会
基于其响应式依赖被缓存
，而
普通方法不会
具体区别参考下述代码

App.vue代码示例【

项目构建过程省略

】：

<script setup>import{ reactive, computed }from"vue";let user =reactive({name:"xiaoming",age:16,});functionisAdult(){
  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>

执行结果：
在这里插入图片描述

⑧ 数据监听器（了解）

watch
用于声明在数据更改时调用的侦听回调

Ⅰ、监听reactive的响应式数据 -Ⅱ、监听reactive的响应式数据,这是监听country里面的某个属性，对象.属性名

Ⅲ、监听reactive的响应式数据，监听对象的所有属性，直接传入对象，并且使用 deep: true 代表深度监听``````immediate:true 代表页面加载完就执行一次

watchEffect
默认监听所有的响应式数据
直接使用
watchEffect
方法，
监听所有数据
,无需将要监听的响应式数据作为参数传入

**
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:truewatch(()=> 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"/><hr />
    省市：<input type="text" v-model="city"/><hr />
    地址：{{ address }}<hr /></div></template><style scoped></style>

在这里插入图片描述

⑨ 生命周期（了解）

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好
数据侦听
，
编译模板
，
挂载实例到 DOM
，以及
在数据改变时更新 DOM
。在此过程中，它也会运行被称为
生命周期钩子的函数
，让开发者有机会在特定阶段运行自己的代码。

生命周期图示
在这里插入图片描述

常见钩子函数

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><input type="text" v-model="message"></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中的核心组件,所有的其他组件都要通过该组件进行导入,该组件通过路由可以控制页面的切换

案例需求

：** 创建一个页面，包含

头部

和

菜单

以及

内容显示区域

，每个区域使用独立组建！【

涉及组件之间数据的传递

】
在这里插入图片描述

代码如下

：【创建项目、下载依赖过程省略】**

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></template><style scoped></style>

Navigator.vue

<script setup>/* 
组件之间传递数据：父传子、子传父、兄弟传参（实际也是先通过子传父，然后再父传子实现的）
Vue3 中父组件向子组件传值可以通过 props 进行，具体操作如下：

1. 首先，在父组件中定义需要传递给子组件的值，接着，在父组件的模板中引入子组件，同时在引入子组件的标签中添加 props 属性并为其设置需要传递的值。
2. 在 Vue3 中，父组件通过 props 传递给子组件的值是响应式的。也就是说，如果在父组件中的传递的值发生了改变，子组件中的值也会相应地更新。

*///defineEmits 用于定义向父组件提交数据的事件以及正式提交的数据import{ defineEmits }from"vue";//定义一个向父组件提交数据的事件，事件名称自定义const emits =defineEmits(["sendMessage"]);//提交数据的方法functionsend(data){emits("sendMessage", data);}</script><template><div><ul><li @click="send('学员管理')">学员管理</li><li @click="send('图书管理')">图书管理</li><li @click="send('请假管理')">请假管理</li><li @click="send('考试管理')">考试管理</li><li @click="send('讲师管理')">讲师管理</li></ul></div></template><style scoped></style>

Content.vue

<script setup>//定义接收父组件的参数import{ defineProps }from"vue";defineProps({//receive要和App中定义的<Content class="content" :receive="message"></Content>//名称一致，后面类型是String，因为前面传参类型是String，所以接收也要是Stringreceive: 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("");functionreceiver(data){
  message.value = data;}</script><template><div>{{ message }}<Header class="header"></Header><Navigator @sendMessage="receiver"class="navigator"></Navigator><Content class="content":receive="message"></Content></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>

代码结果演示：

组件之间数据传递

组件之间的参数传递适合少量的数据，如果涉及大量的数据需要传递时，还是建议使用

状态管理 Pinia

标签：前端

本文转载自: https://blog.csdn.net/weixin_44666786/article/details/140591230
版权归原作者 66678666 所有，如有侵权，请联系我们删除。

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

Vue3

简介

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

Vue3通过Vite实现工程化

① Vite的介绍

② Vite创建Vue3工程化项目

③ Vite+Vue3项目的目录结构

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

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

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

Vue3视图渲染技术

① 插值表达式和文本渲染

**

**

② Attribute属性渲染

③ 事件的绑定

④ 响应式基础

⑤ 条件和列表渲染

⑥ 双向绑定

⑦ 属性计算computed（了解）

⑧ 数据监听器（了解）

⑨ 生命周期（了解）

⑩ 组件化入门案例

发表评论

“【前端之Vue3入门快速体验】”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航