目录
-Vue基础-
1、插值表达式 {{}}
2、Vue核心特性：响应式
3、开发者工具Vue Devtools(极简插件下载)
4、Vue指令
v-text
v-html
v-bind
v-on
v-if
v-show
v-for
v-model
5、Vue指令修饰符
.stop
.prevent
.capture
.self
.once
.enter、.tab、.delete、.esc 等
.ctrl、.alt、.shift、.meta
.lazy
.number
.trim
6、Vue实例属性
1. data
2.compute计算属性
3.watch监听器
4.created、mounted 等生命周期钩子
7、Vue的生命周期
8、工程化开发与脚手架 Vue CLI
两种开发模式
脚手架 Vue CLI
项目目录介绍
9、组件化开发与根组件
10、VueRouter的使用
11、VueX的使用
概念：Vue 是一款用于构建用户界面的 JavaScript 框架。
快速上手：
-创建一个Vue应用-
前提条件：
- 已安装 18.3 或更高版本的 Node.js
方法1：使用npm指令构建
npm create vue@latest✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / YesScaffolding project in ./<your-project-name>...
Done.安装完后，安装依赖并启动开发服务器：
cd <your-project-name>
npm install
npm run dev当你准备将应用发布到生产环境时，请运行：
npm run build方法二：通过 CDN 使用 Vue
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>//1、引入Vue的CDN
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
//2、创建容器
<div id="app">{{ message }}</div>
//3、创建Vue实例并指定配置项
<script>const { createApp, ref } = VuecreateApp({setup() {const message = ref('Hello vue!')return {message:'Hello,vue'}}}).mount('#app')
</script>-Vue基础-
1、插值表达式 {{}}
作用：利用表达式进行插值并渲染到页面中（表达式是一个能被求值的代码）
注意事项：
- 使用数据必须存在，比如使用了msg，必须在Vue实例的data中声明该表达式，比如：
<div id="cxk">Message: {{ msg }}</div>const app = new Vue({
el : '#cxk',
data: {msg: '我叫鸡太美'
}- 支持的是表达式，而条件语句if等无法在插值表达式中使用
- 插值表达式不能够在标签中使用，比如<div title={{}}> </div>
2、Vue核心特性：响应式
响应式：数据变化，视图自动更新
3、开发者工具Vue Devtools(极简插件下载)
4、Vue指令
v-text
- 功能：更新元素的文本内容，会覆盖元素内原本的内容。
- 示例：
<div id="app"><p v-text="message"></p>
</div>
<script>new Vue({el: '#app',data: {message: 'Hello, Vue!'}})
</script>v-html
- 功能：更新元素的
innerHTML，会将绑定的值作为 HTML 代码进行渲染。 - 示例：
<div id="app"><div v-html="htmlContent"></div>
</div>
<script>new Vue({el: '#app',data: {htmlContent: '<h1>这是一个标题</h1>'}})
</script>v-bind
- 功能：用于动态绑定 HTML 属性，可简写为
:。 - 示例：
<div id="app"><img :src="imageUrl" alt="示例图片">
</div>
<script>new Vue({el: '#app',data: {imageUrl: 'https://example.com/image.jpg'}})
</script>v-on
- 功能：用于绑定 DOM 事件，可简写为
@。 - 示例：
<div id="app"><button @click="handleClick">点击我</button>
</div>
<script>new Vue({el: '#app',methods: {handleClick() {alert('按钮被点击了！')}}})
</script>v-if
- 功能：根据表达式的值来决定是否渲染元素。如果表达式的值为
false，元素会被完全从 DOM 中移除；为true时才会渲染。 - 示例：
<div id="app"><p v-if="isShow">这是一个条件渲染的段落</p>
</div>
<script>new Vue({el: '#app',data: {isShow: true}})
</script>v-show
- 功能：根据表达式的值来决定元素是否显示。如果表达式的值为
false，元素会通过设置display: none来隐藏，但元素仍然存在于 DOM 中。 - 示例：
<div id="app"><p v-show="isVisible">这是一个通过 v-show 控制显示的段落</p>
</div>
<script>new Vue({el: '#app',data: {isVisible: false}})
</script>v-for
- 功能：用于基于一个数组或对象来渲染列表。
- 示例：
// items是源数据的数组名，item是该数组的迭代项，key用于管理状态，通过追踪id标识重新排序现有元素
<div id="app"><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</div>
<script>new Vue({el: '#app',data: {items: [{ id: 1, name: '苹果' },{ id: 2, name: '香蕉' },{ id: 3, name: '橙子' }]}})
</script>v-model
- 功能：用于在表单元素上创建双向数据绑定，即数据的变化会反映到视图上，视图的变化也会更新数据。
- 示例：
<div id="app"><input v-model="message" type="text"><p>你输入的内容是：{{ message }}</p>
</div>
<script>new Vue({el: '#app',data: {message: ''}})
</script>案例：
图片切换案例
- 创建一个div盒子，用于存放图片以及上下一页两个按钮，div使用id属性进行Vue实例绑定，img通过v-bing动态绑定图片路径src，两个button按钮绑定点击事件
- 创建Vue实例，el绑定，data中，创建image[]数组用于存放图片路径，currentIndex设置初始值为0用于展示第一张图片，计算属性computed中，返回图片路径，methods方法中，创建两个方法，一个切换上一页，一个切换下一页
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 图片切换</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><!-- 显示当前图片 --><img :src="currentImage" alt="图片"><!-- 上一张图片按钮 --><button @click="prevImage">上一张</button><!-- 下一张图片按钮 --><button @click="nextImage">下一张</button></div><script>new Vue({el: '#app',data: {// 图片数组，存储图片的链接images: ['https://dummyimage.com/800x600/ff0000/ffffff','https://dummyimage.com/800x600/00ff00/000000','https://dummyimage.com/800x600/0000ff/ffffff'],// 当前显示的图片索引currentIndex: 0},computed: {// 计算属性，返回当前要显示的图片链接currentImage() {return this.images[this.currentIndex];}},methods: {// 切换到上一张图片的方法prevImage() {// 当索引为 0 时，是，切换到最后一张图片，不是，切换上一张图片this.currentIndex = this.currentIndex === 0 ? this.images.length - 1 : this.currentIndex - 1;},// 切换到下一张图片的方法nextImage() {// 当索引为最后一张图片的索引时，将索引设置为 0this.currentIndex = this.currentIndex === this.images.length - 1 ? 0 : this.currentIndex + 1;}}});</script>
</body></html> 列表删除案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 列表删除案例</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><ul><!-- 使用 v-for 指令遍历 items 数组 --><li v-for="item in items" :key="item.id">{{ item.name }}<!-- 点击删除按钮时调用 deleteItem 方法，并传入当前项的 id --><button @click="deleteItem(item.id)">删除</button></li></ul></div><script>new Vue({el: '#app',data: {// 模拟列表数据items: [{ id: 1, name: '苹果' },{ id: 2, name: '香蕉' },{ id: 3, name: '橙子' }]},methods: {// 删除数据的方法deleteItem(id) {// 使用 filter 方法过滤掉 id 匹配的项this.items = this.items.filter(item => item.id !== id);}}});</script>
</body></html> 5、Vue指令修饰符
事件修饰符
.stop
- 功能：阻止事件冒泡。事件冒泡指的是当一个元素上的事件被触发时，该事件会依次向上级元素传播，比如在嵌套div中，一个点击触发多个点击，点击事件从内向外顺序依次执行，就叫时间冒泡，反之则叫事件捕获。使用
.stop可以阻止这种传播。 - 示例：
<div @click="outerClick"><button @click.stop="innerClick">点击我</button>
</div>.prevent
- 功能：阻止事件的默认行为。例如，在表单提交时，默认会刷新页面，使用
.prevent可以阻止这种默认行为。 - 示例：
<form @submit.prevent="submitForm"><input type="text" /><button type="submit">提交</button>
</form>.capture
- 功能：使用事件捕获模式。默认情况下，事件是从内向外冒泡的，而使用
.capture会让事件从外向内捕获。 - 示例：
<div @click.capture="outerClick"><button @click="innerClick">点击我</button>
</div>.self
- 功能：只有当事件是从绑定元素本身触发时才会执行处理函数，而不是从它的子元素触发。
- 示例：
<div @click.self="divClick"><button @click="buttonClick">点击我</button>
</div>.once
- 功能：事件处理函数只执行一次，之后再触发该事件就不会再执行处理函数了。
- 示例：
<button @click.once="clickOnce">只点击一次</button>按键修饰符
.enter、.tab、.delete、.esc 等
- 功能：分别监听回车键、制表键、删除键、Esc 键等特定按键的事件。
- 示例：
<input @keyup.enter="submitOnEnter" />系统修饰符
.ctrl、.alt、.shift、.meta
- 功能：分别监听 Ctrl 键、Alt 键、Shift 键、Meta 键（在 Windows 上是 Windows 键，在 Mac 上是 Command 键）与其他按键或鼠标事件的组合。
- 示例：
<button @click.ctrl="ctrlClick">Ctrl + 点击</button>表单修饰符
.lazy
- 功能：将
v-model的数据更新从默认的input事件改为change事件。也就是说，只有在输入框失去焦点或者按下回车键时，数据才会更新。 - 示例：
<input v-model.lazy="message" />.number
- 功能：将
v-model绑定的输入值自动转换为数字类型。 - 示例：
<input v-model.number="age" type="number" />.trim
- 功能：自动过滤输入值首尾的空格。
- 示例：
<input v-model.trim="username" />6、Vue实例属性
1. data
- 功能：
data是一个对象，用于存储 Vue 实例的数据。这些数据可以在模板中使用，并且当数据发生变化时，Vue 会自动更新与之绑定的 DOM 元素，实现数据的双向绑定。 - 使用方式：
data可以是一个对象，也可以是一个函数（在组件中必须是函数）。
2.compute计算属性
作用：能够根据已有的数据计算出新的值
基本语法：在 Vue 实例中，计算属性定义在 computed 选项里，其形式为一个对象，对象的每个属性都是一个函数。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 计算属性示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><!-- 使用计算属性 --><p>全名: {{ fullName }}</p></div><script>new Vue({el: '#app',data: {// 定义数据firstName: '张',lastName: '三'},computed: {// 定义计算属性fullName: function () {return this.firstName + ' ' + this.lastName;}}});</script>
</body></html>compute计算属性与methods方法的区别：
compute用于对数据的处理求得结果，methods用于处理业务逻辑
3.watch监听器
在 Vue 里，watch 监听器的作用是监测数据的变化，当被监听的数据发生改变时，会执行特定的操作。
使用场景
异步操作：发送网络请求，请求数据资源，比如搜索框根据关键词变化发送请求
复杂数据处理：一个数据变化会影响多个数据变化或需要重新计算，比如计算商品总价
事例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Watch 示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><input v-model="message" placeholder="输入内容"><p>当前输入: {{ message }}</p></div><script>new Vue({el: '#app',data: {message: ''},watch: {// 监听 message 属性的变化message(newValue, oldValue) {console.log(`新值: ${newValue}, 旧值: ${oldValue}`);}}});</script>
</body></html>4.created、mounted 等生命周期钩子
- 功能：生命周期钩子是一些特殊的方法，它们在 Vue 实例的不同生命周期阶段被自动调用。例如，
created钩子在实例已经创建完成之后被调用，mounted钩子在挂载完成后被调用。 - 使用方式：在 Vue 实例中直接定义这些钩子函数。
- 示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 生命周期钩子示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><!-- 模板内容 --></div><script>new Vue({el: '#app',created() {console.log('实例已创建');},mounted() {console.log('实例已挂载');}});</script>
</body></html>7、Vue的生命周期
Vue的生命周期分为四个阶段：创建，挂载，更新，销毁
创建（beforeCreate、created）
beforeCreate：此时 data 和 methods 等属性还未初始化，无法访问它们。通常用于在实例初始化开始时执行一些通用的初始化操作，比如添加全局的加载状态
created：可以访问 data 和 methods，但 DOM 还未挂载。常用于发送网络请求来获取初始数据。
挂载（beforeMount、mounted）
beforeMount：template 模板已编译为 render 函数，但 $el 仍然是虚拟的 DOM 节点。
mounted：可以操作 DOM 元素，常用于初始化第三方插件、操作 DOM 元素等。
更新（beforeUpdate、updated）
beforeUpdate：可以在数据更新但 DOM 未更新时进行一些操作，比如保存当前 DOM 状态。
updated：可以在 DOM 更新后进行一些操作，比如获取更新后的 DOM 元素信息。
销毁（beforeDestroy、destroyed）
beforeDestroy：可以在实例销毁前进行一些清理工作，比如取消定时器、解绑自定义事件等。
destroyed：实例已经完全销毁，无法再访问实例的属性和方法。
激活（仅适用于 <keep-alive> 包裹的组件）
activated：当组件被缓存并重新激活时执行，可用于恢复组件状态或重新发起请求。
deactivated：当组件被缓存时执行，可用于暂停组件中的一些操作，如暂停定时器。
错误捕获（errorCaptured）
触发时机：当捕获一个来自子孙组件的错误时被调用。
特点：可以在这个钩子中处理错误，防止错误向上传播，同时可以记录错误信息。
8、工程化开发与脚手架 Vue CLI
两种开发模式
传统开发模式：基于html、css、js文件，直接引入核心包，开发Vue
工程化开发模式：基于构建工具（webpack、vite）的环境开发Vue
脚手架 Vue CLI
概念：是一个全局命令工具
使用步骤：
1. 安装 Node.js 和 npm
//访问node.js官网下载安装后，通过一下命令验证安装
node -v
npm -v2.安装 Vue CLI
//使用npm全局安装
npm install -g @vue/cli
//使用yarn全局安装
yarn global add @vue/cli//验证安装成功
vue --version3.创建项目
vue create project-name
4.启动项目
npm run serve 或 yarn serve项目目录介绍
9、组件化开发与根组件
组件化：将一个复杂的应用拆分成多个小的、可复用的组件，每个组件负责一个特定的功能或页面部分
优势：1、提高代码复用 2、便于维护与管理
语法高亮插件：Vetur
插件使用一：<vue +回车 生成组件模版，类似于！+回车生成html模版
组件注册方式：
局部注册：只能在注册的组件内使用
1、创建.vue文件
2、在使用的组件内导入并注册
全局注册：所有组件内都能使用
1、创建.vue文件
2、main.js中进行全局注册
组件的三大组成部分
注意点：
<template>只能有一个根元素
<style> 为全局样式，影响所有组件 <style scoped>为局部样式，只作用于当前组件
<script>中data是一个函数
组件通信
概念：指组件与组件之间的数据传递
组件之间的关系：父子关系与非父子关系
父子关系（props和$emit）
非父子关系: 1.provide与inject 2.eventbus
通信解决方案： vueX
10、VueRouter的使用
安装：
npm install vue-router基本配置：
创建tools文件夹，创建Router.js文件（常规写在main.js中，但代码长，不适合）
导入Vue模块，使用createRouter函数创建路由实例，配置相关参数
import { createRouter, createWebHashHistory } from "vue-router";
import Login from "../components/login/Login.vue";
import Home from "../components/home/Home.vue";
import Order from "../components/order/Order.vue";
import Goods from "../components/goods/Goods.vue";
import AddGood from "../components/goods/AddGood.vue";
import GoodCategory from "../components/goods/GoodCategory.vue";
import ManagerList from "../components/manager/ManagerList.vue";
import ManagerOrder from "../components/manager/ManagerOrder.vue";
import ManagerReqList from "../components/manager/ManagerReqList.vue";
import TradeInfo from "../components/financial/TradeInfo.vue";
import TradeList from "../components/financial/TradeList.vue";
import DataCom from "../components/financial/DataCom.vue";
import Store from "../tools/Storage";const Router = createRouter({history: createWebHashHistory(),routes: [{path: "/login",component: Login,name: "login",},{path: "/home",component: Home,name: "home",children: [{path: "order/:type", // 0是普通订单 1是秒杀订单,component: Order,name: "Order",},{path: "goods/:type", // 0是普通商品 1是秒杀商品 2是今日推荐,component: Goods,name: "Goods",},{path: "addGood/:type", // 0是普通商品 1是秒杀商品 2是今日推荐,component: AddGood,name: "AddGood",},{path: "category",component: GoodCategory,name: "GoodCategory",},{path: "ownerlist",component: ManagerList,name: "ManagerList",},{path: "ownerreq",component: ManagerReqList,name: "ManagerReqList",},{path: "ownerorder",component: ManagerOrder,name: "ManagerOrder",},{path: "tradeinfo",component: TradeInfo,name: "TradeInfo",},{path: "tradelist",component: TradeList,name: "TradeList",},{path: "data",component: DataCom,name: "DataCom",},],redirect: "/home/order/0", //重定向，访问主页默认跳转到订单管理的普通订单},],
});Router.beforeEach((from) => {let isLogin = Store.getters.isLogin;if (isLogin || from.name == "login") {return true;} else {return { name: "login" };}
});export default Router;
其中参数：
1. history
history 配置项用于指定路由的历史模式，这决定了 URL 的表现形式以及路由切换的机制。Vue Router 4 提供了三种历史模式：
createWebHistory：使用 HTML5 History API 实现单页面应用的路由切换，URL 看起来像普通的 URL，没有哈希符号 #
createWebHashHistory：使用 URL 的哈希部分（# 后面的内容）来实现路由切换，URL 中会带有哈希符号
createMemoryHistory：这种模式适用于 SSR（服务器端渲染）环境，它将路由历史存储在内存中，不依赖浏览器的历史记录。
2.routes
routes 是一个数组，用于定义路由规则，每个规则是一个对象，包含以下常见属性：
path：路由的路径，可以是静态路径，也可以包含动态参数。
name：路由的名称，用于方便在代码中进行路由导航
component 或 components
component：指定该路由对应的组件，可以是静态导入的组件，也可以是使用动态导入（路由懒加载）的组件。components：当一个路由需要渲染多个组件时使用，是一个对象，键为组件的名称，值为对应的组件。例如：
children：用于定义嵌套路由，是一个数组，包含子路由的配置。
meta：用于存储路由的元信息，例如路由的权限要求、页面标题等。
3. scrollBehavior
scrollBehavior 是一个函数，用于控制路由切换时的滚动行为。它接收三个参数：to（目标路由）、from（当前路由）和 savedPosition（如果是通过浏览器的前进 / 后退按钮切换路由，会有保存的滚动位置）。
4. parseQuery 和 stringifyQuery
parseQuery：自定义查询字符串的解析函数。stringifyQuery：自定义查询字符串的序列化函数。
路由跳转：跳转方式根据实际情况写
1.使用<router-link to=""> 代替a标签
2.使用push方法
// 点击跳转到Home.vuesetTimeout(() => {this.$router.push({ name: "home" })}, 1500);3.element组件
<el-menu-item index="/home/order/1"></el-menu-item>Vue路由-重定向redirect
当一个页面含多个链接时，从一个页面跳转到另一个页面，固定需要跳转的第一个页面就是重定向，比如，从login页面到home页面，home有首页，美食等小模块，想要直接跳转到首页，这时就要用到重定向，又比如没有该路径，not found 诸如此类
11、VueX的使用
概念：Vuex是一个状态管理工具
使用场景：
某个状态多个组件使用，比如个人信息
多个组件共同维护一份数据，比如购物车
另外还有登录状态管理等
使用步骤：
1、在tools文件夹中创建一个storage.js文件
2、导入VueX或者导入 createStore 函数
//导入Vuex
import Vue from 'vue'
import Vuex from 'vuex'//导入Vuex中的createStroe函数
import { createStore } from "vuex";3、创建仓库
const Store = createStore({ )};4、导出到main.js
export default Store;5.设置state等属性
import { createStore } from "vuex";// 登录状态管理
const Store = createStore({state() {return {userName: "",userPassword: "",};},getters: {isLogin: (state) => {return state.userName.length > 0;},},mutations: {clearUserInfo(state) {state.userName = "";state.userPassword = "";},registUserInfo(state, { name, password }) {state.userName = name;state.userPassword = password;},},
});export default Store;
state：存储用户的用户名和密码。getters：通过isLogin判断用户是否已登录。mutations：提供了两个方法，clearUserInfo用于清除用户信息，registUserInfo用于注册用户信息。
