进阶的Vue
关注
分享
扫一扫
文章平均质量分 80
taopoppy
学习学习
展开
-
VUE入门到实战--Vue组件细节问题
1、is属性解决模板标签中的bug1、我们在使用下面的代码的时候，会在浏览器的控制台中发现错误，我们自定义的组件并没有在tbody中，而跑到了外面与table同级的位置，为什么？因为H5标准当中，必须在tbody中放tr标签，所以为了避免这个错误，我们使用is来解决：<!DOCTYPE html><html lang="en"><head> ...原创 2018-10-11 10:12:17 · 231 阅读 · 0 评论 -
VUE入门到实战--Vue中JS动画和Velocity.js的结合
1、JS钩子的应用1、js钩子和生命周期钩子有点相似，在动画发生的整个过程中，会在特定的时间和区间执行一些函数，我们在这些函数当中去书写我们的JS代码，形成我们的动画效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=原创 2018-10-17 09:39:35 · 3153 阅读 · 1 评论 -
VUE入门到实战--Vue条件渲染和列表渲染
1、条件渲染1.1、v-if和v-show1、使用官网的话来说：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS ...原创 2018-10-10 11:27:58 · 298 阅读 · 0 评论 -
VUE入门到实战--Vue样式绑定
1、样式绑定1.1、class对象绑定1、对象绑定有下面这几种：对象内联绑定，对象外联，计算属性。2、对象内联绑定：通过在元素上使用class与某个对象绑定，通过对象的属性值来控制样式的显示与否。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2018-10-10 10:44:47 · 228 阅读 · 0 评论 -
VUE入门到实战--Vue计算属性，方法和侦听器
1、计算属性1.1、初识计算属性1、为了防止数据冗余，我们使用实例属性computed来解决，computed是缓存机制，这个缓存机制就是作为参数用来计算的变量没有改变，那么就不会重复计算。2、什么意思？比如说下面的fullName由firstName和lastName计算，页面开始的时候会计算一次fullName的值并缓存下来，在页面刷新或者过程中firstName和lastName...原创 2018-10-09 14:52:43 · 302 阅读 · 0 评论 -
VUE入门到实战--Vue实例和模板语法
1、Vue实例1、每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：比如我们在下面这个例子中如果使用浏览器打开，我们在控制台输入vm.$data、vm.$el都能打印出响应的内容。在一个Vue实例中，像el，data，methods....还有很多，都叫做Vue的实例属性。这些实例属性都能通过 { 实例名.$实例属性名 }这种方式得到。2、实际上每个组件都是一个V...原创 2018-10-09 11:39:05 · 3883 阅读 · 0 评论 -
VUE入门到实战--Vue中CSS动画
1、动画原理1、当一个元素被transition包裹之后，Vue会自动分析元素的CSS样式，并且构建一个动画的流程。2、如下图，当动画即将被执行的这一瞬间：会往div上增加两个class，分别是fade-enter和fade-enter-active。 当动画第一帧结束进行第二帧的时候：Vue会去掉刚才的fade-enter那个class，然后添加...原创 2018-10-15 17:20:13 · 388 阅读 · 0 评论 -
VUE入门到实战--Vue非父子组件传值、插槽、动态组件和v-once
1、非父子组件传值的问题1、Vue是一种轻量级的视图层的框架，那么遇到复杂的非父组件传值的问题我们有两种解决方法：总线机制和vuex。1.1、总线机制1、总线也可以叫做（Bus/总线/发布订阅模式/观察者模式）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2018-10-15 10:50:01 · 566 阅读 · 0 评论 -
VUE入门到实战--Vue初体验
1、Vue概述1、本篇教程是针对Vue2.0。由Vue所衍生出的NUXT框架可以快速完成服务器端渲染，WEEX框架可以使用Vue的语法去写原生的APP，其他主流框架能做的事情Vue都能做到。2、我们本篇教程的内容有两个大的部分：（1）基础内容包括：基础语法，MVVM模式，组件化、生命周期，动画特效。（2）实战项目包括：环境搭建、使用Git、数据模拟、本地开发、联调、真机测试、上线。...原创 2018-10-08 16:46:15 · 432 阅读 · 0 评论 -
VUE入门到实战--Vue组件参数校验和非props特性，给组件绑定原生事件
1、组件参数校验1、当父组件向子组件属性传值的时候，我们的子组件可以对传递来的值进行校验。2、props可以传递动态的或者静态的props，但是不管是静态的或者动态的我们就希望使用v-bind:来表示后面引号中的内容是个JS表达式，而不是字符串。3、传入一个对象的所有属性：如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind(取代 v-bind:pr...原创 2018-10-11 12:02:02 · 515 阅读 · 0 评论 -
VUE入门到实战--Vue多个元素或者组件的过渡动画、列表过度,动画封装
1、多个元素或者组件的过渡动画效果1.1、多个元素的过渡动画1、如下例所示我们做的一个例子是点击按钮，在两个不同元素之间切换的的过渡动画。注意的地方有两点（1）多个元素每一个都需要key值：因为DOM复用的原因，需要不同的key值来标识不同的元素。（2）transition标签上的mode的属性值会有不同的效果：在下面的例子中，使用mode=“out-in”，效果是这样，hello...原创 2018-10-17 11:20:22 · 1347 阅读 · 1 评论