Vue2.0的变化(2)———vue2.0动画的变化、vue-2.0路由的变化

之前讲解的都是vue1.0的使用,现在我们开始介绍vue2.0,
这里的介绍是在vue1.0的基础上进行介绍的,主要介绍的是同vue1.0版本相比2.0的变化

vue2.0动画的变化:
现在变成:
<transition>
  运动东西(元素,属性,路由.....);
</transition>

class的定义:
  .fade-enter{} //初始状态
  .fade-enter-active{} //变化成什么样 --当元素出来(显示)
  .fade-leave{} //可不写
  .fade-leve-active{} //变化成什么样 --当元素离开(隐藏)

vue2.0给transition动画加的默认事件
  @before-enter="beforeEnter" //动画enter进入之前
  @enter="enter" //动画enter进入中
  @afterEnter="afterEnter" //动画enter进入之后
  @beforeLeave="beforeLeave" //动画leave离开之前
  @leave="leave" //动画leave离开中
  @afterLeave="afterLeave" //动画leave离开之后
  并且每个事件都有el参数,表示当前元素
  beforeEnter(el){}

transition如何与animate.css配合用?
transition只能让其下面第一层元素运动
1)让一个元素运动时
  <div id="box">
    <input type="button" value="点击显示隐藏" @click="show=!show">
    <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
      <div class="div1" v-show="show"></div>
    </transition>
  </div>

2)多个元素运动时,要用transition-group,并且绑定key 属性
  <div id="box">
    <input type="button" value="点击显示隐藏" @click="show=!show">
    <transition-group enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
      <div class="div1" v-show="show" :key="1"></div>
      <div class="div1" v-show="show" :key="2"></div>
    </transition-group>
  </div>

  <script>
    new Vue({
      el:‘#box‘,
      data:{
        show:false
      }
    });
  </script>

transition与animate.css结合使用示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 7     <meta name="apple-mobile-web-app-capable" content="yes">
 8     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 9     <style>
10         p{
11             width:100px;
12             height:100px;
13             background: red;
14             margin:10px auto;
15         }
16     </style>
17     <script src="vue.js"></script>
18     <link rel="stylesheet" href="animate.css">
19     <script>
20         window.onload=function(){
21             new Vue({
22                 el:‘#box‘,
23                 data:{
24                     show:‘‘,
25                     list:[‘apple‘,‘banana‘,‘orange‘,‘pear‘]
26                 },
27                 computed:{
28                     lists:function(){
29                         var arr=[];
30                         this.list.forEach(function(val){
31                             if(val.indexOf(this.show)!=-1){  //indexOf查找在数组中返回的位置,没有查找到则返回-1
32                                 arr.push(val);
33                             }
34                         }.bind(this));
35                         return arr;
36                     }
37                 }
38             });
39         };
40     </script>
41 </head>
42 <body>
43     <div id="box">
44         <span>请在文本框中输入字母a,b,c,e,o等</span>
45         <br/><br/>
46         <input type="text" v-model="show">
47
48         <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
49             <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
50                 {{val}}
51             </p>
52         </transition-group>
53     </div>
54 </body>
55 </html>

vue-2.0路由变化:
  网站:http://router.vuejs.org/zh-cn/index.html
  下载vue-router#2.0-->bower install vue-router

vue-router2.0变化:
布局变化:
  <div id="box">
    <div>
      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>

js变化:
<script>
  //准备组件
  var Home={
    template:‘<h3>我是主页</h3>‘
  };
  var News={
    template:‘<h3>我是新闻</h3>‘
  };
  //配置路由
  var routes=[
    {path:‘/home‘,component:Home},
    {path:‘/News‘,component:News},
    {path:‘*‘,redirect:‘/home‘} //重定向,默认打开的是主页,之前的router.reditect已经废弃
  ];
  //生成路由实例
  const router=new VueRouter({
    routes
  });
  //最后挂到vue上
  new Vue({
    router,
    el:‘#box‘
  });
</script>

---------------------------------------------
路由的嵌套:/user/username
html代码:
  <div id="box">
    <div>
      <router-link to="/home">主页</router-link>
      <router-link to="/user">用户</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>

js代码:
<script>
  //准备组件
  var Home={
    template:‘<h3>我是主页</h3>‘
  };
  var User={
    template:`
      <div>
        <h3>我是用户信息</h3>
        <ul>
          <li>
            <router-link to="/user/username">用户名</router-link>
          </li>
        </ul>
        <div>
          <router-view></router-view>
        </div>
      </div>
    `
  };
  var UserDetail={
    template:‘<p>我是xxx用户</p>‘
  };
  //配置路由
  var routes=[
    {path:‘/home‘,component:Home},
    {
      path:‘/user‘,
      component:User,
      children:[ //核心,routes怎么配,children就怎么配
        {path:‘username‘,component:UserDetail}
      ]
    },
    {path:‘*‘,redirect:‘/home‘} //重定向,默认打开的是主页
  ];
  //生成路由实例
  const router=new VueRouter({
    routes
  });
  //最后挂到vue上
  new Vue({
    router,
    el:‘#box‘
  });
</script>

上面讲解应用示例:包含路由与动画配合使用(animate.css)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 7     <meta name="apple-mobile-web-app-capable" content="yes">
 8     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 9     <style>
10         .router-link-active{
11             font-size: 20px;
12             color:#f60;
13         }
14     </style>
15     <script src="vue.js"></script>
16     <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
17     <link rel="stylesheet" href="animate.css">
18 </head>
19 <body>
20     <div id="box">
21         <input type="button" value="添加一个路由" @click="push">
22         <input type="button" value="替换一个路由" @click="replace">
23         <div>
24             <router-link to="/home">主页</router-link>
25             <router-link to="/user">用户</router-link>
26         </div>
27         <div>
28             <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
29                 <router-view></router-view>
30             </transition>
31         </div>
32     </div>
33
34     <script>
35         //组件
36         var Home={
37             template:‘<h3>我是主页</h3>‘
38         };
39         var User={
40             template:`
41                 <div>
42                     <h3>我是用户信息</h3>
43                     <ul>
44                         <li><router-link to="/user/strive/age/10">Strive</router-link></li>
45                         <li><router-link to="/user/blue/age/80">Blue</router-link></li>
46                         <li><router-link to="/user/eric/age/70">Eric</router-link></li>
47                     </ul>
48                     <div>
49                         <router-view></router-view>
50                     </div>
51                 </div>
52             `
53         };
54         var UserDetail={
55             template:‘<div>{{$route.params}}</div>‘
56         };
57
58         //配置路由
59         const routes=[
60             {path:‘/home‘, component:Home},
61             {
62                 path:‘/user‘,
63                 component:User,
64                 children:[
65                     {path:‘:username/age/:age‘, component:UserDetail}
66                 ]
67             },
68             {path:‘*‘, redirect:‘/home‘}  //404
69         ];
70
71         //生成路由实例
72         const router=new VueRouter({
73             routes
74         });
75
76
77         //最后挂到vue上
78         new Vue({
79             router,
80             methods:{
81                 push(){
82                     router.push({path:‘home‘});
83                 },
84                 replace(){
85                     router.replace({path:‘user‘});
86                 }
87             }
88         }).$mount(‘#box‘);
89     </script>
90 </body>
91 </html>

脚手架中vue-loader的变化
main.js中
之前vue1.0中
  new Vue({
    el:‘#app‘,
    components:App
  });
现在:
  new Vue({
    el:‘#app‘,
    render h => h(APP)
  });

时间: 2024-10-13 08:55:41

Vue2.0的变化(2)———vue2.0动画的变化、vue-2.0路由的变化的相关文章

vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变化doing...'); } }, created() { var self = this; self.fetchData(); }, watch:{ '$route':'fetchData' }, 原文地址:https://www.cnblogs.com/ilimengyang/p/9197797

Android6.0 WMS(六) WMS动画管理

Android的应用启动时,或者切换Activity时都会以动画的方式显示前后两屏的切换过程.动画的原理很简单,把一帧一帧的图像按一定时间间隔显示出来就完成了. 动画的绘制需要定时驱动,通常的做法是启动一个定时消息,每隔一定时间发一个消息,收到消息后输出一帧画面.Android支持VSync信号后,动画的驱动就有VSync信号承担了. 窗口动画的基本元素是窗口Surface中保存的图像,通过对窗口的Surface设置不同的变换矩阵和透明度,然后强制Surface刷新,就能在屏幕上显示出窗口的变化

[转]Android 5.0——Material Design详解(动画篇)

Material Design:Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,今天跟大家分享一下Material新增的动画: 在Android L中新增了如下几种动画: * middot;Touch feedback(触摸反馈) * middot;Reveal effect(揭露效果) * middot;Activity transitions(Activity转换效果) * middot;Curved motion(曲线运动) *

Android5.0之Activity的转场动画

Activity的转场动画很早就有,但是太过于单调,样式也不好看,于是Google在Android5.0之后,又推出的新的转场动画,效果还是非常炫的,今天我们一起来看一下. 1.旧转场动画回顾 首先我们还是先来看看在5.0之前如果我们想要在启动Activity时使用动画该怎么做呢? [java] view plain copy print? startActivity(new Intent(this, Main3Activity.class)); overridePendingTransitio

CSS变化、过渡与动画

CSS变换用于在空间中移动物体,而CSS过渡和CSS关键帧动画用于控制元素随时间推移的变化. 变换.过渡和关键帧动画的规范仍然在制定中.尽管如此,其中大多数特性已经在常用浏览器中实现了. 1.二维变换 CSS变换支持在页面中平移.旋转.变形和缩放元素. 从技术角度说,变换改变是元素所在的坐标系统.任何落在元素渲染空间内的像素都会被畸变场捕获,然后再把它们传输到页面上的新位置,或改变大小.元素本身还在页面上原来的位置,但它们畸变之后的"影像"已经变换了. <div class=&q

新手入门指导:Vue 2.0 的建议学习顺序

起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础. 3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解. 4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止.着

使用 Vue 2.0 实现服务端渲染的 HackerNews

Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.vue-hackernews-2.0 是 Vue 作者在GitHub上面放的 Vue 2.0 的一个示例项目,结合 Express.vue-router & vuex 来构建,是很好的学习案例. Features Server Side Rendering Vue + vue-router + vue

从壹开始前后端分离【 .NET Core2.0 Api + Vue 3.0 + AOP + 分布式】框架之九 || 依赖注入IoC学习 + AOP界面编程初探

代码已上传Github,文末有地址 说接上文,上回说到了<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之八 || API项目整体搭建 6.3 异步泛型+依赖注入初探>,后来的标题中,我把仓储两个字给去掉了,因为好像大家对这个模式很有不同的看法,嗯~可能还是我学艺不精,没有说到其中的好处,现在在学DDD领域驱动设计相关资料,有了好的灵感再给大家分享吧. 到目前为止我们的项目已经有了基本的雏形,后端其实已经可以搭建自己的接口列表了,框架已

Vue 2.0开发企业级移动端音乐WebAPP

第1章 课程内容介绍包括课程概述.课程安排.学习前提.讲授方式等方面的介绍,最后演示了整个音乐App的功能,让同学们对课程项目有一个直观的了解.1-1 导学1-2 课前必读(源码获取方式) 第2章 项目准备工作包括项目需求分析.脚手架初始化代码.项目目录介绍及图标字体.公共样式等资源的准备 .2-1 需求分析2-2 Vue-cli脚手架安装2-3 项目目录介绍及图标字体.公共样式等资源准备 第3章 页面骨架开发包括页面入口.header 组件的编写.路由配置及顶导 tab 组件开发.3-1 页面