Vue
文章平均质量分 57
weixin_41387874
这个作者很懒,什么都没留下…
展开
-
Vue2和Vue3中获取元素
Vue2和Vue3中获取元素原创 2022-06-09 16:00:16 · 822 阅读 · 0 评论 -
Vue <router-view>用法
Vue <router-view>用法<router-view>有什么作用<router-view>一般用于路由管理。当我们需要对页面进行局部刷新的时候,就可以使用<router-view>。<router-view>具体使用场景例如,我们创建了一个侧边导航栏,并且需要使用侧边导航栏对主页面内容进行切换,主页面切换的时候保持侧边导航栏不变。(类似于掘金签到页面)。<router-view>使用方法主原创 2022-05-26 16:06:16 · 5643 阅读 · 0 评论 -
Vue基础 ——Vuex
VuexVuex作用Vuex是专门为了管理状态而生,并且它是响应式的。当有一个状态会被多个组件使用并且更改时,将这个状态放到Vuex的store对象中是个好的选择。store对象state选项用于储存状态。Getter选项用于定义对于state的一些多次使用的操作函数。Mutation选项用于定义对于state的更改(副作用)处理函数,需要通过commit调用。Action用于处理Mutation无法处理的异步情况,但是Action必须通过commit调用Mutation才可以更.原创 2022-03-14 00:48:06 · 751 阅读 · 0 评论 -
在setup()函数中获取全局实例方法 & Vue组件的data域(this指向)
在Vue3的setup()函数中获取全局实例方法在Vue2中,我们可以通过this.$来获取全局实例方法一个例子this.$requestLogin()这样就可以获取定义在main.js中的全局实例方法。但是在Vue3中的setup函数中,由于不存在this,所以上面的方法是不行的下面提供2种方法使用getCurrentinstance()const instance = getCurrentInstance()instance.proxy.$requestL原创 2022-03-09 23:18:09 · 3651 阅读 · 3 评论 -
v-if遇到setTimeout(() => {emit(‘xxx‘)},0)
v-if遇到setTimeout(() => {emit(‘xxx’)},0)一个例子当我们需要在父子组件间通信时候,我们需要使用emit子组件setup(props,{emit}){ function handleClick(){ emit('XXX') }}这时当子组件中触发了点击事件,调用handleClick函数之后,将会发送自定义事件XXX到父组件父组件<SubComponent v-if="isVisblie" @XXX="onSu原创 2022-03-04 20:48:26 · 735 阅读 · 0 评论 -
Vue——transition组件
Vue的transition组件使用<transition>的时机,为什么使用<transition>,<transition>的实现原理首先我们需要理解<transition>有什么作用<transition>组件用于给某个元素或组件添加过渡动画效果,只需要用<transition>把该元素或组件包裹起来,就可以封装成过渡组件。<transition name="fade"> <my-comp原创 2022-03-02 18:50:56 · 4581 阅读 · 0 评论 -
WIP: Composition API——Ref和Reactive
Vue3中的Composition API Ref和ReactiveComposition APIVue3最大的特点在于引入了Composition API,而Composition API中的Ref和Reactive允许我们创建响应式数据。Vue2中的响应式如果想要在Vue2中创建响应式数据,那么需要在data函数中返回的对象中声明这个数据。<template> <h1>{{ title }}</h1></template>.原创 2022-02-17 21:00:51 · 242 阅读 · 0 评论 -
Vue的virtual dom 和 render函数
1. Virtual DOM介绍virtual DOM实际上是一个JavaScript对象,它相比于DOM运算会小很多。当状态发生变化的时候,前后的virtual DOM会进行diff运算,这样可以只更新部分改变了的DOM,而不是全部重绘。作用Vue2使用了virtual DOM来更新DOM,这样减小le开销。虽然我们一般将组件模板写在template中,但是当Vue编译的时候,都会解析为virtual DOM。VNodevirtual DOM是使用VNode描述的.原创 2022-01-28 18:45:35 · 1000 阅读 · 0 评论 -
Vue基础 -- Vue组件
Vue组件1.1 组件用法<!DOCTYPE html><html> <head> </head> <body> <div id="app"> <mycompoent></mycompoent> <!-- 在Vue实例中使用Vue组件必须在创建实例之前注册组件。 --> </div> </body> <script.原创 2022-01-14 20:55:45 · 402 阅读 · 0 评论 -
Vue内置指令
<!DOCTYPE html><html> <head> <title>css属性选择器</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <原创 2021-12-27 21:50:49 · 178 阅读 · 0 评论 -
Vue —— 计算属性
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue</title></head><body> <div id="app"> <p>{{ handleName }}</p> <button @click="handleChange"&g..原创 2021-12-24 18:15:32 · 389 阅读 · 0 评论 -
Vue数据绑定与基础知识
原创 2021-12-24 15:11:23 · 313 阅读 · 0 评论