JavaScript vue部署线上跨域问题 浏览器为了安全起见会有一个同源策略,所谓同源是指,域名,协议,端口相同,如果其中有一项不相同,浏览器便会在控制台抛出一个错误: 我的跨域场景是,http协议请求https协议,80... 12月30日 阅读(3,377) 发表评论 阅读全文
JavaScript Vue中的动画封装 如果我们想多次使用某个动画效果,我们可以给它做一个封装,以达到复用的效果。 首先 我们把效果写在子组件的模板里: Vue.component('child',{ t... 03月21日 阅读(1,788) 发表评论 阅读全文
JavaScript Vue中的列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-gro... 03月20日 阅读(1,719) 发表评论 阅读全文
JavaScript Vue中多个元素或组件的过渡 之前写过是一个元素的出场/离场过渡,那么如果是多个元素的过渡以及多个组件的过渡效果要怎么来写呢? 多个元素过渡 我们现在使用两个p标签,其中包含2段文字,来看一下他们的过渡效果: ... 03月19日 阅读(1,927) 发表评论 阅读全文
JavaScript Vue动画中的JS钩子 这些钩子可以在transition属性中声明就可以了,具体有哪些钩子呢? before-enter 在即将显示的时候触发,并且会接收一个el的参数,el参数为transition属... 03月18日 阅读(2,194) 发表评论 阅读全文
JavaScript Vue中同时使用动画和过渡 之前写的两篇介绍动画和过渡的文章,一篇说的是使用动画,一篇说的是使用过渡效果,本文写一下初始渲染的过渡效果以及同时使用动画和过渡的效果: 初始渲染的过渡 一般情况下,我们默认打开页... 03月18日 阅读(2,150) 发表评论 阅读全文
JavaScript Vue中css动画过渡效果(二) 上篇文章我们说到了在过渡效果中CSS样式的类名是可以自定义的,官方提供了6个可以自定义的特性,这6个特性分别是: enter-class enter-active-class en... 03月17日 阅读(1,753) 发表评论 阅读全文
JavaScript Vue中css动画过渡效果(一) 我们在很多地方看到过,图片或者文字的淡入淡出效果,那么是怎么做到的呢? Vue 提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡,我们只需... 03月16日 阅读(2,426) 发表评论 阅读全文
JavaScript Vue动态组件与v-once指令 有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里,点击组件A显示组件A的内容,点击组件B显示组件B的内容,要怎么来做呢? 动态组件 先看一下基础的写法: ... 03月15日 阅读(1,905) 发表评论 阅读全文
JavaScript Vue中使用插槽(二) 上篇文章写到了基础插槽,默认文字以及具名插槽,本文来说一下作用域插槽,有时让插槽内容能够访问子组件中才有的数据是很有用的。 作用域插槽 设想一个带有如下模板的chil... 03月14日 阅读(1,599) 发表评论 阅读全文
JavaScript Vue中使用插槽(一) Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将slot元素作为承载分发内容的出口。那么具体要怎么用呢? 不使用slo... 03月14日 阅读(1,868) 发表评论 阅读全文
JavaScript Vue非父子组件间传值 组件通信有三种情况,父组件向子组件传值,子组件向父组件传值,这两种我们称为父子组件通信,还有一种就是非父子组件通信。 非父子组件通信 在简单的场景下,我们可以使用一个空的Vue实例... 03月13日 阅读(1,735) 发表评论 阅读全文
JavaScript Vue组件绑定原生事件 vue组件绑定原生事件?正常情况下我们想给一个组件绑定事件需要这样来写,首先需要通过$emit向上触发事件,然后监听事件,最后才会执行方法函数,比如下面这样的: <div i... 03月12日 阅读(1,799) 发表评论 阅读全文
JavaScript Vue组件参数校验与非Props特性 组件参数校验指的是父组件向子组件进行参数传递,子组件有权对这个参数进行一些约束,我们一起来看一下实例 组件参数校验 <div id="root"> &l... 03月11日 阅读(1,806) 发表评论 阅读全文
JavaScript Vue中父子组件传值 父组件向子组件传递数据可以通过props接收然后去处理,子组件向父组件传递数据可以通过$emit事件触发的形式传递。 父组件向子组件传递数据 <div id="root"&g... 03月10日 阅读(1,793) 发表评论 阅读全文