vue 动态添加click_干货 | Vue事件、过渡和制作index页面

“

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

”

Vue事件

1 方法处理器

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

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

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

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

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

2 事件修饰符

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

● .prevent： event.preventDefault()

● .stop： event.stopPropagation()

3 按键修饰符

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

  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: 定义进入过渡的开始状态。只应用