vue3（setup语法糖）

导入

导入css样式

<script setup>
    import "@/static/css/demo.css";
</script>

<style scoped>
    @import "@/static/css/demo.css";
</style>

导入组件

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";   //父组建引入子组建
<ListItem>插槽</ListItem>  //父组建使用
<slot></slot>  //子组建在相应位置使用

路由前置守卫

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() 
    }
})

动态路由

  <button @click="removerouter">删除动态路由</button>
  <button @click="move">点击跳转axios</button>

    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

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});   //挂载为全局对象

计算属性

<div>{{nn}}</div>
<input type="text" v-model.lazy="text1">

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
<SonSon str01="淼森润林" @emits="emits">点击</SonSon>
let arr = defineProps({str01:String,})

//接受子级数据  绑定事件接受发来的事件，绑定与收到的事件相同
function emits(v){ console.log(v) } //v为子级传来的值




//子传父  defineEmits定义事件调用函数传参  父级通过绑定事件接收到事件
let arr02 = defineEmits(["emits"])  //定义函数
arr02("emits","九九九999") //传递参数

全局管理vuex

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); //挂载为全局对象

组建调用

<div>显示vuex数据:   {{store.state.str}}</div>

import {useStore} from 'vuex';  //引入
let store = useStore(); //实例化
store.commit('tong',a.value)  //调用mutations 使用conmit
store.dispatch('asyn','actions更改数据') //调用actions 使用dispatch

Axios请求

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; //调用设置的全局变量

keep-alive跳转缓存

//跳转进来的子级都是具有缓存的
 <div class="box3">
    <router-view v-slot="{Component}">
        <keep-alive>
            <component :is="Component"></component>
        </keep-alive>
     </router-view>
 </div>

常用生命周期

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…
密码

ui组件

Ant Design Vue
element-plus
富文本

其它

npm i axios --save #save下载到项目包里，不加save下载到node_modulles里
npm i #下载node_modules&lock.json 因此卸载一起卸载(避免版本冲突)