当前位置：首页 > news >正文

【VUE3】新版Vue3+ElementPlus全家桶开发视频项目实战

news 2024/11/28 16:38:35

VUE 介绍

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

Vue.js是一个MVVM(Model - View - ViewModel)的SPA框架。

Model：数据。
View：视图。
ViewModel：连接View与Model的纽带。
　　Vue.js的安装使用方式有几种，简单的只需要引入一个第三方的JS包即可。在中引入Vue.js包。

本地搭建 Vue 单页应用，可使用npm安装方式，即本文主要内容。

PNPM常用命令

pnpm i //pnpm安装
pnpm create vite //创建项目
pnpm dev //运行项目

VUE3常见语法汇总

ref()  //const count = ref(0)  //count.value（访问值，包括对象要加.value） //任何类型的值，包括深层嵌套的对象或则JS内置数据结构 
await nextTick() //要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API
reactive() //只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)它不能持有如 string、number 或 boolean 这样的原始类型
模板语法1：<span>Message: {{ msg }}</span>
模板语法2（插入HTML）：<span v-html="rawHtml"></span> 
指令：<div v-bind:id="xd"></div> //常见指令 :id、:disable、:href
计算属性：（1）、import { ref, computed } from "vue";  （2）、const booksLength = computed(() => {  return list.value.books.length > 0 ? "Yes" : "No"; }); （3）、 <span>{{ booksLength }}</span> // 不是以一个函数执行,不加()条件渲染：v-if、v-else、v-else-if、v-show
列表渲染：（1）、v-for（<li v-for="item in courseList">{{ item }}</li>） ；（2）、of（<li v-for="item of courseList">{{ item }}</li>）
#v-if和v-for是不推荐一起使用在同一个标签
事件监听：v-on:click="handler"  或则 @click="handler"
侦听器：watch（我们需要在状态变化时执行一些“副作用：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态）
侦听器：watchEffect()
onMounted：是一个生命周期钩子(生命周期函数)，用于在组件实例被挂载到 DOM 上后执行代码。
onUnMounted：//组件卸载之后

第二章搭建Vue3的开发环境+初始Vue3

第1集详解搭建Vue3的开发环境和注意事项

Node环境安装
安装npm 需要安装note.js（NPM是包含在Node.js里的包管理工具），它具有以下功能：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户把自己编写的包或插件上传到NPM服务器供别人下载使用。来自各地的开源软件开发者可以使用 npm 互相分享和借鉴。包的结构使软件开发者能够轻松跟踪项目依赖项和版本。
- Node版本选择
  - 下载地址：https://nodejs.org/en/download

（1）、检查node版本

node -v

（2）、检查npm 版本

npm -v

（3）、配置npm下载时的默认安装目录和缓存日志目录

这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为npm install express [-g] 执行全局安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径目录下，久而久之C盘很容易被占满（C盘足够大可以无视此步骤），通过设置，将默认安装目录和缓存日志目录重新配置到其他盘符节约C盘空间

此处举例选择放在：D:\Program\nodejs 目录下的node_global目录里（也可提前在文件资源管理器中建立好相应的文件夹）

输入以下命令配置npm的全局模块的存放路径和cache的路径：

（路径按实际情况更改为自己的路径）

npm config set prefix "D:\Program\nodejs\node_global" 
npm config set cache "D:\Program\nodejs\node_cache"

查看一下npm的安装路径

#查看npm全局安装保存路径
npm config get prefix  #查看npm安装缓存cache路径
npm config get cache

常用命令

npm install 模块 //本地安装（是将模块下载到当前命令行所在目录）
npm install -g 模块 //模块将被下载安装到“全局目录”中
npm config list //查看基本配置
npm config list -l //查看所有配置
npm config get prefix //查看全局安装默认目录
npm config get cache //查看全局安装缓存路径
npm config set prefix "目录" //设置全局安装默认目录 
npm config set cache "目录" //设置全局安装缓存目录 
npm cache clearn -force //清空缓存
npm config set registry //设置npm镜像源
npm config get registry //查看npm镜像设置

（4）、配置环境变量
步骤1：进入系统属性页面，系统----》系统信息----》高级系统设置----》高级----》环境变量-----》
步骤2：添加系统变量Path中的值，
【系统变量】下的

【Path】添加上node的安装目录路径【例如：D:\Program\nodejs】

D:\Program\nodejs

【Path】添加上刚才配置的npm下载时的默认安装目录和缓存日志目录

D:\Program\nodejs\node_global
D:\Program\nodejs\node_global\node_modules

开发编辑工具
- Vscode（Visual Studio Code）
  - 下载地址：https://code.visualstudio.com/Download
计算属性
为什么后面不加()，不是以一个函数执行
使用缓存，减少性能消耗

<script setup>
import { ref, computed } from "vue";
const list = ref({books: ["语文","数学","英语",],
});// 一个计算属性 ref
const booksLength = computed(() => {return list.value.books.length > 0 ? "Yes" : "No";
});
</script><template><p>拥有书籍的个数:</p><span>{{ booksLength }}</span>
</template>

可写计算属性

<script setup>
import { ref, computed } from "vue";
const firstName = ref("老");
const lastName = ref("王");const fullName = computed({// getterget() {return firstName.value + " " + lastName.value;},// setterset(newValue) {// 注意：我们这里使用的是解构赋值语法[firstName.value, lastName.value] = newValue.split(" ");},
});
// fullName.value = "范 冰冰";
</script><template><p>Has published books:</p><span>{{ fullName }}</span>
</template>

列表渲染

v-if和v-for是不推荐一起使用在同一个标签

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高

这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名

对象的循环便利：便利对象的值、键、索引如下：

<script setup>
import { ref } from "vue";
const courseObject = ref({ front: "js", back: "java" });
</script><template><ul><li v-for="(value, key, index) in courseObject" v-if="!value">{{ value }} - {{ key }} -{{ index }}</li></ul>
</template>

事件修饰符

.stop  //阻止事件的向上传播,阻止上层事件的发生
.prevent //阻止行为
.self //提交事件将不再重新加载页面
.capture //添加事件监听器时，使用 `capture` 捕获模式
.once //点击事件最多被触发一次
.passive //滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成

按键修饰符

.enter //enter键
.tab 
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

系统按键修饰符

.ctrl
.alt
.shift
.meta

表单输入绑定

（1）、没使用vue时需要手动处理双向数据绑定

<input:value="text"@input="event => text = event.target.value"
>

（2）、v-model 指令帮我们简化了这一步骤

<input v-model="text">

侦听器
我们需要在状态变化时执行一些“副作用：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态

<script setup>
import { ref, watch } from "vue";const question = ref("");
const answer = ref("答案");
const loading = ref(false);// 可以直接侦听一个 ref
watch(question, (newQuestion) => {if (newQuestion.includes("?")) {loading.value = true;answer.value = "Thinking...";setTimeout(() => {answer.value = "是的";}, 1000);}
});
</script>