weite122 | 涂涂的博客

ES6深入浅出之let和const

let 命令用法 1. let不存在变量提升 12console.log(a); //ReferenceError: a is not definedlet a = 1; 2. let的作用域在最近的{}之间 1234{ let a = 1 }console.log(a) //ReferenceError: a is not defined 3. let不允许重复声......

Posted by weite122 on 2018-11-09

ES6

Vue学习笔记（十九）之Vue中多个元素或组件的过渡

多个元素的过渡对于原生标签可以使用 v-if/v-else 。需要注意的是当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。在多个元素同时进入和离开过渡的时候，动画会混乱，可以用过渡......

Posted by weite122 on 2018-09-22

vue

Vue学习笔记（十八）之Vue中的JS动画与Velocity.js的结合

JavaScript 钩子通过JavaScript提供的钩子，我们也可以实现动画效果。可以在属性中声明JavaScript的钩子： 12345678910111213<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancel......

Posted by weite122 on 2018-09-21

vue

Vue学习笔记（十七）之在Vue中使用Animate.css库

CSS动画过渡 CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。效果代码： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<!DOCTY......

Posted by weite122 on 2018-09-19

vue

Vue学习笔记（十六）之Vue中CSS动画原理过渡

使用场景 Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：在CSS过渡和动画中自动应用class 可以配合使用第三方CSS动画库，如Animate.css 在过渡钩子函数中使用JavaScript直接操作DOM 可一配合使用第三方JavaScript动画库，如Velocity.js 单元素/组件的过渡 Vue 提供了 transition 的......

Posted by weite122 on 2018-09-15

vue

Vue学习笔记（十五）之动态组件与v-once指令

v-if实现组件切换效果代码：123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态组件和v-once指......

Posted by weite122 on 2018-09-09

vue

Vue学习笔记（十四）之插槽

插槽插槽就是用来优化模板内容的一个API，当你需要传入多个相同的内容，可以通过插槽的形式优化代码。效果代码：1234567891011121314151617181920212223242526272829<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ......

Posted by weite122 on 2018-09-06

vue

Vue学习笔记（十三）之非父子组件通信

父组件向子组件通信是通过props,子组件向父组件通信是通过$emit触发一个事件。如果是两个非父子组件，我们再用以上方法逐层通信，就会显得复杂。我们就需要一个总线bus来帮我们完成这件事。例如： 1Vue.prototype.bus = new Vue() 把一个vue实例赋值到Vue.prototype.bus，当调用this.bus的时候，可以使用vue实例的所有特性。利用......

Posted by weite122 on 2018-09-06

vue

Vue学习笔记（十二）之给组件绑定原生事件

现在给一个组件绑定一个点击事件，在组件中直接绑定需要通过它的子组件进行触发，因为他绑定的事件并不是原生事件，而是一个自定义事件。在组件模板中绑定的事件才是原生事件，例如效果代码： 1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html lang="......

Posted by weite122 on 2018-09-04

vue

Vue学习笔记（十一）之组件校验参数与非props特性

组件参数校验当父组件向子组件传值的时候，子组件可以检验参数的类型，默认值，是否必须传值等。效果代码： 123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ......

Posted by weite122 on 2018-08-31

vue

Tutu Blog