一、寫在前面的廢話
最近寫畢設，前端用的 vue+element-ui，想實現hover()事件效果，但是怎麼都沒找到可以直接呼叫的，然後折騰了引入jquery，好一通折騰，千辛萬苦引入成功，不再報 $ 未定義之後，心裡一陣狂喜，想著就要實現了呢，然而，結果卻是。。。what? 居然不執行！什麼情況？不知道。。。哦，對，給出我是怎麼呼叫的，萬一是我用錯了，錯怪他了呢

$("td").hover (
  console.log('1')
  function () {
    console.log('2')
    $(this).addClass("hover")
  },
  function
 
 () {
    console.log('3')
    $(this).removeClass("hover")
  }
);

恩，基本上就是醬紫用的，列印結果是 1 ,也就是說，2 和 3 一個也沒執行。。。。我的內心是崩潰的。。。然後放棄這個思路，放棄了 jquery ，老老實實用 vue 來實現吧

二、問題描述
我現在的需求是：寫了一個靠左邊的導航選單，不啟用的時候只顯示每個選單的小圖示，啟用的時候想要在小圖示的右邊顯示圖示對應的文字，選單可以點開展示子選單，恩，就是醬紫

三、問題未解決的效果
1）先看看他安靜的像個美少女一樣的圖片

恩，對，未啟用狀態下，她就這麼安靜的躺在那
2）然後再看一張啟用狀態下不忍直視的效果圖

就是醬紫，hover了好久都沒成功，放棄。。。

四、問題解決

（1）先看效果圖
1）安靜的時候跟上面的一樣
2）啟用並且滑鼠點開一個子選單，啊，對這張只是把滑鼠移到了有背景色的子選單上，忘了點了，所以被選中的藍色字還在預設選單項上 =_=

3）選中一個子選單並且未關閉的狀態下（滑鼠移出選單）

4）關閉子選單並且移出滑鼠之後他就會繼續安靜的躺著了

（2）實現（只留下原始碼裡與此相關的重點部分）

hover用不了，但是可以把hover拆開成一進一出，這樣就可以呼叫 vue 提供的方法了，就是麻煩了一點

1）HTML（用的element-ui）
① 用@（v-on的縮寫）繫結事件監聽器

<div @mouseover="overShow" @mouseout="outHide"> 
  <el-menu>
    <el-submenu index="checkbatch">
      <template slot="title"><i class="el-icon-document"></i>
        <span :class="{show:showText,hide:hideText}">批次資訊</span>
      </template>
       <el-menu-item>全部批次資訊檢視</el-menu-item>
       <el-menu-item>接受中批次資訊檢視</el-menu-item>
       <el-menu-item>稽核中批次資訊檢視</el-menu-item>
       <el-menu-item>已完成批次資訊檢視</el-menu-item>
    </el-submenu>
  </el-menu>
 </div>

2）js

 data () {
    return {
      showText: false,
      hideText: true
    }
  },
  methods: {
    overShow () {
      this.showText = !this.showText
      this.hideText = !this.hideText
    },
    outHide () {
      this.showText = !this.showText
      this.hideText = !this.hideText
    }
  }

3）css

.show{
    display: block;
}
.hide{
    display: none;
}

4）補充說明：
在我這裡這麼寫之後，小圖示和對應的漢字相對位置不對，但是用 css 的 display 調一調相對位置就可以了

好啦~~~折磨我這麼久的hover事件模擬就這樣解決啦，希望可以幫到有同樣需求的小夥伴