一、vue中使用动画

文档：https://cn.vuejs.org/v2/guide/transitions.html

1. Vue 中的过渡动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .box{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color:yellow;
  11.         }
  12.         .fade-enter,.fade-leave-to{
  13.             opacity: 0;
  14.             transform: translateX(200px);
  15.         }
  16.         .fade-enter-active,.fade-leave-active{
  17.             transition: all 0.5s ease-in-out;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div id="app">
  23.     <button @click="show=!show">切换</button>
  24.     <transition name="fade">
  25.         <div class="box" v-if="show">始于1886，可口可乐</div>
  26.     </transition>
  27. </div>
  28. <script src="js/vue.js"></script>
  29. <script>
  30.     new Vue({
  31.         el:'#app',
  32.         data:{
  33.             show:true
  34.         },
  35.     });
  36. </script>
  37. </body>
  38. </html>

2. 过渡动画 案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.             list-style: none;
  11.         }
  12.         #app{
  13.             width: 600px;
  14.             margin: 50px auto;
  15.         }
  16.         li{
  17.             width: 500px;
  18.             height: 30px;
  19.             border: 1px dashed #3fa435;
  20.             margin-top: 10px;
  21.         }
  22.         li:hover{
  23.             cursor: pointer;
  24.             background-color: #ff7408;
  25.             transition: all 0.8s ease;  /* hover 动画效果  */
  26.         }
  27.         /*从这里开始设置 vue 的动画*/
  28.         .hero-enter, .hero-leave-to{
  29.             opacity: 0;
  30.             transform: translateY(80px);
  31.         }
  32.         .hero-enter-active, .hero-leave-active{
  33.             transition: all 0.5s ease;
  34.         }
  35.         .hero-move{
  36.             transition: all 1s ease-in-out;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41. <div id="app">
  42.     <div>
  43.         <label>姓名: <input type="text" v-model="name"></label>
  44.         <label>绝招: <input type="text" v-model="unique_skill"></label>
  45.         <button @click="add()">添加</button>
  46.     </div>
  48.     <transition-group tag="ul" name="hero">
  49.         <li v-for="(list,index) in lists" @click="del(index)" :key="index">
  50.             {{list.name}}：{{list.unique_skill}}
  51.         </li>
  52.     </transition-group>
  54. </div>
  55. <script src="js/vue.js"></script>
  56. <script>
  57.     new Vue({
  58.         el:'#app',
  59.         data:{
  60.             name:'',
  61.             unique_skill:'',
  62.             lists:[
  63.                 {name:'鸣人',unique_skill:'螺旋丸'},
  64.                 {name:'卡卡西',unique_skill:'写轮复制'},
  65.                 {name:'雏田',unique_skill:'八卦六十四掌'},
  66.                 {name:'阿童木',unique_skill:'拳头'}
  67.             ]
  68.         },
  69.         methods:{
  70.             del(index){
  71.                 this.lists.splice(index,1)
  72.             },
  73.             add(){
  74.                 this.lists.push({name:this.name,unique_skill:this.unique_skill});
  75.                 this.name = '';
  76.                 this.unique_skill = '';
  77.             }
  78.         }
  79.     })
  80. </script>
  81. </body>
  82. </html>

3. 用第三方动画库 animate.css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="css/animate.css">
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <button @click="flag = !flag">切换</button>
  11.     <br>
  12.     <transition
  13.         enter-active-class="bounceIn"
  14.         leave-active-class="bounceIn"
  15.         :duration="{enter:1000,leave:500}"
  16.     >
  17.         <img v-if="flag" src="img/1.jpg" alt="" class="animated">
  18.     </transition>
  20.     <h1 class="animated infinite bounce delay-2s">↑↑↑↑↑</h1>
  21. </div>
  22. <script src="js/vue.js"></script>
  23. <script>
  24.     new Vue({
  25.         el:'#app',
  26.         data:{
  27.             flag:false,
  28.         }
  29.     })
  30. </script>
  31. </body>
  32. </html>

其他动画操作方式，查看vue官网文档,这里先不记录了。

二、Vue 组件

以下演示的组件的各种创建方式。在工程化开发中.

1.全局 Vue 组件

全局组件，所有实例都可以使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  9. <div id="app">
  10.     <my-date></my-date>
  11.     <my-date></my-date>
  12. </div>
  14. <div id="app2">
  15.     <p>------------ app2 -----------</p>
  16.      <my-date></my-date>
  17. </div>
  19. <script src="js/vue.js"></script>
  20. <script>
  21.     // 1. 组件构造器
  22.     let Profile = Vue.extend({
  23.         // 模板选项
  24.         template:
  25.             `
  26.         <div>
  27.             <span>你的生日是：</span><input type="date">
  28.         </div>
  29.         `
  30.     });
  31.     // 2. 注册全局组件
  32.     Vue.component('my-date',Profile);
  34.     // 1. 创建Vue的实例
  35.     new Vue({
  36.         el: '#app',
  37.         data: {
  38.             msg: '哒哒哒'
  39.         }
  40.     });
  42.     new Vue({
  43.         el:'#app2'
  44.     })
  45. </script>
  46. </body>
  47. </html>

2. 局部 Vue 组件

局部组件在各自的实例里面注册。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  9. <div id="app">
  10.     <p>------------- app -------------</p>
  11.     <my-date></my-date>
  12.     <!-- my-color 这里写里也没用-->
  13.     <my-color></my-color>
  14. </div>
  16. <div id="app1">
  17.     <p>------------- app1 -------------</p>
  18.     <my-color></my-color>
  19. </div>
  21. <script src="js/vue.js"></script>
  22. <script>
  23.     // 1. 组件构造器
  24.     let Profile = Vue.extend({
  25.         // 模板选项
  26.         template: `
  27.           <div>
  28.               <span>日期：</span><input type="date">
  30.           </div>
  31.           `
  32.     });
  34.     let Profile1 = Vue.extend({
  35.         // 模板选项
  36.         template: `
  37.           <div>
  38.               <span>Color:</span><input type="color">
  40.           </div>
  41.           `
  42.     });
  44.     // 1. 创建Vue的实例
  45.     new Vue({
  46.         el: '#app',
  47.         data: {
  48.             msg: '撩课学院'
  49.         },
  50.         components: {
  51.             'my-date': Profile
  52.         }
  53.     });
  55.     new Vue({
  56.         el: '#app1',
  57.         components: {
  58.             'my-color': Profile1
  59.         }
  60.     })
  61. </script>
  62. </body>
  63. </html>

3. 另一种注册组件的方式

全局组件：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title></title>
  5. </head>
  6. <body>
  8. <div id="app">
  9.     <my-date></my-date>
  10. </div>
  12. <div id="app1">
  13.     <my-date></my-date>
  14. </div>
  16. <script src="js/vue.js"></script>
  17. <script>
  18.     //  注册全局组件
  19.     Vue.component('my-date', {
  20.         template: `
  21.           <div>
  22.               <span>日期：</span><input type="date">
  23.           </div>
  24.           `
  25.     });
  27.     // 1. 创建Vue的实例
  28.     new Vue({
  29.         el: '#app',
  30.     });
  32.     new Vue({
  33.         el: '#app1',
  34.     });
  35. </script>
  36. </body>
  37. </html>

局部组件：

  1. <body>
  2. <div id="app">
  3.     <my-date></my-date>
  4.     <my-color></my-color>
  5. </div>
  6. <script src="js/vue.js"></script>
  7. <script>
  8.     new Vue({
  9.         el:'#app',
  10.         data:{},
  11.         components:{
  12.             'my-date':{
  13.                 template:`<div> <span>日期:</span> <input type="date"> </div>`
  14.             },
  15.             'my-color': {
  16.                 template: `
  17.           <div>
  18.               <span>Color:</span><input type="color">
  19.           </div>
  20.           `
  21.             },
  22.         }
  23.     })
  24. </script>
  25. </body>

4.父子组件

  1. <body>
  2. <div id="app">
  3.     <parent></parent>
  4.     <!--<child></child>-->
  5. </div>
  6. <script src="js/vue.js"></script>
  7. <script>
  8.     // 1.构造子组件
  9.     let child1 = Vue.extend({
  10.         template:`<img src="img/1.jpg" width="200px">`
  11.     });
  12.     Vue.component('child',child1);
  14.     let child2 = Vue.extend({
  15.         template:`<p>child2......hello world!</p>`
  16.     });
  18.     // 2.构造父组件
  19.     Vue.component('parent',{
  20.         components:{
  21.             'my-child1':child1,
  22.             'my-child2':child2
  23.         },
  24.         template:
  25.         `
  26.         <div>
  27.             <p>Father...一千零一夜</p>
  28.             <my-child1></my-child1>
  29.             <my-child2></my-child2>
  30.         </div>
  31.         `
  32.     });
  34.     new Vue({
  35.         el:'#app',
  36.     });
  38. </script>
  39. </body>

5. vue 组件中的 template标签

  1. <body>
  2. <div id="app">
  3.     <g_box></g_box>
  4. </div>
  5. <template id="g_box">
  6.     <div>
  7.         <h5>hello man</h5>
  8.         <img src="img/1.jpg" width="200px" alt="">
  9.     </div>
  10. </template>
  11. <script src="js/vue.js"></script>
  12. <script>
  13.     Vue.component('g_box',{
  14.         template:'#g_box'
  15.     });
  16.     new Vue({
  17.         el:'#app',
  19.     })
  21. </script>
  22. </body>

6.Vue组件中的 script 标签

这种方式不常用。

  1. <body>
  2. <div id="app">
  3.     <g_div></g_div>
  4. </div>
  5. <script type="text/template" id="g_div">
  6.     <div>
  7.         <h5>hello Nurato!</h5>
  8.         <img src="img/1.jpg" width="200px" alt="">
  9.     </div>
  10. </script>
  11. <script src="js/vue.js"></script>
  12. <script>
  13.     Vue.component('g_div',{
  14.        template:'#g_div'
  15.     });
  17.     new Vue({
  18.         el:'#app'
  19.     })
  20. </script>
  21. </body>

三、组件中间的数据通信

1.Vue的组件数据传递-data

在这里，data选项必须为函数，必须要用函数返回的方式传递数据

  1. <body>
  2. <div id="app">
  3.     <g_div></g_div>
  4. </div>
  5. <template id="g_div">
  6.     <div>
  7.         <h5>{{msg}}</h5>
  8.         <img src="img/1.jpg" width="200px" alt="">
  9.     </div>
  10. </template>
  12. <script src="js/vue.js"></script>
  13. <script>
  14.     Vue.component('g_div',{
  15.         template:'#g_div',
  16.         // 这里data 只能通过函数返回的方式来，因为这样申明的话，和new Vue 里的data会互相污染
  17.         // data:{
  18.         //     msg:'hello man'
  19.         // }
  20.         data(){
  21.             return {msg:'hello man'}
  22.         }
  24.     });
  26.     new Vue({
  27.         el:'#app',
  28.         data:{
  30.         }
  31.     })
  32. </script>
  33. </body>

2.Vue的组件之间的通信

  1. <body>
  2. <div id="app">
  3.     <g_box msg="hello Nurato" imgSrc="img/1.jpg"></g_box>
  4. </div>
  5. <template id="g_box">
  6.     <div>
  7.         <h5>{{msg}}</h5>
  8.         <img :src="imgsrc" width="200px" alt="">
  9.     </div>
  10. </template>
  11. <script src="js/vue.js"></script>
  12. <script>
  13.     // 1 创建组件
  14.     Vue.component('g_box',{
  15.         template:'#g_box',
  16.         props:['msg','imgsrc']
  17.     });
  19.     // 2 创建实例
  20.     new Vue({
  21.         el:'#app',
  22.         data:{
  23.             msg:''
  24.         }
  25.     })
  26. </script>
  27. </body>

3.Vue的组件之间的通信-多层

  1. <div id="app">
  2.     <!-- 1. 这种不带 ： 号的，可以直接填值，但是用不了 实例中 data 里的数据  -->
  3.     <!--<my-parent imgsrc="img/1.jpg" img_title="Nurato"></my-parent>-->
  5.     <!-- 2. 图片，imgsrc 如果是用 实例中的data,必须是用加 ： 号的方式  -->
  6.     <my-parent :img_title="title" :imgsrc="img"></my-parent>
  8. </div>
  9. <!-- 子组件 1 -->
  10. <template id="my_img">
  11.     <img :src="imgsrc"width="200px"  alt="">
  12. </template>
  13. <!-- 子组件 2 -->
  14. <template id="my_title">
  15.     <h5>{{title}}</h5>
  16. </template>
  18. <!-- 父级组件 -->
  19. <div id="my_parent">
  20.     <div>
  21.         <child1 :imgsrc="imgsrc"></child1>
  22.         <child2 :title="img_title"></child2>
  23.     </div>
  24. </div>
  25. <script src="js/vue.js"></script>
  26. <script>
  27.     // 1.子组件实例
  28.     let child1 = Vue.extend({
  29.         template:'#my_img',
  30.         props:['imgsrc']
  31.     });
  33.     let child2 = Vue.extend({
  34.         template:'#my_title',
  35.         props:['title']
  36.     });
  38.     // 父组件
  39.     Vue.component('my-parent',{
  40.         props:['imgsrc','img_title'],
  41.         components:{
  42.             'child1':child1,
  43.             'child2':child2
  44.         },
  45.         template:'#my_parent'
  46.     });
  48.     new Vue({
  49.         el:'#app',
  50.         data:{
  51.             img:'img/1.jpg',
  52.             title:'2.哒哒哒'
  53.         }
  54.     })
  56. </script>
  57. </body>

vue02—— 动画、组件、组件之间的数据通信的更多相关文章

  1. jquery插件模式开发和react组件开发之间的异同

    jquery插件模式开发和react组件开发之间的异同

  2. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  3. 微信小程序 - 组件 | 自定义组件 | 组件事件传递页面

    组件 小程序允许我们使用自定义组件的方式来构建页面 类似Vue的小组件 自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss, js 4个文件组成 1.创建 1.创建compon ...

  4. React组件(组件属性this.state和this.props,css样式修饰组件)

    目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...

  5. vue组件之间的通信，父子之间的数据通信

    父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...

  6. [2014.01.27]wfGifAnimator 动画GIF组件 3.0

    组件支持设置GIF帧延时和获取GIF的帧延迟. 组件支持添加或插入或更新帧(支持bmp/jpg/gif/wmf/emf/ico格式).删除帧.清空帧操作. 组件支持GIF动画缩放大小. 组件支持绘制线 ...

  7. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  8. Vue 组件&组件之间的通信 父子组件的通信

    在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...

  9. vue的$emit 与$on父子组件与兄弟组件的之间通信

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件 ...

随机推荐

  1. 浅谈 Linux 下的 SSH1, SSH2

    SSH:Secure Shell .是一种安全协议. 常见的应用场景是远程控制台登陆. SSH1免费,SSH2收费.  其实 SSH 并不只是在 Linux 和 Unix  下使用,他们同样在 Win ...

  2. 最小树形图--朱刘算法([JSOI2008]小店购物)

    题面 luogu Sol 首先设一个 \(0\) 号点,向所有点连边,表示初始价值 显然这个图的一个 \(0\) 为根的最小有向生成树的边权和就是每个买一次的最小价值 再买就一定能优惠(包含 \(0\ ...

  3. JDBC中常用对象介绍

    JDBC中的主要类(接口) 在JDBC中常用的类有: 1.DriverManager 2.Connection 3.Statement 4.ResultSet 1.DriverManager 其实我们 ...

  4. 一键清理 Nexus 中无用的 Docker 镜像

    现许多团队使用 Nexus 来管理 Docker 镜像,产品不断迭代,镜像仓库占用的磁盘空间也越来越大.由于 Nexus 的控制台并未提供批量操作镜像功能,清理镜像十分不便.本文分享一个清理 Nexu ...

  5. Latex表格太宽处理方法 (How to shorten Latex table length)

    当表格太宽时, 为了能在页面中显示完整, 可以缩小表格, 或者横排.缩小表格的好处是, 不用倒转页面阅读, 坏处是原始宽度不同的表格, 被缩小后, 字体不一, 不美观. 虽然可以调整参数使得所有表格字 ...

  6. Install guide for OpenLDAP and GOsa 2 on Ubuntu & Debian

    First we will install OpenLDAP by running the command as root: apt-get install slapd ldap-utils ldap ...

  7. 统计nginx日志

    .根据访问IP统计UV awk '{print $1}' access.log|sort | uniq -c |wc -l .统计访问URL统计PV awk '{print $7}' access.l ...

  8. java将int类型的变量转化成String类型的

    第一种方法:String的valueOf方法,int i=5;String s=String.valueOf(i);第二种方法,直接在int后面加一个空的字符串,因为在java里面,默认任务int类型 ...

  9. mysql索引小记

    Mysql索引分为以下几类:FULLTEXT, HASH,BTREE,RTREE. FULLTEXT:全文搜索索引 主要是解决'ad%'这样的查询效率低的问题,只能是MyISAM和InnoDB引擎上使 ...

  10. haproxy开启日志功能

    haproxy在默认情况不会记录日志,除了在haproxy.conf中的global段指定日志的输出外,还需要配置系统日志的配置文件.下面以centos6.4为例,haproxy使用系统自带的rpm报 ...