Vue
介绍：Vue 是一款用于构建用户界面的渐进式的JavaScript框架。
官网：https://cn.vuejs.org/
快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js导入导出</title>
</head>
<body>
<div id="app">
<button id="btn">点我展示信息</button>
</div>
<script type="module">
//import {complexMessage} from './00showMessage.js';
import messageMethods from './00showMessage.js';
document.getElementById("btn").onclick=function(){
//complexMessage('我被点击了...');
messageMethods.complexMessage('我还是被点击了...')
}
let msg="hello vue3";
document.getElementById("元素的id属性值").innerHTML=msg;
</script>
</body>
</html>
//简单的展示信息
/* export */function simpleMessage(msg){
console.log(msg)
}
//复杂的展示信息
/* export */ function complexMessage(msg){
console.log(new Date()+": "+msg)
}
//批量导出
//export {complexMessage as cm,simpleMessage as sm}
//默认导出
export default {complexMessage ,simpleMessage }
局部使用VUE
常用指令
- 指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
- 常用指令：
v-for
- 作用：列表渲染，遍历容器的元素或者对象的属性。
- 语法： v-for = “(item,index) in items”
- 参数说明：
items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for = "item in items"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<!-- 哪个元素要出现多次,v-for指令就添加到哪个元素上 -->
<tr v-for="(article,index) in articleList">
<td>{{article.title}}</td>
<td>{{article.category}}</td>
<td>{{article.time}}</td>
<td>{{article.state}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<!-- <tr>
<td>标题2</td>
<td>分类2</td>
<td>2000-01-01</td>
<td>已发布</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>标题3</td>
<td>分类3</td>
<td>2000-01-01</td>
<td>已发布</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr> -->
</table>
</div>
<script type="module">
//导入vue模块
import {createApp} from
'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建应用实例
createApp({
data() {
return {
//定义数据
articleList: [{
title: "医疗反腐绝非砍医护收入",
category: "时事",
time: "2023-09-5",
state: "已发布"
},
{
title: "中国男篮缘何一败涂地？",
category: "篮球",
time: "2023-09-5",
state: "草稿"
},
{
title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
category: "旅游",
time: "2023-09-5",
state: "已发布"
}]
}
}
}).mount("#app")//控制页面元素
</script>
</body>
</html>
v-bind
- 作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
- 语法：v-bind:属性名=“属性值”
- 简化：:属性名=“属性值”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 常规模式-->
<a href="https://www.itheima.com">黑马官网</a>
<br>
<!-- vue模式-->
<a v-bind:href="url">黑马官网</a>
<br>
<!-- vue模式-->
<a :href="url">黑马官网</a>
</div>
<script type="module">
//引入vue模块
import {createApp} from
'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
url: 'https://www.itheima.com'
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
v-if & v-show
- 作用：这两类指令，都是用来控制元素的显示与隐藏的
- v-if
语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
其它：可以配合 v-else-if / v-else 进行链式调用条件判断
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
- v-show
语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
手链价格为: <span v-if="customer.level>=0 && customer.level<=1">9.9</span>
<span v-else-if="customer.level>=2 && customer.level<=4">19.9</span>
<span v-else>29.9</span>
<br/>
手链价格为: <span v-show="customer.level>=0 && customer.level<=1">9.9</span>
<span v-show="customer.level>=2 && customer.level<=4">19.9</span>
<span v-show="customer.level>=5">29.9</span>
</div>
<script type="module">
//导入vue模块
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
customer: {
name: '张三',
level: 2
}
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
v-on
- 作用：为html标签绑定事件
- 语法：
v-on:事件名="函数名"
简写为 @事件名="函数名"
createApp({ data(){需要用到的数据}, methods:{需要用到的方法} })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="money">点我有惊喜</button>
<button @click="love">再点更惊喜</button>
</div>
<script type="module">
//导入vue模块
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
}
},
methods: {
money: function () {
alert('送你钱100')
},
love: function () {
alert('爱你一万年')
}
}
}).mount("#app");//控制html元素
</script>
</body>
</html>
v-model
- 作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
- 语法：v-model=“变量名”
Vue生命周期
- 生命周期：指一个对象从创建到销毁的整个过程。
- 生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码
- Vue生命周期典型的应用场景:
- 在页面加载完毕时，发起异步请求，加载数据，渲染页面（下图中，红色框内就是生命周期方法）
- 常用的方法是：mounted（挂载完成）
Axios
介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn/
Axios-请求方式别名
- 为了方便起见，Axios已经为所有支持的请求方法提供了别名
- 格式：axios.请求方式(url [, data [, config]])
axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
console.log(result.data);
}).catch((err) => {
console.log(err);
});
axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update','id=1').then((result) => {
console.log(result.data);
}).catch((err) => {
console.log(err);
});
案例
整站使用Vue(工程化)
环境准备
-
介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。
-
create-vue提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包
-
依赖环境：NodeJS
-
npm：Node Package Manager，是NodeJS的软件包管理器。
Vue项目创建和启动
Vue项目-创建
创建一个工程化的Vue项目，执行命令：npm init vue@latest
Vue项目-安装依赖
进入项目目录，执行命令安装当前项目的依赖：npm install
Vue项目-目录结构
Vue项目-访问页面
Vue项目开发流程
API风格
Vue的组件书写分为风格：
- 选项式API
- 组合式API
案例
Element Plus
- 介绍：Element：是饿了么团队研发的，基于 Vue 3，面向设计师和开发者的组件库。
- 组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。
- 官网：https://element-plus.org/zh-CN/#/zh-CN
快速入门
常用组件
大事件项目
项目地址：https://fe-bigevent-web.itheima.net/login
环境准备
- 创建Vue工程
- npm init vue@latest
- 安装依赖
- Element-Plus ： npm install element-plus --save
- Axios ： npm install axios
- Sass ： npm install sass -D
- 目录调整
- 删除components下面自动生成的内容
- 新建目录api、utils、views
- 将资料中的静态资源拷贝到assets目录下
- 删除App.uve中自动生成的内容
注册
跨域
由于浏览器的同源策略限制，向不同源(不同协议、不同域名、不同端口)发送ajax请求会失败
配置代理
- request.js中配置baseURL的值为/api
- vite.config.js中配置：
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
优化axios响应拦截器
路由
- 路由，决定从起点到终点的路径的进程
- 在前端工程中，路由指的是根据不同的访问路径，展示不同组件的内容
- Vue Router是Vue.js的官方路由
小结
子路由
- 配置子路由
//定义路由关系
const routes = [
{path: '/login', component: LoginVue},
{
path: '/', component: LayoutVue, redirect: '/article/manage', children: [
{path: '/article/category', component: ArticleCategoryVue},
{path: '/article/manage', component: ArticleManageVue},
{path: '/user/info', component: UserInfoVue},
{path: '/user/avatar', component: UserAvatarVue},
{path: '/user/resetPassword', component: UserResetPasswordVue}
]
}
]
Pinia状态管理库
- Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态。
- 安装pinia：npm install pinia
- 在vue应用实例中使用pinia
- 在src/stores/token.js中定义store
- 在组件中使用store
Axios请求拦截器
每次请求，在请求路经中封装token会很繁琐，可以通过Axios的拦截器机制，来实现统一封装。
Pinia持久化插件-persist
- Pinia默认是内存存储，当刷新浏览器的时候会丢失数据。
- Persist插件可以将pinia中的数据持久化的存储。
- 操作步骤：
1.安装persist : npm install pinia-persistedstate-plugin
2.在pinia中使用persist
3.定义状态Store时指定持久化配置参数
token.js
未登录统一处理
import router from '@/router'
//添加响应拦截器
instance.interceptors.response.use(
result => {
//判断业务状态码
if (result.data.code === 0) {
return result.data;
}
//操作失败
//alert(result.data.msg?result.data.msg:'服务异常')
ElMessage.error(result.data.msg ? result.data.msg : '服务异常')
//异步操作的状态转换为失败
return Promise.reject(result.data)
},
err => {
//判断响应状态码,如果为401,则证明未登录,提示请登录,并跳转到登录页面
if (err.response.status === 401) {
ElMessage.error('请先登录')
router.push('/login')
} else {
ElMessage.error('服务异常')
}
return Promise.reject(err);//异步的状态转化成失败的状态
}
)
添加文章分类
修改文章分类
删除文章分类
文章列表查询
添加文章
顶部导航栏信息显示
下拉菜单功能
基本资料修改
用户头像修改
扫一扫
5689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
