导入css样式
导入组件
import ListItem from "@/views/son.vue"; //dome在使用时 驼峰命名&短杠线命名
路由下载
npm i vue-router -save
书写路由文件
import {createRouter,createWebHistory} from 'vue-router';
const router = createRouter({
history:createWebHistory(),
routes:[
{path:"/",,name:'home',meta:{IsLogin:true},component:()=>import("@/project/model.vue"),children:[]}
]
})
export { router };
进行配置
import {router} from "@/router/router"; //引入 {}不可少
AppNew.use(router); //挂载为全局对象
//发送
import {ref,reactive,getCurrentInstance} from "vue"
let {proxy} = getCurrentInstance();
proxy.$router.push({ path:"/element菜单列表",query:{info:"heroinfo",hero:"妲己"} });
//接收
proxy.$route.query.info
proxy.$router.push('/home')
//插槽 父组建的html拿给子组建使用
import ListItem from "@/views/07子组件.vue"; //父组建引入子组建
插槽 //父组建使用
//子组建在相应位置使用
router.beforeEach((to,from,next)=>{ //去哪里,冲哪里来,放行
// if (to.meta.isLogin) {} 单个验证
if(to.matched.some(item=>item.meta.IsLogin)){ //父级统一验证 验证路由里面地址是否需要登录
if(localStorage.getItem('token')){
next()
}else{
router.push('/login')
}
}else{ //不需要登录放行 一般为登录页
next()
}
})
import {getCurrentInstance} from 'vue';
const {proxy} = getCurrentInstance();
proxy.$router.addRoute({path:"/axios999",name:"666",component:()=>import("@/project/Learning/Axios.vue")});
function move(){ //添加路由 (路由跳转path必须对应路径)
proxy.$router.push({path:"/axios999"})
}
function removerouter(){ //删除路由 (路由删除对应name)
proxy.$router.removeRoute("666");
}
import {ref,reactive} from 'vue'; //ref另一个用法,可以省去定时器,后面获取的数据也能拿到
let hero = ref("孙悟空"); //内部使用时需要获取value
let hero2 = reactive("猪八戒") //值随着页面的变化而改变
element-plus需要进行下载
进行配置
import ElementPlus from 'element-plus' //引入element-plus
import 'element-plus/dist/index.css' //引入element-plus的样式
import zhCn from 'element-plus/es/locale/lang/zh-cn' //引入中文
AppNew.use(ElementPlus, {locale: zhCn}); //挂载为全局对象
{{nn}}
import {ref,computed} from 'vue'; //引入
let text1 = ref("hhh"); //双向绑定输入框
let nn = computed(()=>{
console.log("值变了");
return text1.value; //当retun值发生改变时才会重新执行中间内容
});
import {ref,watch} from 'vue';
watch(str002,(vnew,vold)=>{ //要监听的数据 参数1新值,参数2旧值
Vnew.value = vnew;
Vold.value = vold;
})
导入组件均驼峰命名,父子孙组件互不影响(变量重名、函数重名、js功能互补串通),只有同类名 父级会延续给子集使用
//父传子绑定属性 子级接收defineProps
点击
let arr = defineProps({str01:String,})
//接受子级数据 绑定事件接受发来的事件,绑定与收到的事件相同
function emits(v){ console.log(v) } //v为子级传来的值
//子传父 defineEmits定义事件调用函数传参 父级通过绑定事件接收到事件
let arr02 = defineEmits(["emits"]) //定义函数
arr02("emits","九九九999") //传递参数
vuex下载指令
npm i vuex -save
书写管理文件
import {createStore} from 'vuex';
const store = createStore({
state(){ //定义数据区
return { str:'状态管理' }
},
mutations:{ //变更state数据
tong(state,v){ state.str = v }
},
actions:{ //异步操作
asyn(store,v){ store.commit('tong',v) }
},
getters{} //计算属性
})
export default store;
配置
import store from '@/static/js/vuex'; //引入
AppNew.use(store); //挂载为全局对象
组建调用
显示vuex数据: {{store.state.str}}
import {useStore} from 'vuex'; //引入
let store = useStore(); //实例化
store.commit('tong',a.value) //调用mutations 使用conmit
store.dispatch('asyn','actions更改数据') //调用actions 使用dispatch
axios需要进行下载
配置
import Axios from 'axios'; //将axios定义为变量
AppNew.config.globalProperties.$Axios = Axios; //定义为全局变量
组建中使用
import {getCurrentInstance} from 'vue'; //将 "获取当前实例" 请出来
const { proxy } = getCurrentInstance(); //进行实例化
//发送get请求
proxy.$Axios({
url: 'http://api_devs.wanxikeji.cn/api/admin/goodsTypeList',
method: 'get',
params: { //get请求携带参数
token: localStorage.getItem('token'),
}
}).then((res)=>{})
//发送post请求 需要携带参数
proxy.$Axios({
url: 'http://api_devs.wanxikeji.cn/api/admin/goodsTypeList',
method: 'post',
headers: {'Content-Type': 'application/x-www-form-urlencoded' }, //请求头默认请求json格式
data:{ //post请求携带参数
token:'dgswqy6523672',
name:'淼森润林',
}
}).then((res)=>{})
请求拦截器
Axios.interceptors.request.use((info)=>{
info.headers['A+'] = 100; //请求头和内容都不能出现汉字
return info; //设置完成要返回数据
},
(error)=>{
return error; //返回错误
})
响应拦截器
Axios.interceptors.response.use((info)=>{
return info.data.hero
},
(error)=>{
return error; //返回错误
})
书写属性文件
let login = "这是一张图片"
export { login };
配置全局属性
import { login } from "@/static/js/javascript.js" //全局属性 {}的变量是已经定义了,并非随便命名
AppNew.config.globalProperties.$login = login; //定义为vue实例的属性 全局属性
组件里调用
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance(); //请出挂载全部变量的对象
let login = proxy.$login; //调用设置的全局变量
//跳转进来的子级都是具有缓存的
setup 获取不到data 也获取不到vdom
onBeforeMount data有数据 vdom没数据
onMounted data和vdom都以创建(有数据)
onUpdated data发生变动时触发
文本输出
v-text //字符内容渲染到页面
v-html //将文本元素渲染为页面元素
条件
v-if 、 v-else-if 、 v-else
v-show //判断为true显示当前元素为false隐藏元素
绑定属性
v-bind:href="infos.href"
:href="infos.href" //简写版
绑定事件
v-on:click="leijia"
@click="leijia" //简写版
列表渲染
v-for="(value,index) in infos.hero" :key=value
双向绑定
v-model="infos"
v-model.lazy="infos."
正常情况下 组建命名以驼峰或短线命名
lintOnSave: false //停止书写检查
"serve": "vue-cli-service serve --port 12345"
祖传孙
//祖组建发送值
import { ref ,provide,inject} from 'vue';
provide("getson","我是牛爷爷想大头了"); //provide返回要传给下级的数据 参数2为数据,参数1为要赋值的变量
//孙组建接收值
let granvalue = inject('getson');
孙传祖
祖级将代参函数传给孙级 孙级调用就将值传给祖级
//祖组建
function getvalue(v){
console.log(v);
}
provide('getgrandf',getvalue); //将函数传给孙级
//孙组建(发个带参事件给孙级 孙级调用完成传参)
let getgrand = inject("getgrandf");
getgrand("我是大头儿子,牛爷爷晚上好")
接口制作
用户名:miaosenrun…
密码
Ant Design Vue
element-plus
富文本
npm i axios --save #save下载到项目包里,不加save下载到node_modulles里
npm i #下载node_modules&lock.json 因此卸载一起卸载(避免版本冲突)