在vue.js中如何写jq语句

Question

想写这种语句,鼠标移动到.xxx显示.yyy,放在什么地方?ready()里面已经写初始$('.yyy').hide()了

$('.xxx').mouseenter(function(){
    $('.yyy').toggle()})

Answer 1

加了jq就感觉好痛苦，不过还是说说吧：

<div class="xxx" v-on:mouseenter="toggleY" ><div>

export default {
    methods: {
        toggleY: function(){
            $('.yyy').toggle()});
        }
    }
}

补充：

如果不用jq，仅靠vue，可以这么写：

<div class="xxx" v-on:mouseenter="toggleY" v-show="needShow"><div>

export default {
    data: function(){
        return {
            needShow: true
        };
    },
    methods: {
        toggleY: function(){
            this.needShow = !this.needShow;
        }
    }
}

为什么vue叫响应式？这种靠数据变化来驱动UI更新的方式，就可以叫响应式(程序足够“聪明”，我只要告诉他我想要什么，譬如：needShow，程序自己知道要做什么，该怎么做！)。jq的那套$('.yyy').toggle()，就是命令式(意思是程序足够傻，我必须告诉他“怎么做！”)

Answer 2

不要使用jQuery！！！
使用Vue框架就尽量使用Vue的方式完成功能。