首先,讲解一下vuex,v2和v3在vuex的使用上一样,差别主要是在版本上,vue2中的vuex的版本必须是4版本以下,而v3的vuex的版本必须是4版本及以上
cnpm i vuex@4 --save
src中先创建一个store文件夹,文件夹中创建一个index.js文件
index.js导入vuex中需要使用的依赖包createStore()
createStore创建一个vuex的对象抛出即可
main.js中直接导入这个对象即可
//1. 导入依赖 //导入vuex的函数内容 import {createStore} from "vuex"; //调用函数进行配置 const store = createStore({ state:{ num:100, }, mutations:{ plus(state){ state.num++; } }, getters:{}, actions:{}, modules:{},//分模块 // plugins:[], }) //抛出对象的内容信息 export default store;
//导入vuex对象 const app = createApp(App); //引入vuex的操作信息 import store from "./store/index"; app.use(store);
<template> <div> <button @click="plus">num++</button> {{$store.state.num}} </div> </template> <script> import {useStore} from 'vuex' export default { setup() { const store=useStore() const plus=()=>{ store.commit('plus') } return {plus} }, } </script>
cnpm i vue-router@4 --save
src中创建一个文件夹router,router中新建一个index.js
index.js中导入创建路由对象的api createRouter,抛出对象
main.js中导入路由对象,挂载在app中去
import {createRouter, createWebHistory} from 'vue-router' const routes = [ { name: 'home', path: '/', component: () => import('../views/Home.vue') }, { name: 'login', path: '/log', component: () => import('../views/Login.vue') } ]; const router = createRouter({ history: createWebHistory(), routes }) export default router
import router from "./router/index"; app.use(router);
<template> <div> <h3>主页面Home</h3> <button @click="goMy">My</button> </div> </template> <script> import {useRouter} from "vue-router" export default { setup(){ const router = useRouter(); const goMy = ()=>{ router.push("/my?id=100"); } return { goMy } } } </script>
useRoute
<template> <div> <h3>个人中心</h3> </div> </template> <script> import {useRoute} from "vue-router" export default { setup(){ const route = useRoute(); console.log(route); let {query} = route; console.log(query); } } </script>
cnpm i axios --save
import axios from "axios"; const app = createApp(App); app.config.globalProperties.$axios = axios; app.use(store).use(router).mount('#app')
在src中创建一个pubilc文件夹,然后创建一个index.js文件,文件中配置
//导入axios import axios from "axios"; //创建对象相关的信息 const Server = axios.create({ baseURL:"", timeout:5000, }) //配置前置拦截器或者后置拦截器 Server.interceptors.request.use((confirm)=>{ return config; },error=>Promise.reject(error)); //相应拦截器,数据返回,到达客户端之前触发。 Server.interceptors.response.use((response)=>{ return response; },error=>Promise.reject(error)) export default Server;
非setup语法糖中,自定义指令的作用跟vue2中的作用差不多,然后语法糖中的话,可以定义一个v开头的函数对象,当成自定义指令的作用。
分为全局自定义指令局部自定自定义
bind inserted() update() componentUpdated() unbind()
自定义指令生命周期函数变化
app.directive('focus',{ mounted(el,binding){ console.log(el,binding); el.focus() el.value=binding.value } })
<template> <div> <input type="text" v-focus:change.native="123123" placeholder="输入内容"/> </div> </template>
在局部自定义指令中给他一个拖拽事件
<template> <div> <div class="box" v-drag></div> </div> </template> <script> import {useStore} from 'vuex' import {useRouter} from 'vue-router' export default { directives: { drag: { mounted(el, binding) { //鼠标按下 el.onmousedown = function () { var event = event || window.event; //获取坐标值 var x1 = event.clientX; var y1 = event.clientY; //还需要获取偏移值 var L = el.offsetLeft; var T = el.offsetTop; console.log(x1, y1, L, T); //鼠标移动 document.onmousemove = function (event) { //获取坐标值 var x2 = event.clientX; var y2 = event.clientY; var l = x2 - x1 + L; var maxW = document.documentElement.clientWidth - el.clientWidth; if(l<=0){ l = 0; } if(l>=maxW){ l = maxW; } //改变盒子的偏移值 el.style.left = l+ "px"; el.style.top = y2 - y1 + T + "px"; }; //异动结束后,鼠标松开的时候触发的操作 document.onmouseup = function(){ document.onmousemove = null; } }; }, }, }, setup() {} } </script> <style scoped> .box{ width: 100px; height: 100px; background-color: lightcoral; } </style>
我们经常会有封装组件的需求,组件需要的往往不只有数据,一般我们通过组件通信传递的都是我们的基本数据类型或者是引用数据类型,如果我们想要传递一些标签属性,那么我们就要使用插槽来进行实现
具名插槽就是给slot标签添加name=""属性,使用是在template标签中用#name绑定使用
作用域插槽就是使用插槽传递数据,传递的数据直接绑在slot身上。使用是在template标签上#name="scope",传递的值就在scope里面
#号是v-slot指令的缩写