专栏首页腾讯NEXT学位干货 | Vue事件、过渡和制作index页面

干货 | Vue事件、过渡和制作index页面

最近在学习使用Vue作为前端的框架,本文简单介绍Vue的过渡效果,以及记录制作首页的过程。

Vue事件

1

方法处理器

● 可以用v-on指令监听DOM事件

● 类似于内联表达式,事件处理器限制为一个语句

● 当一个ViewModel被销毁时,所有的事件处理器都会自动被删除

● 有时也需要在内联语句处理器中访问原生DOM事件,可以用特殊变量$event把它传入方法

  <button v-on:click="say('hello!', $event)">Submit</button>

2

事件修饰符

Vue封装了常用的事件处理:

● .prevent: event.preventDefault()

● .stop: event.stopPropagation()

3

按键修饰符

在监听键盘事件时,我们经常需要检测keyCode。

  <input v-on:keyup.13="submit">

Vue过渡

通过Vue.js的过渡系统,可以在元素从DOM中插入或移除时自动应用过渡效果。

Vue.js会在适当的时机为你触发CSS过渡或动画,你也可以提供相应的JavaScript钩子函数在过渡过程中执行自定义的DOM操作。

1

使用过渡

在目标元素上使用transition特性。transition 特性可以与下面资源一起用:

● v-if

● v-show

● v-for(只在插入和删除时触发,使用vue-animated-list插件)

● 动态组件(is和切换组件)

● 在组件的根节点上,并且被Vue实例DOM方法(如vm.$appendTo(el))触发

当插入或删除带有过渡的元素时,Vue 将:

1. 尝试查找JavaScript过渡钩子对象——通过Vue.transition(id, hooks)或transitions选项注册,将在过渡的不同阶段调用相应的钩子。

2. 自动嗅探目标元素是否有CSS过渡或动画,并在合适时添加/删除CSS类名。

3. 如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画,DOM操作(插入/删除)在下一帧中立即执行。

2

CSS过渡

● 过渡的CSS类名

  • ● .name-transition: 始终保留在元素上
  • ● .name-enter: 定义进入过渡的开始状态。只应用一帧然后立即删除
  • ● .name-leave: 定义离开过渡的结束状态。在离开过渡开始时生效,在它结束后删除,当然配合css3的帧动画效果会更好。

我们这里的菜单展开/收起用的CSS过渡。

在目标元素上使用transition特性

<li v-for="item in menu.menus" v-show="menu.show" transition="staggered">{{ item.text }}</li>

为.staggered-transition,.staggered-enter和.staggered-leave添加CSS规则:

.staggered-transition {    transition: all .2s ease-in-out;    overflow: hidden;    margin: 0;    height: 50px;}.staggered-enter, .staggered-leave {    height: 0px;    opacity: 0;    padding: 0;}

3

JavaScript过渡

可以只使用JavaScript钩子,不用定义任何CSS规则。

当只使用JavaScript过渡时,enter和leave钩子需要调用done回调,否则它们将被同步调用,过渡将立即结束。

Vue.transition('fade', {  css: false, // Vue.js将跳过CSS检测  enter: function (el, done) {    // 元素已被插入 DOM    // 在动画结束后调用 done    $(el)      .css('opacity', 0)      .animate({ opacity: 1 }, 1000, done)  },  enterCancelled: function (el) {    $(el).stop()  },  leave: function (el, done) {    // 与 enter 相同    $(el).animate({ opacity: 0 }, 1000, done)  },  leaveCancelled: function (el) {    $(el).stop()  }})

然后用在transition特性中。

4

渐变过渡

transition与v-for一起用时可以创建渐近过渡。

给过渡元素添加一个特性

stagger,enter-stagger或 eave-stagger

<!--每个过渡项目增加100ms延时--><div v-for="item in list" transition="stagger" stagger="100"></div>

提供一个钩子stagger, enter-stagger或leave-stagger,以更好的控制

Vue.transition('stagger', {  stagger: function (index) {    // 每个过渡项目增加50ms延时    // 但是最大延时限制为300ms    return Math.min(300, index * 50)  }})

制作index页面

页面结构如下:

1

添加模板

这里使用了上一节创建的头部组件,在component属性中引入。

<template>  <div is="my-header" current="index"></div><!--使用is绑定组件,current传入prop数据-->  <div class="container-fluid row">  <aside class="col-md-2  col-md-offset-1" id="according">    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">      <div class="panel panel-default list-group" v-for="menu in asidemenus">        <div class="panel-heading" role="tab">          <ul class="panel-title ">            <li data-toggle="collapse" v-on:click="toggleContent($index)">              {{ menu.title }}            </li>          </ul>        </div>        <div class="panel-collapse collapse in">          <ul class="list-group">            <li v-for="item in menu.menus" v-show="menu.show" transition="staggered" class="list-group-item" role="button" v-on:click.stop="changeLoading(item.click)">{{ item.text }}</li>          </ul>        </div>      </div>    </div>  </aside>  <article class="col-md-7">    <section class="index-content">      <p v-show="loading === 'init' || loading === 'name'">昵称:被删</p>      <p v-show="loading === 'init' || loading === 'email'">邮箱:wangbeishan@163.com</p>      <p v-show="loading === 'init' || loading === 'github'">github: <a href="https://github.com/godbasin">github.com/godbasin</a></p>      <div v-show="loading === 'sethead'">这里是修改头像页面</div>      <div v-show="loading === 'setinfo'">这里是修改资料页面</div>      <div v-show="loading === 'other'">这里是其他页面</div>    </section>  </article></div></template>

2

添加Vue组件

<script>// 导入Header组件import MyHeader from './Header.vue'export default {  components: { // 导入Header组件    MyHeader  },  data () {    return {      loading: 'init',      asidemenus: [{        title: '基本资料', // title用于储存该菜单显示名称        click: 'init', // click用于储存该菜单对应点击时loading的状态值        show: true, // show用于保存菜单是否隐藏的状态        menus: [{          text: '名字', // title用于储存该菜单显示名称          click: 'name' // click用于储存该菜单对应点击时loading的状态值        }, {          text: '邮箱',          click: 'email'        }, {          text: 'github',          click: 'github'        }]      }, {        title: '设置头像',        click: 'sethead',        show: true      }, {        title: '修改资料',        click: 'setinfo',        show: true      }, {        title: '其他',        click: 'other',        show: true      }]    }  },  // 在 `methods` 对象中定义方法  methods: {    changeLoading: function (view) { // 更新loading      this.loading = view    },    toggleContent: function (index) { // 过渡菜单效果并更新loading      this.asidemenus[index].show = !this.asidemenus[index].show      this.changeLoading(this.asidemenus[index].click)    }  }}</script>

结束语

这里我们没有用到bootstrap中的组件,毕竟用Vue过渡很简单的呢。不得不说,Vue的动画过渡做的真的不错,事件的封装也做的很方便呢。

原文作者:腾讯高级工程师 王贝珊

  -前端好课-  

最热前端框架,晋升加薪必修技能

多项目迭代式教学,低门槛快速进阶高级工程师

若需了解更多,请扫码添加小助手咨询~

也可直接查找微信号:TencentNext

▲ NEXT学院 官方课程助教 ▲

点击阅读原文,0元学习

本文分享自微信公众号 - 腾讯NEXT学院(Next_Academy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2018 我所了解的 Vue 知识大全

    腾讯NEXT学位
  • 《Node.js在CLI下的工程化体系实践》成都OSC源创会分享总结

    腾讯NEXT学位
  • 干货 | 关于前端构建大型知识应用,你知道多少?

    与其说是构建大型应用,或许更多地是常用的应用构建吧。很多时候我们的项目在搭建的时候通常都不会定位为大型项目,但我们还是需要考虑到拓展性,或者说是在当项目开始变得...

    腾讯NEXT学位
  • 仅供娱乐,iPad上线可预测死亡时间的AR应用

    VRPinea
  • 王飞:感谢有你,大会闭幕致辞

    由俱乐部秘书长王飞大会闭幕致辞,感谢各位付出赞助的朋友(付亮、刘旭、汪明栋),感谢在大会幕后完成整个设计工作的设计师团队(吴树波、张耕源、安逸、张波、宋石、周亚...

    寒树Office与RPA
  • Rainbond V5.2.0-beta2 发布,企业中台视图来了

    Rainbond 是以企业云原生应用开发、架构、运维、共享、交付为核心的Kubernetes多云赋能平台, 向下结合Kubernetes云原生资源管理模式,对接...

    Rainbond开源
  • Python之pygame学习矩形区域(5)

    在pygame中矩形区域这个类比较特殊,在游戏中,所有可见的元素都是以矩形区域来描述位置。

    萌海无涯
  • Hbase入门(四)——表结构设计-RowKey

    Hbase的表结构设计与关系型数据库有很多不同,主要是Hbase有Rowkey和列族、timestamp这几个全新的概念,如何设计表结构就非常的重要。

    实时计算
  • 手把手打造404页面隐藏后门

    周俊辉
  • 从大数据征信看银行风险控制创新

    ? 数据将是未来银行的核心竞争力之一,这已成为银行业界的共识。在大数据时代,银行所面临的竞争不仅仅来自于同行业内部,外部的挑战也日益严峻,互联网、电子商务等新...

    灯塔大数据

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动