本文介绍了Vue.js的基础使用，包括如何通过vue-cli创建项目，使用vue语法和element-ui进行表单处理，以及如何处理组件间的通信。还涉及axios的跨域请求，全局变量设置，动态路由配置，以及vuex状态管理。同时，文章还讨论了浏览器调试工具的使用和Vue开发环境的优化。
VUE的基本使用
文章目录
下载node.js
打开 Node.js 官方网站：https://nodejs.org。
cmd 输入 node -v 检查是否安装成功
安装好后
安装vue-cli
版本
“dependencies”: {
“core-js”: “^3.8.3”,
“vue”: “^2.6.14”
},
注意：vue的版本必须控制好不让报错很难发现。
vue2使用elementui
vue3使用elementPlus
vue create 文件名
创建vue脚手架
vue2或者vue3选择
vue语法
element-ui
回车键调用方法
@keyup.enter.native=‘’
按钮是否可以继续点击
:disabled=isflag//flase就是可以继续点击
## @click 和 @click.native 都是 Vue 中用于绑定点击事件的指令
如果您需要在原生的 DOM 元素上绑定点击事件，应该使用 @click；如果需要在自定义组件上绑定点击事件，或者希望组件的特定部分（例如 <slot>）能够像原生的 DOM 元素一样响应点击事件，那么应该使用 @click.native。
--原生元素指HTML中已经存在的标准元素，例如 div、span 等
--自定义组件指<PageIndexHeader></PageIndexHeader>自定义的
<el-dropdown-item @click.native="toUser">个人资料</el-dropdown-item>
表单，重置
this.$nextTick() 是 Vue.js 提供的一个异步方法，用于在下次 DOM 更新循环结束之后执行延迟回调。它的主要作用是在页面渲染后对 DOM 进行操作或读取 DOM 元素的信息。
add(){
this.dialogVisible = true;//表单框展示
this.resetForm();
},
// 重置form表单
resetForm(){
this.$nextTick(()=>{
this.$refs.form.resetFields();
});
},
主组件传递值给子组件，或者方法,动态的widht宽度:width
pageIndex.vue中
:变量名 :isCollapse
传方法
@toCollapse=“toCollapse”
<el-aside :width="aside_width" style="background-color: rgb(238, 241, 246);margin-left: -1px;">
<PageIndexAside :isCollapse="isCollapse"></PageIndexAside>
</el-aside>
<PageIndexHeader @toCollapse="toCollapse"></PageIndexHeader>
data(){
return{
isCollapse:false,
aside_width:"200px"
}
},
methods:{
toCollapse(){
this.isCollapse = !this.isCollapse;
if (!this.isCollapse){
this.aside_width="200px";
}else {
this.aside_width="64px";
}
}
}
PageIndexAside.vue：
isCollapse变量由父组件传递
props:{}
<el-menu style="height: 100%;" background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b" default-active="/home" :collapse="isCollapse" :collapse-transition="false">
props:{
isCollapse:Boolean//数据类型
}
子组件调用父组件方法
PageIndexHeader.vue
<i class="el-icon-menu" @click="collapse"></i>
methods:{
collapse(){
this.$emit("toCollapse");//调用父类名叫toCollapse的方法
}
}
pageIndex.vue
上面调用的方法与@toCollapse对应
<PageIndexHeader @toCollapse="toCollapse"></PageIndexHeader>
methods:{
toCollapse(){
this.isCollapse = !this.isCollapse;
if (!this.isCollapse){
this.aside_width="200px";
}else {
this.aside_width="64px";
}
}
}
Main.js全局
axios跨域请求
安装axios 在vue项目目录下
npm install axios --save
安装后 在main.js中
import axios from "axios";//导入axios
Vue.prototype.$axios=axios;//再将axios引入变量，可在全局方便调用
使用axios
methods:{
loadGet(){
this.$axios.get(this.$httpUrl+"/user/list").then(res=>res.data).then(res=>{
console.log(res);
});
},
loadPost(){
this.$axios.post(this.$httpUrl+"/user/listP",{}).then(res=>res.data).then(res=>{
console.log(res)
})
}
},
beforeMount() {//钩子函数
// this.loadGet();
this.loadPost();
}
后端接收跨域请求,只需一个注解@CrossOrigin。就可以了。
我测试成功的只有@CrossOrigin(origins = “*”)
@CrossOrigin(origins = "*")//成功--允许所有跨域请求
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
// @CrossOrigin(origins = "http://localhost:8090/", maxAge = 3600)
// @CrossOrigin(value = "http://localhost:8090")
@GetMapping("/list")
public List<User> list(){
return userService.list();
}
成功。
如果对axios想了解一下去搜Request.js
全局变量
设置
Vue.prototype.
h
t
t
p
U
r
l
=
"
h
t
t
p
:
/
/
l
o
c
a
l
h
o
s
t
:
8090
"
在其他文件
P
a
g
e
I
n
d
e
x
M
a
i
n
.
v
u
e
调用
t
h
i
s
.
httpUrl="http://localhost:8090" 在其他文件PageIndexMain.vue 调用 this.
httpUrl="http://localhost:8090"在其他文件PageIndexMain.vue调用this.httpUrl；方便修改url时只需修改全局变量就可以
loadGet(){
this.$axios.get(this.$httpUrl+"/user/list").then(res=>res.data).then(res=>{
console.log(res);
});
},
loadPost(){
this.$axios.post(this.$httpUrl+"/user/listP",{}).then(res=>res.data).then(res=>{
console.log(res)
})
}
请求路由
登录页面转到列表页
1.0 创建登录页面/componets/loginUser.vue
export default {
name: “loginUser”,
}
1.1.import VueRouter from ‘vue-router’
在main.js中引入模块，如果没有则在项目路径下导入
npm i vue-router@3.5.4
2.创建src/router/index.js
import VueRouter from 'vue-router';//是否导入成功
const routes = [
{
path: '/',//即用户访问的 URL 路径，这里设置为根路径 /
name:'loginUser',//表示路由名称，可用于在程序中引用该路由
component:()=> import('../components/loginUser')
//注意component，不要添加s
//使用了动态导入语法（import()）来异步加载一个名为 loginUser 的 Vue 组件
}
];
const router = new VueRouter({
mode: 'history',
routes
});
export default router;
3.打开main.js
导入
import VueRouter from ‘vue-router’;
import router from “./router”;//对应index.js中的export default router;
Vue.use(VueRouter);//VueRouter
new Vue({
router,//使用
render: h => h(App),
}).$mount(‘#app’);
4.打开App.vue
<template>
<div id="app">
<router-view/>//将路由组件插入，其他的组件删除
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
}
</style>
路由跳转
1.this.$router.replace(url)
2.用法同上：this.$router.push()
3.this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
动态列表菜单menu和vuex
通过后端返回的路径来跳转
例如：菜单表，根据用户的权限menuRight动态展示菜单列
第一步，创建菜单表，用来动态生成菜单列表
CREATE TABLE `menu` (
`id` int(11) NOT NULL,
`menucode` VARCHAR(8) DEFAULT NULL COMMENT '菜单编码',
`menulane` VARCHAR (16) DEFAULT NULL COMMENT '菜単名字',
`menuLevel` VARCHAR (2) DEFAULT NULL COMMENT '菜单级别',
`menuParentcode` VARCHAR(8) DEFAULT NULL COMMENT '菜单的父code',
`menuclick` VARCHAR(16) DEFAULT NULL COMMENT '点击触发的函数',
`menuRight` VARCHAR(8) DEFAULT NULL COMMENT '权限 超级管理员，1表示管理员，2表示普通用户',
`menuComponent` VARCHAR(200) DEFAULT NULL,#组件路径
`menuIcon` VARCHAR (100) DEFAULT NULL, #icon图标
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
BEGIN;
insert into `menu` values(1,'001','管理员管理','1',NULL,'adminManager','0','admin/adminManager','el-icon-menu');
insert into `menu` values(2,'002','用户管理','1',NULL,'userManager','0,1','user/userManager','el-icon-menu');
COMMIT;
在用户登录成功时
第二步，在用户登录时将菜单列表的数据返回给前端调用
//登录
@RequestMapping("/login")
public Result login(@RequestBody User user){
LambdaQueryChainWrapper<User> userLambdaQueryChainWrapper = userService.lambdaQuery();
List<User> userList = userLambdaQueryChainWrapper.eq(User::getNo, user.getNo()).list();
List<Menu> MenuList = menuService.lambdaQuery().like(Menu::getMenuright, userList.get(0).getRoleId()).list();
HashMap map = new HashMap<>();
map.put("menu",MenuList);
map.put("user",userList.get(0));
return Result.suc(map);
}
第三步，vuex 状态管理
可以通过这个方法，将数据存入一个容器中，方便在任何地方调用
this.$store.commit(“setMenu”,res.data.menu);//调用的方法，和存入的值
通过计算属性，获得store中的menu的状态
npm i vuex@3.0.0
导入
import Vue from 'vue'
import Vuex from 'vuex'//状态管理
Vue.use(Vuex);
export default new Vuex.Store({
state:{
menu:[]
},
mutations:{
setMenu(state,menuList) {//将menu菜单列表放入
state.menu = menuList
}
},
getters:{
getmenu(state){//取出菜单列表
return '当前的数据是:'+state.menu
}
}
})
调用vuex中的方法
commit(“store中的方法名”,“传参”)
this.$store.commit(“setMenu”,res.data.menu);
sessionStorage.setItem("CurUser",JSON.stringify(res.data.user));//缓存cookie
console.log(res.data.menu);
this.$store.commit("setMenu",res.data.menu);//将菜单列表数据存入
this.$router.replace('/pageIndex');//跳转页面
在需要调用的地方通过计算属性，将menu赋值
get()是自动调用的
computed:{
"menu":{
get(){
return this.$store.state.menu
}
}
},
然后再将数据挂载到dom上
<el-menu-item :index="item.menuclick" v-for="(item,i) in menu" :key = "i">
<i :class="item.menuicon"></i>
<span style="font-size: 20px;margin-left: 20px" slot="title">{{item.menulane}}</span>
</el-menu-item>
动态路由
实现动态菜单后，实现动态路由
ps：跳转路径所需要的组件动态生成
在上面的store中，将动态路由实现，
- 在setMenu的过程中将路由给更新
setMenu(state,menuList) {
state.menu = menuList;
addRouterMenu(menuList);
}
import Vue from 'vue'
import Vuex from 'vuex'
import router from "@/router";
//状态管理
Vue.use(Vuex);
function addRouterMenu(menuList) {//传入菜单列表数据
console.log(menuList);
let routes = router.options.routes;
//router.options通过这个变量，你可以获取 Vue Router 中定义的所有路由信息
routes.forEach(routeItem=>{//循环遍历，routeItem每次遍历的值
if (routeItem.path == "/pageIndex"){
menuList.forEach(menu=>{
let childRoute = {
path: '/'+menu.menuclick,
name: menu.menulane,
meta:{
title: menu.menulane
},
component:()=>import('../components/'+menu.menucomponent)
};
routeItem.children.push(childRoute);//将子路由添加到子路由数组中
});
}
});
router.addRoutes(routes);//将子路由数组，添加到routes数组中
}
路由小提示
resetRouter()方法在其他js文件调用需要导入
import router,{resetRouter} from “@/router”;
然后就可以直接使用方法了
resetRouter();//防止路由重复加入routers数组
router.addRoutes(routes);
const router = new VueRouter({
mode: 'history',
routes
});
//routes中不添加重复路由
//原理，将原来的路由变为空的再全部添加进去
export function resetRouter() {
router.matcher = new VueRouter({
mode:'history',
routes:[]
}).matcher
}
//添加后，点击重复路由不报错
const VueRoutePush = VueRouter.prototype.push;
VueRouter.prototype.push = function push (to) {
return VueRoutePush.call(this,to).catch(err=>err)
};
export default router;
将用户信息存在session中
转换为json格式stringify
sessionStorage.setItem(“CurUser”,JSON.stringify(res.data));//缓存cookie
取出来 parse解析为对象
user: JSON.parse(sessionStorage.getItem(‘CurUser’))
vue浏览器调试工具
1.在谷歌商店扩展插件下载vue Devtools
浏览器控制台是否能成功输出Vue。如果不能
在main.js中添加window.Vue = Vue;
将 vue.js库全局化
看是否能成功输出，成功输出后
2.然后重启浏览器F12可看见vue的调试工具
如果这是没有看见渲染的组件
在main.js中加入这句
//使用开发者模式
Vue.config.devtools = true;
main.js文件中
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/global.css';
import App from './App.vue';
//生产模式
Vue.config.productionTip = false;
//使用开发者模式
Vue.config.devtools = true;
Vue.use(ElementUI);
// 将Vue挂载到全局对象上
window.Vue = Vue
new Vue({
render: h => h(App),
}).$mount('#app');
扫一扫
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
