Vue基础（二）

过滤器

过滤器作用

全局过滤器



输出结果

私有过滤器



输出结果



把其中一个做点修改



错误信息

自定义指令

全局自定义指令

私有自定义指令



钩子函数



注意：fond-weight是粗细，size是大小

Vue生命周期









VUE动画

CSS过渡

指定过渡的速度曲线

福哦度的半场动画

设置动画的方式

无动画

添加动画

方式一：过渡类名

①为需要执行动画效果的元素添加transition

②添加两组类

v-enter与v-leave-to是一组

v-enter-to与v-leave是一组





v-enter-activ与v-leave-active都是类名

方式二：第三方动画

在animate网站引用

方式三：钩子函数







练习：实现列表动画效果

动画--列表增加删除

记录21.07.23 —— Vue.js基础（二）的更多相关文章

  1. 记录21.07.22 —— Vue.js基础（一）

    VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...

  2. 记录21.07.24 —— Vue的组件与路由

    VUE组件 作用:复用性 创建组件的三种方式 第一种:使用extends搭配component方法 第二种:直接使用component方法 只有用vue声明且命名的才称之为创建组件 注意:templa ...

  3. 记录21.07.26 —— Vue/cil

    VUE搭载脚手架 搭载环境 下载node node.js下载地址 控制台输入 npm install -g @vue/cil 查看版本 创建vue项目 创建完后会显示启动服务的指令 这个指令可以在pa ...

  4. Vue.js基础(二)

    属性 可以将数据进行计算得出新的结果,也可以说是一个公式,有缓存. 应用:1,频繁使用的复杂公式. 2,需要监控的-----全局状态的管理 简写:   computed:{ result:functi ...

  5. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  6. Vue.js基础语法（二）组件

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 把一段经常要用的东 ...

  7. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  8. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  9. Vue.js基础拾遗

    本篇目录: 模版语法 插值 指令 v-bind指令 v-on指令 计算属性与侦听器 计算属性VS方法 计算属性VS侦听属性 Class与Style绑定 绑定HTML Class 绑定内联样式 条件渲染 ...

随机推荐

  1. Python-对比两个目录中Excel文件

    背景:我在5月20日收到了一批Excel文件数据,由于文件很多大约有将近5000个,已经通过编写python脚本处理完成.但是6月9日的时候,又收到了一批新的Excel数据.但是在处理过程中发现,本次 ...

  2. excel替换函数substitute

    1.substitute(需要执行替换操作的单元格区域,旧文本,新文本,第N个旧内容) 例:substitute(A1,"a","b",2)    A1=aab ...

  3. Unity的AnimationCurve

    转自:风宇冲Unity3D教程学院http://blog.sina.com.cn/s/blog_471132920101f8nv.html,本文有多处增删减改,详细内容请查看原文. 1.介绍 Anim ...

  4. .net core 支付宝，微信支付 一

    源码: https://github.com/aspros-luo/Qwerty.Payment/tree/develop 支付宝支付:参考支付宝sdk及文档,https://docs.open.al ...

  5. Redis 底层数据结构之跳跃表

    文章参考 <Redis 设计与实现>黄建宏 Redis(2) 跳跃表 跳跃表 跳跃表 skiplist 是一种有序数据结构,它通过在每个节点中维持多个指向其他节点的指针,从而达到快速访问节 ...

  6. JavaScript基础以及进阶知识

    JavaScript基础知识回顾: 目录: 比较运算符 多行字符串,模板字符串 严格模式 函数定义和调用 变量作用域与解构赋值.NameSpace.块级作用域let.const 方法 高阶函数 闭包 ...

  7. 升级IDEA后Lombok不能用了，如何解决？

    今天到工作室比较晚,在电脑前吃着早饭,看到提示IDEA提示升级,寻思已经有好久没有升过级了.一样等着,就升级下吧. 升级完毕重启之后,突然发现好多错误,原来的应用也没法启动了.仔细一看报错信息,是由于 ...

  8. docker安装mysql镜像和容器

    下拉镜像 docker pull mysql/mysql-server:5.5 后面的mysql标签是版本号,是可选择的,有: 5.5 5.6 5.7 8.0 创建mysql5.5的容器 docker ...

  9. leetcode TOP100 两数相加

    两数相加 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...

  10. ES异地双活方案

    对于单机房而言,只要参考Elastic Search 官方文档,搭建一个集群即可,示意图如下: 原理类似分布式选举那一套,当一个master节点宕机时,剩下2个投票选出1个新老大,整个集群可以继续服务 ...