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. 深度学习的优化器（各类 optimizer 的原理、优缺点及数学推导）

    深度学习优化器 深度学习中的优化器均采用了梯度下降的方式进行优化,所谓炼丹我觉得优化器可以当作灶,它控制着火量的大小.形式与时间等. 初级的优化器 首先我们来一下看最初级的灶台(100 - 1000 ...

  2. ACM、OI、OJ题目常用代码模板

    仓库源码地址:https://github.com/richenyunqi/code-templates 本仓库主要提供 ACM.OI.OJ.PAT.CSP 题目中常见算法和数据结构的实现,它们都以基 ...

  3. 14.5、redis-sentinel高可用

    1.redis主从同步配置: (0)主机配置: 服务器名称 ip地址 实例6379 实例6380 实例6381 controller-node1 172.16.1.90 主 从 从 (1)确定主从: ...

  4. web自动化页面元素不能键盘输入

    一.背景 web自动化中存在一部分元素属性是readonly属性,导致我们在使用自动化代码的时候无法使用sendkeys()方法传入数据,以12306网站选择出发日期为例,见下图 二.json语句处理 ...

  5. Vue $refs无法操作element-ui组件

    比如我要操作这个dom元素↓↓↓ <el-badge :value="1" :max="99" class="message"> ...

  6. CentOS-配置jar包自启动(SpringBoot)

    在pom.xml文件<plugin>中添加配置后,再打包(开发人员) <plugin>     <groupId>org.springframework.boot& ...

  7. The Different of Python 2.x and 3.x

    为了不给Python3.0带入过多的累赘,Python 3.x没有考虑向下兼容 1,print 函数 print语句没有了,取而代之的是print()函数. Python2.7 print " ...

  8. Comparator的compare方法如何定义升序降序

    最近做算法题用了Comparator接口下的compare方法,思考了一下升序和降序的规则是如何来的,现在做一个补充,方便以后回顾.  升序代码 public static void main(Str ...

  9. fastjson: json对象，json对象数组，javabean对象，json字符串之间的相互转化

    fastjson: json对象,json对象数组,javabean对象,json字符串之间的相互转化 在开发过程中,经常需要和前端交互数据,数据交互的格式都是JSON,在此过程中免不了json字符串 ...

  10. 【网络IO系列】 预备知识 操作系统之内核程序和用户程序

    一.概念 首先我们先来复习一下操作系统的概念和作用 操作系统是用户和硬件之间的一层媒介程序,为上提供编程接口,为下调用资源,管理驱动,以使用硬件. 从以上的表述我们可以看出OS的两点作用,第一个是对下 ...