使用stylus语法编写样式代码,熟练后可以大大提高我们的开发效率,而且里面还有很多特性,比如:冒号可选,分号可选,花括号可选以及变量等等。 安装 npm install styl...
Vue移动端开发注意事项
移动端开发因为各个方面的原因,在开发的过程中需要注意以下几点: 统一css样式 在不同的手机浏览器上默认的样式是不统一的,初始化样式做个统一,方便后续的开发。 解决方法,引入res...
二十四节气之春分
2019/3/21,节气春分 春分,24节气中第4个节气 前一节气:惊蛰,后一节气:清明 气候特点: 春旱、沙尘、倒春寒、低温阴雨 物候: 春分之日玄鸟至,又五日雷乃发声,又五日始...
Vue中的动画封装
如果我们想多次使用某个动画效果,我们可以给它做一个封装,以达到复用的效果。 首先 我们把效果写在子组件的模板里: Vue.component('child',{ t...
Vue中的列表过渡
目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-gro...
Vue中多个元素或组件的过渡
之前写过是一个元素的出场/离场过渡,那么如果是多个元素的过渡以及多个组件的过渡效果要怎么来写呢? 多个元素过渡 我们现在使用两个p标签,其中包含2段文字,来看一下他们的过渡效果: ...
Vue动画中的JS钩子
这些钩子可以在transition属性中声明就可以了,具体有哪些钩子呢? before-enter 在即将显示的时候触发,并且会接收一个el的参数,el参数为transition属...
Vue中同时使用动画和过渡
之前写的两篇介绍动画和过渡的文章,一篇说的是使用动画,一篇说的是使用过渡效果,本文写一下初始渲染的过渡效果以及同时使用动画和过渡的效果: 初始渲染的过渡 一般情况下,我们默认打开页...
Vue中css动画过渡效果(二)
上篇文章我们说到了在过渡效果中CSS样式的类名是可以自定义的,官方提供了6个可以自定义的特性,这6个特性分别是: enter-class enter-active-class en...
Vue中css动画过渡效果(一)
我们在很多地方看到过,图片或者文字的淡入淡出效果,那么是怎么做到的呢? Vue 提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡,我们只需...
Vue动态组件与v-once指令
有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里,点击组件A显示组件A的内容,点击组件B显示组件B的内容,要怎么来做呢? 动态组件 先看一下基础的写法: ...
Vue中使用插槽(二)
上篇文章写到了基础插槽,默认文字以及具名插槽,本文来说一下作用域插槽,有时让插槽内容能够访问子组件中才有的数据是很有用的。 作用域插槽 设想一个带有如下模板的chil...
Vue中使用插槽(一)
Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将slot元素作为承载分发内容的出口。那么具体要怎么用呢? 不使用slo...
Vue非父子组件间传值
组件通信有三种情况,父组件向子组件传值,子组件向父组件传值,这两种我们称为父子组件通信,还有一种就是非父子组件通信。 非父子组件通信 在简单的场景下,我们可以使用一个空的Vue实例...
Vue组件绑定原生事件
vue组件绑定原生事件?正常情况下我们想给一个组件绑定事件需要这样来写,首先需要通过$emit向上触发事件,然后监听事件,最后才会执行方法函数,比如下面这样的: <div i...