博客

14-使用Vue来实现JQuery的动画效果

  • Post author:
  • Post category:vue


在学Vue之前学jQuery的时候，觉得jquery可能是最好用的，比JavaScript简洁了非常多，那段时间写的所有效果都用的jquery不管是轮播图还是页面效果，用jquery都可以轻松解决，但是随着Vue的学习，我发现代码可以越来越省，jquery还需要直接操作dom来改变具体样式，而Vue直接一个methods搞定，最直接的好处就是节省了大量的代码和时间。接下来用Vue实现了一个slideDown、slideUp和show、hide效果。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>
<script>
    Vue.component("my-component",{
  
        props:['width'],
        template:
            `<div>
           <div :style="a" @mouseenter="handleA"