Vue前端
基础
利用Vite创建Vue项目
npm init vite@latest <project-name> --template vue
$ cd <project-name>
$ npm install
$ npm run dev
Setup的使用
- 组合式api的入口
响应式数据
2.ref 响应式数据
-
ref会改变视图层，但是不会改变源数据，本质时拷贝一份数据
-
import {ref} from 'vue'//也可以不写 -
const name =ref('***') //需要更新的时候直接在方法中调用如下 function btn(){ name.value='****' } //变化对象 const obj=ref({a：'XXX',b:'xxx'}) obj.value.a='xxxx' //数组 const arr=ref([{a:'0'}]) arr.value[x].a=''使用ref最好做一个数组类型的
3.reactive响应式引用，不能用来定义基本普通类型，
-
import {reactive} from 'vue' //不需要使用.value const obj=reactive({a：'XXX',b:'xxx'}) obj.a='xxx'
4.toRef响应式数据
-
不更新试图层，但是会改变原始数据
-
import {toRef} from 'vue' const obj={name:'xxx',age:'xxx'} const res=toRef(obj,name) res.value='xxx'
5.toRefs
-
接收响应式对象
-
使用toRefs可以省略name.value.a这样的步骤了，直接用a
-
<span>{{a}}</span><span>{{b}}</span><span>{{c}}</span> const obj={a:'x',b:'x',c:'x'} const news=reactive(obj) return {btn,...toRefs(news)}
计算属性
-
视图层可以用v-model绑定值 import {computed} from 'vue' const sum=computed(()=>{ return a+b; }) return {sum}
watch监听属性
-
监听页面值的变化
-
//监听一个ref数据变化 watch(p1,(newval,oldval)=>{ 写方法 }) //监听多个ref的数据变化 watch([p1,p2],(newval,oldval)=>{ 写方法 }) //监听整个reative响应式数据变化：只能监听到最新的结果 //监听reative某一个数据相应数据变化：可以得到新旧数据 watch(()=>p..age.num,(newval,oldval)=>{ 方法 }),(immdiate:true)//(immdiate:true)进入页面立即监听
watchEffect
-
开始的时候就会监听
-
不需要调用，
-
const res=warchEffect(()=>{ }) //停止监听 res()
组件间的传值
-
//自动传值 provide('name')//传 const p1=inject('name')//收 //点击传值 //父组件 <div ref="val"></div> setup(){ const val=ref(); const p1=ref('dfdf') function btn(){ val.value.abc(p1) } return {btn} } 子组件 val是需要被传过来都值 function abc(val){ } return abc
<Style scopend>当前页面生效
Vuex在各个页面之间传值
-
安装
-
npm install vuex#next --save //引入 import {userStore} from 'vuex' -
新建数据仓库store文件夹
-
import {createStore} from 'vuex' export default createStore({ //创建数据仓库 state:{name:'xxx'}， //写计算属性 getter:{ }, //同步调用 //使用以下方法调用数据仓库里面的数据 mutations:{ } //异步调用 actions:{ }, //模块导入 modules:{ } }) //main.js import createStore from '上面的路径' 加载到app中 //页面中 import {useStore} from 'vuex' //从仓库中取到数据 const store =useStore(); //利用计算属性得到 const res=computed(()=>{ return store.state.name })vuex模块管理
-
创建模块
const user={ state:()=>({ username:'', }), mutations:{ setTimeout(()=>{ },时间) } } export default user -
导入模块
-
import user from './user' modules:{ user } -
引用数据
-
$store.state -
改变数据仓库中的数据
-
//在mutation actions中写入函数 //在异步调用改数据仓库中的值时，需要调用同步调用 //异步调用方法store.dispatch('方法名') //tong调用方法store.commit('方法名') mutations:{ 方法名(state){ //state.name='' } } actions:{ 方法名(store){ //调用同步中的方法 store.commit('同步中的方法名',参数) } }
生命周期函数
beforeCreate
//在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用。
created
//在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
beforeMount
//在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
beforeUpdate
//在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
updated
/*在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或侦听器取而代之。*/
activated
//被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated
//被 keep-alive 缓存的组件失活时调用。该钩子在服务器端渲染期间不被调用。
beforeUnmount
//在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。该钩子在服务器端渲染期间不被调用。
unmounted
//卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。该钩子在服务器端渲染期间不被调用
errorCaptured
//在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
renderTracked
//跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
renderTriggered
//当虚拟 DOM 重新渲染被触发时调用。和 renderTracked 类似，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。
-
使用
//在setup()中 setup(){ onRenderTriggered(()=>{ }) }
vue3的抽离封装
-
新建文件config，新建public.js
-
公用的数据或方法，在public.js中写入公用的方法
-
//定义方法，然后方法 用const abc=()=>{ const res_a=reactive({ 响应式数据 }) return res_a } //抛出方法abc export default abc -
import abc from '**/*/public.js' const res_a=abc() //改值(改的是视图层) res_a.name='xxx'
路由
安装
npm install vue-router@4 --save
创建文件夹router，新建index.js
import {createRouter} from "vue-router"
const routes=[
{
path:'/',
name:'Login',
//按需引入
component:()=>import(/*webpackChunkNmae:'Login'*/ '@page/login/login.vue')
}
]
const router = createRouter({
history: createWebHsahHistory(),
routes
})
export default router
在index中挂载
imort
app.use(router)
router路由跳转
-
标签跳转
-
<router-link to=""></router-link> -
js跳转，**注意：**跳转方法不能在setup中定义，因为setup中的this不可用，只能在methods中定义
-
// 字符串 this.$router.push('home') // 对象 this.$router.push({ path: 'home' }) // 命名的路由 this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private this.$router.push({ path: 'register', query: { plan: 'private' }})
命名视图
<router-view name="header"></router-view>
const routes{
path:'',
computems:{
default:,
header:
}
}
重定向
redirect:(to)=>{return {path:''} }
别名
alias('/path')
导航守卫
-
router中全部的地址
-
// router.beforeEach(to,from,next)=>( return false//不访问 next()//访问 ) -
单独的
-
beforeEnter:(to,from)=>{ }
清除默认样式网站
normalize
ajax请求
let api='地址'
fetch('api').then(res=>res.json()).then(result=>{
result
})
安装axios
npm install axios --save
let api=''
axios.get(api).then((result)=>{
})
vite配置跨域请求
新建vite.config.js文件（根目录）
module.exports={
//配置代理服务器
proxy:{
'/api':{
//目标
target:'地址',
//配置是否允许跨域
changeOrigin:true,
//设置重写
rewrite:path=>path.replace(/^\/api/,'')
}
}
}
Mock.js
springboot跨域请求
@CrossOrigin
Element
安装
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as icons from '@element-plus/icons-vue'
// 引入element全局图标
Object.keys(icons).forEach(key => {
app.component(key,icons[key])
});
app.use(ElementPlus, {locale: zhCn})
js小技巧
按时间依次执行
setInterval(function(){/*Eachtime时间每次执行的语句*/},Eachtime)
计时
setTimeout(() => {/*timeout时间到了以后需要执行的语句*/}, timeout);
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
