vue教程3-02 vue动画

以下代码，已经用包管理器下载好vue,animate

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

    <link rel="stylesheet" href="bower_components/animate.css/animate.css">

    <style>

        #box{

            width:400px;

            margin: 0 auto;

        }

        #div1{

            width:100px;

            height:100px;

            background: red;

        }

    </style>

</head>

<body>

    <div id="box">

        <input type="button" value="按钮" @click="toggle">

        <div id="div1" class="animated" v-show="bSign" transition="bounce"></div>

    </div>

    <script>

        new Vue({

            el:'#box',

            data:{

                bSign:true

            },

            methods:{

                toggle(){

                    this.bSign=!this.bSign;

                }

            },

            transitions:{ //定义所有动画名称

                bounce:{

                    enterClass:'zoomInLeft',//动画进入

                    leaveClass:'zoomOutRight'//动画离开

                }

            }

        });

    </script>

</body>

</html>

vue教程3-02 vue动画的更多相关文章

  1. vue教程1-09 交互 vue实现百度下拉列表

    vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  3. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  4. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  5. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  6. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

  7. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  8. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  9. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

随机推荐

  1. JSON_FORCE_OBJECT 数字索引数组 强转对象

    $abc = array('a','b','c','d','e','f','g'); echo '<pre>'; var_dump($abc); echo json_encode($abc ...

  2. IntelliJ IDEA 2017版 编译器使用学习笔记(九）(图文详尽版);IDE使用的有趣的插件；IDE代码统计器；Mybatis插件

    一.代码统计器,按照名字搜索即可,在file===setting------plugin 使用右键项目:点击自动统计 二.json转实体类 三.自动找寻bug插件 四.Remind me工具 五.检测 ...

  3. nginx负载均衡总结

    在关于高并发负载均衡一文中已经提到,企业在解决高并发问题时,一般有两个方向的处理策略,软件.硬件,硬件上添加负载均衡器分发大量请求,软件上可在高并发瓶颈处:数据库+web服务器两处添加解决方案,其中w ...

  4. Arria10中PHY的时钟线结构

    发送器时钟网络由发送器PLL到发送器通道,它为发送器提供两种时钟 高速串行时钟——串化器的高速时钟 低速并行时钟——串化器和PCS的低速时钟 在绑定通道模式,串行和并行时钟都是由发送器的PLL提供给发 ...

  5. day27(反射之内省机制实现BeanUtils)

    使用内省方式来实现beanUtils往对象里面存值 public class BeanInfoUtil2 { public static void setPropertyByIntrospector( ...

  6. java基本语法、标识符、关键字

    基本语法 编写Java程序时,应注意以下几点: 大小写敏感:Java是大小写敏感的,这就意味着标识符Hello与hello是不同的. 类名:对于所有的类来说,类名的首字母应该大写.如果类名由若干单词组 ...

  7. web-day9

    第9章WEB09-Servlet篇 今日任务 完成系统的登录的功能 完成登录系统后页面定时跳转 记录系统登录成功后,系统被访问多少次 教学导航 教学目标 了解HTTP协议 掌握Servlet的编写 了 ...

  8. Hdu1205 吃糖果 2017-06-29 14:26 24人阅读 评论(0) 收藏

    吃糖果 Problem Description HOHO,终于从Speakless手上赢走了所有的糖果,是Gardon吃糖果时有个特殊的癖好,就是不喜欢将一样的糖果放在一起吃,喜欢先吃一种,下一次吃另 ...

  9. codeforces 877b

    B. Nikita and string time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  10. hdu 5089 使做对k-1题最大概率的选题方案

    http://acm.hdu.edu.cn/showproblem.php?pid=5089 给出N道难度递增的题目,难度用可能做出的百分比表示,选出K道题目使得做出K-1道题目的概率最大. 选k题的 ...