![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 66
-不要说话-
1111
展开
-
Vue3中使用pinia
当我们接收到pinia数据且对其数据进行了大量修改又想还原时,调用此方法就可以将接收的pinia数据全部重置还原。箭头函数的使用:(ps:虽然鼓励但是依然提供了非es6玩家的使用方式 内部可以用this代表state)说明成功修改了pinia里面的数据,且界面刷新证明这种直接修该pinia数据的方式依然是响应式数据。在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)中的store是自己设定的接收变量,重点是。在之前的案例中修改了pinia的name属性值。原创 2022-09-22 19:55:33 · 14904 阅读 · 3 评论 -
Vue3路由配置createRouter、createWebHistory、useRouter,useRoute
Vue3和Vue2基本差不多,只不过需要将、从中引入,再进行使用。原创 2022-09-22 18:31:19 · 17775 阅读 · 1 评论 -
Vue3中的公共数据配置globalProperties getCurrentInstance、网络代理配置
1、原创 2022-09-21 23:33:28 · 10287 阅读 · 1 评论 -
vue3中的isRef toRef toRefs readonly
isRef 判断是否为响应性变量用法:isRef("变量"),点击按钮控制台打印从obj.name不是响应式数据看出。原创 2022-09-21 19:43:25 · 833 阅读 · 0 评论 -
Vue3中的状态驱动的动态CSS、注册组件
data(){},setup(){}});let Box1 = defineAsyncComponent(() => import("./Box1.vue")) //注意3.2之后不用引入defineAsyncComponentBox1},}原创 2022-09-21 16:18:01 · 1275 阅读 · 0 评论 -
vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model
这是父组件的name:{{obj.name}}原创 2022-09-20 20:29:27 · 7783 阅读 · 0 评论 -
Vue2.0到3.0的过渡,setup,ref函数,reactive函数,计算属性computed、监听属性watch
均要配置在中,若要使用里面的数据,可以用将其返回出来2、若在中返回的是一个,则对象中的、在模板中均可直接使用例如界面效果,以及点击按钮后控制台打印的内容直接属性写入标签中即可,不再使用和函数以及如。原创 2022-09-18 15:26:42 · 1013 阅读 · 0 评论 -
Vue的路由守卫
导航守卫执行顺序:beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach。原创 2022-09-13 20:49:11 · 1584 阅读 · 0 评论 -
Vue中的query传参和动态路由传参
2种传参:1、go2、this.$router.push({path:"/xx",query:{name:"karen",pwd:123}})//在路由匹配的组件中获取数据:mounted(){let queryObj=this.$route.query}设计:const router=new VueRouter({ routes:[ {path:"/home/原创 2022-09-12 17:46:39 · 2124 阅读 · 0 评论 -
Vue 依赖注入 - Provide/Inject
组件向组件传递数据, 可以采用父子props层层传递,也可以使用bus和Vuex直接交互。在Vue2.2.0之后,Vue还提供了Provide/Inject选项传递给子孙组件(provide传值有),接受效果图:这样我们就成功将值进行了传递,当我们点击按钮时会产生以下效果。原创 2022-09-12 14:29:41 · 498 阅读 · 0 评论 -
Vue中子组件向父组件传值$emit、.sync
在子组件中通过。原创 2022-09-11 19:12:33 · 1242 阅读 · 0 评论 -
Vue中,将父组件请求的后端数据传值给子组件props
案例。原创 2022-09-11 15:51:32 · 2018 阅读 · 0 评论 -
Vue脚手架中的axios的引入,网络事件代理配置
首先去终端安装axios,指令:npm i axios然后在文件中引入 import axios from "axios”,便可以直接使用axios或者将axios写入原型中在进行axios请求时使用。原创 2022-09-07 21:07:00 · 3243 阅读 · 0 评论 -
Vue的侦听器
一般是提供给模板事件和其他方法(比如钩子函数)使用,如果在模板中使用了方法,而且不是事件,如果模板中的渲染的任意数据源改变了 它都会重新调用。会把计算的结果缓存起来,并监听计算过的数据源 如果监听的数据源发生变化才会重新计算(没有监听的属性发生变化 模板会重新渲染)计算属性,属性侦听器,方法,过滤器有什么区别?2、修改了引用数据内部的属性值:页面会重新渲染,但是侦听器属性不会触发。当侦听器监听的属性发生变化时,就会调用watch中对应的方法。分开设计:计算属性,属性侦听器,方法,过滤器。原创 2022-09-04 20:17:18 · 368 阅读 · 0 评论 -
Vue组件的八个钩子函数
1、生命周期函数 (c语言中有一类系统回调的函数然后执行业务 叫做钩子)2、 在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数3、当前vm实例在创建到销毁的过程中 会去调用的函数基本分为四类。原创 2022-09-04 17:02:49 · 3812 阅读 · 0 评论 -
Vue过滤器 filters
主要用于数据展示之前的处理过滤器只能用在。很明显能看出两者的效果一样,但写法不同。中,将函数写在filters里面。原创 2022-08-31 20:26:24 · 226 阅读 · 0 评论 -
Vue循环渲染 v-for和v-if,key
效果图常规的方法会引起一个问题:v-if每次判断成功时都会 再创建一个div来装得到的数据,相当于我们用了两个div来装为了解决这一问题我们可以使用冰元素这样我们就可以解决这一问题。原创 2022-08-30 22:29:18 · 486 阅读 · 0 评论 -
Vue条件渲染 v-if和v-show
属性值true和false,使用的变量为true就显示,false就隐藏界面显示点击开关时两者都会消失。原创 2022-08-30 21:56:03 · 183 阅读 · 0 评论 -
Vue样式绑定
1、将,属性值为true(显示)和false(隐藏)。利用开关思想就可以写出一个简单的按钮换色效果界面图点击按钮之后就会显示如将以上代码 添加html代码添加Vue中的data对象的属性 classname:"bgc1"界面就会多出一个3、将类名写在[ ]里,和第二种类似,但都会生效(一般不用这种)...原创 2022-08-30 21:43:59 · 1198 阅读 · 0 评论 -
Vue事件
在methods中写方法,供事件或者别的方法内部调用(es5、es6的方法都可以)。:1、v-on 2、@,两种方法后面都跟事件类型,值就是methds中的方法,可以加小括号也可以不加点击第一个按钮控制台会打印1111点击第二个按钮控制台会打印2222鼠标进入第三个按钮控制台会打印3333鼠标移出第三个按钮控制台会打印4444。...原创 2022-08-30 19:51:13 · 215 阅读 · 0 评论 -
Vue基础指令
在标签尖括号中使用插入js表达式:变量,函数调用,三目运算等等,插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名页面显示内容。原创 2022-08-29 19:39:22 · 128 阅读 · 0 评论