vue 中使用jquery 鼠标进出事件控制图片淡入淡出

环境: vue2.0 + webpack 打包
使用方法: componments 下新建.vue文件,然后将一下代码复制粘贴,运行.
注意: 注意图片路径
<template>
  <div >
    <h2>{{msg}}</h2>
    <ul>
      <li class="imgs a">
        <a href=""><img src="../assets/logo.png" alt=""></a>
        <a href=""><img src="../assets/001.jpg" alt=""></a>
        <a href=""><img src="../assets/002.jpg" alt=""></a>
      </li>
      <li class="imgs b">
        <a href=""><img src="../assets/003.jpg" alt=""></a>
        <a href=""><img src="../assets/004.jpg" alt=""></a>
        <a href=""><img src="../assets/005.jpg" alt=""></a>
        <a href=""><img src="../assets/006.jpg" alt=""></a>
      </li>
      <li class="imgs c">
        <a href=""><img src="../assets/logo.png" alt=""></a>
        <a href=""><img src="../assets/001.jpg" alt=""></a>
        <a href=""><img src="../assets/002.jpg" alt=""></a>
        <a href=""><img src="../assets/003.jpg" alt=""></a>
      </li>
    </ul>

  </div>
</template>
<script>
  import $ from 'jquery'
  export default {
    data () {
      return {
        msg: 'this imgs'
      }
    },
    mounted () {
      $('ul').on('mouseenter', 'li', function (e) {
        console.log($(this).children().children())
        $(this).children().children().fadeOut().siblings()
        setTimeout(function () {
          $(this).children().children().fadeIn().siblings()
        }, 500)
      })
      $('ul').on('mouseout', 'li', function (e) {
        $(this).children().children().fadeIn().siblings()
      })
    }
  }
</script>
<style scoped>
  ul {
    list-style: none;
  }
  li {
    min-height: 250px;
  }
  h2,li {
    margin: 10px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px dashed green;
  }
  a {
    display: inline-block;
    width: 200px;
    height: 200px;
  }
  img {
    width: 200px;
    height: 200px;
  }
</style>