vue animate.css训练动画案例 列表循环

impress 2020-02-02

制作目标动画：向上入场添加数据，点击数据右滑动离场

简单页面效果：

vue animate.css训练动画案例 列表循环

实现代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <script type="text/javascript" src="js/vue.js" ></script>
        <style type="text/css">
            .box li{
                width: 300px;
                line-height: 30px;
                margin: 5px;
                padding: 0 10px;
                border: 1px dashed royalblue;
                list-style: none;            
            }
            .box li:hover{
                background-color: royalblue;    
                color: #fff;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="app">
            id: <input type="text" v-model="id"/>
            name: <input type="text" v-model="name"/>
            <button @click="add">添加</button>
            <ul class="box">
                <transition-group enter-active-class="animated slideInUp" leave-active-class="animated slideOutRight" >
                    <li v-for="item in list" :key="item.id" @click="del(item.id)">{{item.name}}</li>
                </transition-group>
            </ul>
                
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:‘#app‘,
                data:{
                    list:[
                        {id:1,name:‘xiaoxiao‘},
                        {id:2,name:‘maomao‘},
                        {id:3,name:‘dada‘},
                        {id:4,name:‘hehe‘},
                    ],
                    id:‘‘,
                    name:‘‘
                },
                methods:{
                    add(){
                        this.list.push({id:this.id,name:this.name})
                    },
                    del(id){
                        var index = this.list.findIndex(function(item){
                            return item.id == id
                        })
                        this.list.splice(index,1)
                    }
                }
            })
        </script>
    </body>
</html>
impress

impress

相关推荐

Vue中使用JsonView来展示Json树的实例代码

前两天干活儿有个需求，在前端需要展示可折叠的Json树，供开发人员查看，这里采用JsonView组件来实现，它是一款用于展示Json的Vue组件，支持大体积的Json文件快速解析渲染，下面记录一下实现过程。{{item.value + (index ===

yuzhu / 12评论 2020-11-16

详解Vue数据驱动原理

Vue区别于传统的JS库，例如JQuery，其中一个最大的特点就是不用手动去操作DOM，只需要对数据进行变更之后，视图也会随之更新。比如你想修改div#app里的内容:. 在代码层面上的最大区别就是，JQuery直接对DOM进行了操作，而Vue则对数据进行

85477104 / 13评论 2020-11-17

vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

随着前端技术的飞速发展，大数据时代的来临，我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏，可以直观的展示用户想要的数据，同时炫酷的界面也会深受客户的喜欢。大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总，也会有

KANSYOUKYOU / 0评论 2020-11-16

手把手教你搭建Vue服务端渲染项目

好了，下面开始正文。服务器返回一个包含了引入资源语句和 <div id="app"></div> 的 HTML 文件。服务器会查看当前路由组件需要哪些资源文件，然后将这些文件的内容填充到 HTML 文件。如果有

sjcheck / 14评论 2020-11-03

Vue项目技巧这些你知道吗？

其实有很多人的项目可能都是直接 vue-cli 那一套，但是事实上，当项目稍微上一点规模，你需要对你的项目进行一个重新的架构。通常我们说的基础库包括-组件库、基础 css 库、基础工具库；2、层级管理。我们可以利用 cookie 或者 localstore

怪我瞎 / 5评论 2020-10-28

Vue源码中值得学习的方法

最近在深入研究vue源码，把学习过程中，看到的一些好玩的的函数方法收集起来做分享，希望对大家对深入学习js有所帮助。如果大家都能一眼看懂这些函数，说明技术还是不错的哦。

源码zanqunet / 10评论 2020-10-28

为 Vue 的惰性加载加一个进度条

通常用 Vue.js 编写单页应用时，当加载页面时，所有必需的资源都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。借助 Webpack，可以用 import() 函数而不是 import 关键字在 Vue.js 中按需加载页面。Vue.js 中

gloria0 / 11评论 2020-10-26

你不得不知道的Vue项目技巧

一个基础库可能会耗费一定的开发时间，但是如果项目具有一个优秀的基础库作为支持，可以让项目推进的更快速。通常我们说的基础库包括-组件库、基础 css 库、基础工具库;我们可以利用 cookie 或者 localstore 缓存一下商品详情，如果这个商品的详

王军强 / 5评论 2020-10-21

超优秀 Vue3.0 开源UI组件库

之前就有很多小伙伴询问vue3组件库相关的问题。趁着vue.js 3.0发布的热潮，就给大家推荐几个Vue3 Beta组件库。有哪些互联网大厂率先推出自己的Vue3组件库呢？Vant有赞团队推出的Vue移动端组件库，已经完成并发布Vue3.0 beta版本

学习web前端 / 9评论 2020-09-28

聊聊技术选型 - Angular2 vs Vue2

目前没法确切的评估未来一段时间这两个框架的维护情况，但基本能确定的是，框架的生命周期不会比我们大部分业务的生命周期短。从国内的使用情况以及社区发展来看，Vue 更胜一筹。从学习曲线上看，Angular 要更陡峭，Vue 要相对平缓一些。从能够开发的应用的全

QiaoranC / 5评论 2020-09-25

Vue进阶面试必问，异步更新机制和nextTick原理

vue已是目前国内前端web端三分天下之一，同时也作为本人主要技术栈之一，在日常使用中知其然也好奇着所以然，另外最近的社区涌现了一大票vue源码阅读类的文章，在下借这个机会从大家的文章和讨论中汲取了一些营养，同时对一些阅读源码时的想法进行总结，出产一些文章

anchongnanzi / 5评论 2020-09-21

vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

Vue项目通过Hbuild打包为APP后，静态文件正常显示，但并没有像开发时那样请求到数据。因为APP并没有跨域，不存在跨域一说。在开发时这样做是没错的，但我们在打包时就不用设置这个跨域了，打包前直接将这个跨域注释掉，然后将API请求地址改为绝对地址。如果

安卓猴 / 5评论 2020-09-12

vue Cli 环境删除与重装教程 - 版本文档

vue-cli 3.0+版本，使用的不是vue-cli，而是@vue/cli；如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的命令。　　　　dry: false, //设置为f

Macuroon / 5评论 2020-09-11

Vue axios获取token临时令牌封装案例

为什么非要写这个博客呢？因为这件事让我有一种蛋蛋的优疼。剩下的都别问，反正问我也不会说。因为流程图我都不想（懒得）画。关于token设计方案的初步设想是这样的：第一次进入的时候获取token，后端检查签名是否通过。不通过则弹框请从合法途径进入页面并且不消失

kiven / 5评论 2020-09-11

Vue proxyTable配置多个接口地址,解决跨域的问题

最开始的时候，因为请求后台出现跨域问题。查找资料配置proxyTable，解决跨域问题。后面遇到需要连接不同的接口域名，我在proxyTable里增加了一个apiGas。axios请求存在获取得到api但是不能获取apiGas。查找了很多资料都没有具体的解

LittleCoder / 5评论 2020-09-11

springcloud vue 分布式 flowable工作流 前后分离 有代码生成器

三：系统服务 -----------------------------------------------------------------------------------------------------1. 权限管理：点开二级菜单进入三级菜单

Cheetahcubs / 5评论 2020-09-13

他写出了 Vue，却做不对这十道 Vue 笔试题

请原谅我起了这么个浓浓营销号味道的标题。但这可丝毫没有夸大宣传，而是前端娱乐圈今日份的瓜——。有十道关于 Vue 的选择题，在群里引出了一众社区知名人士竞折腰，最后钓出了@尤雨溪 本人亲自挑战……然后他自己也做错了。鲁迅会做错鲁迅文选的阅读理解？所以，只要

小焊猪web前端 / 5评论 2020-09-10

快速入门Web前端开发的正确姿势

入门标准很简单，就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular

颤抖吧腿子 / 5评论 2020-09-04

在vue前端去除后端返回json数据中时间日期中间的T

在做项目的时候，遇到一个问题，明明在数据库中，DataTime类型的数据格式明明是正常的，怎么返回到前端后，就在日期和时间中多了一个T？没有办法，只有在前端里再给日期时间来次格式化。return year + "-" + month +

softwear / 5评论 2020-08-21

Vue

<label>帐号</label> <input type="text" class="form-control" v-model="Info.username".

无缘公子 / 5评论 2020-08-18

精美前端UI（VUE）界面，ASP.NET通用工作流开发分享

工作流在IT领域算是一个老话题了，最早的工作流思想在上世纪60年代就有人提过，70年代有人开始了初步尝试，但是由于技术的限制，直到80年代才有第一批比较成功的工作流，随后工作流便逐步走向了爆发期，90年代便出现了很多类型的工作流，不过其主旨是不变的，那就是

anaction / 0评论 2020-08-17

vue设置全局访问接口API地址操作

在使用vue框架进行前后端分离项目开发时，通常涉及到与后段接口进行交互，平时一般使用比较多的就是用axios来实现调用后段接口，写法一般为。但是有一个比较普遍的问题就是，假如我们后端接口地址改变了，或者是网络地址发生了变化，就需要在上面IP以及端口的位置每

Luckyunyun / 0评论 2020-08-15

解决vue项目中某一页面不想引用公共组件app.vue的问题

Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢?vue切换路由的时候，在哪儿监控路由变化呢？

Tplinkly / 0评论 2020-08-15

vue自动添加浏览器兼容前后缀操作

// to edit target browsers: use "browserslist" field in package.json

zdj / 0评论 2020-08-15

vue接通后端api以及部署到服务器操作

我们在使用Vue时，通常需要调用后端API进行一系列的操作。下面分享一个我的配置方案。

分享经验共同进步 / 0评论 2020-08-15

深入解析 Vue 的热更新原理，尤大是如何巧用源码中的细节？

本文转载自微信公众号「前端从进阶到入院 」，作者ssh前端 。想知道这背后是怎么实现的吗，其实代码并不复杂。这个功能的实现底层用了vue-hot-load-api[1]这个库，得益于 vue 的良好设计，热更新的实现总共就一个 js 文件，200 行代码

CRMCRMCRMDS / 0评论 2020-08-12

vue

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。前端页面中，把Model用纯JavaSc

breakpoints / 0评论 2020-08-09

vue—cli脚手架

使用npm全局安装webpack，打开命令行工具输入：npm install webpack -g或者，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。注意：webpack 4.X 开始，需要安装 webpack-cl

gloria0 / 0评论 2020-08-09

微服务 springcloud vue 分布式 flowable工作流 前后分离

三：系统服务 -----------------------------------------------------------------------------------------------------1. 权限管理：点开二级菜单进入三级菜单

Cheetahcubs / 0评论 2020-08-07

vue单页应用在页面刷新时保留状态数据的方法

在Vue单页应用中，如果在某一个具体路由的具体页面下点击刷新，那么刷新后，页面的状态信息可能就会丢失掉。这时候应该怎么处理呢？如果你也有这个疑惑，这篇文章或许能够帮助到你。现在产品上有个需求：单页应用走到某个具体的页面，然后点击刷新后，刷新的页面要与刷新前

wetyu / 0评论 2020-08-02

vue+ts 环境搭建

个基于ts的vue项?

lyjava / 0评论 2020-07-30

第一个Vue页面

安装完后，打开cmd命令行界面。安装yarn(fackbook依赖管理工具与Npm功能一样，推荐使用！！！--- 是否安装vue路由 -->. --- 是否启动ESLint代码检测 -->. --- 是否设置单元测试 -->. --- 是

hline / 0评论 2020-07-29

取代Jquery，用Vue 构建Bootstrap 4 应用

尽管前端程序现在发展迅速，各种框架层出不穷，但是对广大非前端码农来说构建Web界面的最好的选择仍然还是Bootstrap 4。但是Bootstrap依赖于已经严重过时，被抛弃的jQuery组件，那么如何解决这个问题就迫在眉睫了。Vue项目以其轻巧、高性能，

84901334 / 5评论 2020-07-28

手写Vuex源码

Vuex是基于Vue的响应式原理基础，所以无法拿出来单独使用，必须在Vue的基础之上使用。首先我们要清楚Vuex的定位，它是一个插件。且必须基于之上Vue来使用，为什么这么说呢，因为他的数据响应是基于Vue的。③ Mutation 进行Vuex中store

Cricket / 0评论 2020-07-27

Vue、Nuxt服务端渲染，NodeJS全栈项目，面试小白的博客系统~~

Holle，大家好，我是李白！！一时兴起的开源项目，到这儿就告一段落了。接触过WordPress，Hexo等第三方网站系统，虽说简单，但是感觉太过于冗余臃肿，显得过于杂乱，各种限制和体验不好等等原因。所以决定书写一片属于自己的天地，我是创造者，也是追寻者。

julien / 0评论 2020-07-26

Vue的runtime版和compiler版

template --> ast --> render --> vDom --> 真实的Dom --> 页面。是只包含运行时的版本，没有编译器，CDN引入所对应的文件名为vue.runtime.js或vue.runtime.m

yezitoo / 0评论 2020-07-26

vue 路由vue-router的使用

2、在router目录下的index.js文件中为Test.vue组件配置路由

82344699 / 0评论 2020-07-26

springcloud vue 分布式 flowable工作流 前后分离 有代码生成器

三：系统服务 -----------------------------------------------------------------------------------------------------1. 权限管理：点开二级菜单进入三级菜单

koko0c / 0评论 2020-07-23

一款vue编写的功能强大的swagger-ui，有点秀（附开源地址）

wagger-ui有非常多的版本，觉得不太好用，用postman，每个接口都要自己进行录入。所以在基于think-vuele进行了swagger格式json的解析，自己实现了一套swaggerui界面。swagger分为后端数据提供方方和前端页面展示请求方

XuDanT / 0评论 2020-07-24

【移动端】用Cordova将vue项目打包成app

最近项目用hbuilderx打包web项目为app，发现经常有闪退的问题，尝试改用其他工具打包，以下是实验步骤。下载Android Studio，File=>Settings=>Android SDK，勾选右下角Show Package Det

malonely / 0评论 2020-07-20

vue 对css样式进行修改

background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT

昔人已老 / 0评论 2020-07-19

基于vue-cli搭建vue项目开发环境

vue-cli是vue的脚手架工具，用于快速搭建vue项目。让开发者只关心项目本身，而不去关注项目的开发环境。在安装vue-cli之前，我们先安装webpack，在命令行工具输入下面代码。，这里就默认你安装node.js. webpack-simple

不知道该写啥QAQ / 0评论 2020-07-18

Nginx部署vue项目

给前端同事部署了web项目之后，访问发现除了index.html可以访问，其他的路径使用了“伪静态”。

byourb / 0评论 2020-07-18

tornado vue 解决跨域问题

# 解决tornado-vue 跨域问题，self.set_header # 允许所有的域名访问。self.set_header # 允许携带所有的参数。self.set_header # 允许所有的请求方式。self.set_header # 允许连接时

selectY / 0评论 2020-07-18

Vue项目性能优化实践

Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍

81264454 / 0评论 2020-07-17

Vue虚拟DOM

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。diff 算法 — 比较两棵虚拟 DOM 树的差异；p

书虫媛 / 0评论 2020-07-08

Vue基础（五）---- 前端路由

　　　　路由是一个比较广义和抽象的概念，路由的本质就是对应关系。　　　　　　但是这种渲染方式会存在性能问题，假设浏览器有频繁的提交表单的数据交互行为，后端路由会造成网页的不断刷新，体验非常差。　　　　　　　　整个网站只有一个页面，内容的变化通过Ajax局部

bowean / 0评论 2020-07-05

electron与vue集成

vue init simulatedgreg/electron-vue electron-vue -start

sanallen / 0评论 2020-07-05

Vue.js前端框架系统学习（5）——Vue指令之v-for, v-on, v-bind, v-model

接上一篇文章，这篇文章来整理一下其他的一些vue指令。先申明一下，关于指令的一些概念都搬运自官网，如果有哪些不理解可以直接上官网进行学习。Expects: Array | Object | number | string | Iterable . 基于源数

Symiac / 0评论 2020-07-04

Vue.js前端框架系统学习（4）——Vue指令之v-text,v-html,v-if,v-show

指令 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我们现在components目录下新建一个Dere

Symiac / 0评论 2020-07-04