vue高级用法
文章平均质量分 68
前端不加班
本人所写文章内容主要是为了方便自己看,如文章有错误的地方,请多担待!
展开
-
Vue 配置代理以解决跨域问题
跨域一直是一个在开发中很让人头疼的问题,解决跨域的方式有很多,后端和前端都有自己的解决方式,后端的话主要是在响应头里面添加信息,而前端主要是以代理的方式去进行解决,说白了就是将我们发送的请求交给跟我们同源的服务器,然后由他来做一个中转。其实,vue的代理是 借助vue静态服务器来实现的,使用的是 http-proxy-middleware 这个模块。当我们需要向多台服务器进行代理时,可按照以下方式配置代理。原理大概就是这样,配置起来其实还是蛮简单的。原创 2022-11-29 10:48:47 · 1971 阅读 · 0 评论 -
Vue3 setup函数的使用
Vue 3 的 Composition API 系列里,推出了一个全新的 setup 函数,它是一个组件选项,在创建组件之前执行,一旦 props 被解析,并作为组合式 API 的入口点。原创 2022-11-25 11:35:00 · 845 阅读 · 0 评论 -
使用vue实现css过渡和动画
在这种情况中,你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。对于数据元素本身而言,通过数字和运算、颜色的显示、SVG 节点的位置、元素的大小和其他的 property 这些属性的变化,同样可以实现动画的效果。在一些场景中,你需要给同一个元素同时设置过渡和动画,比如 animation 很快的被触发并完成了,而 transition 效果还没结束。CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身。原创 2022-11-25 10:40:37 · 1501 阅读 · 0 评论 -
vue.component和vue.use,Vue.prototype.$xx的区别,用法
Vue.use()注册与Vue.component()注册区别就在于一个install方法。Vue.component():注册一个组件在全局使用;Vue.use(): 可以一次性注册多个组件或添加全局方法或属性;原创 2022-11-24 17:27:11 · 473 阅读 · 0 评论 -
Vue-plugin(插件)
当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件例如: 网络加载指示器。原创 2022-11-24 17:06:08 · 1779 阅读 · 0 评论 -
Vue内置组件:teleport和transition组件
该组件可以将指定内容渲染到特定容器中,而不受 DOM 层级的限制当蒙层内容在一个组件中时,蒙层内容是无法遮挡住全部内容的,因此,需要使用teleport将蒙层内容渲染到更全局的组件中如果不使用teleport蒙层只是在组件内部渲染使用teleport后组件就作为body子元素渲染这样就把container元素作为body元素的子节点渲染to属性指定teleport组件中的子节点渲染的目标节点disabled属性用于禁用teleport组件。原创 2022-11-24 16:43:28 · 273 阅读 · 0 评论 -
Render函数
也就是说,render函数都没有进来。render函数是组件渲染的重要核心,它跟template模板开发一样,只不过这种形式开发,它(render)更接近底层,这样能让Vue编译时少转换一次。我们都知道Vue项目入口文件main.js里面有个render函数长下面这样,将项目的App根组件,挂载到根实例上通过render渲染。当然这里肯定有人会问,这样写有什么用,跟template写不一样嘛,render函数这样写还麻烦可读性不强。封装一个组件,进行传入数字参数,就显示数字参数的标签,你肯定会先想到这样。原创 2022-11-22 14:28:09 · 1176 阅读 · 0 评论 -
vue 自定义指令 directive
自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,例如在图片加载完成前,用随机的背景色占位,图片加载完成后直接渲染出来,用自定义指令可以方便的实现该问题。指令的参数可以是动态的,例如,v-myDirective:[argument]="value"中,argument参数可以根据组件实例数据进行更新。2.3、update:所在组件的vnode更新时调用,但是可能发生在其子vnode更新之前,指令的值可能发生了变化,也可能没有。原创 2022-11-24 15:55:28 · 3378 阅读 · 0 评论 -
vue之混入(mixin)的详解
个人理解:混入就是在一个公共的实例中写入公共的数据或者方法,这样的话vue会自动注入到(全局混入会注入到每一个实例组件中)、(单页面引入的会注入到引入的组件中)。混入的对象也就是mixin中可以写入的内容包含任意组件选项- - - - - -(也就是说你在export default { } 里边的内容都是可以混入的)有一种类似公共方法的感觉,但是可以写公共的data里面的数据,这一点比较方便。这里需要注意的是,在全局注册混入对象的时候是Vue.mixin(mixin);二、混入的方式一:单页面引入混入。原创 2022-11-24 10:44:54 · 1188 阅读 · 0 评论