Is there a VueJS component that mimic's http://jsfiddle.net/NuWna/2/ - vue.js

Question

I'm looking for a VueJS Card Component that mimic's this Example:
http://jsfiddle.net/NuWna/2/
Having a hard time writing the jQuery code in VueJS
$(document).ready(function(){
$(".slide").hover(function(){
$(this).find("div.snipit").slideDown("slow");
},function(){
$(this).find("div.snipit").slideUp("slow");
});
});

Answer 1

You can create a Vue component and you can use jQuery slideUp/slideDown methods on mounted vue lifecycle hooks,
Also I've given solution without jQuery below.
1. Using Vue + jQuery - http://jsfiddle.net/79rc5oss/1/
Vue.component('my-comp', {
template: `
<div class="slide">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="snipit">
<h4>Image 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
`,
mounted: function(){
$(".slide").hover(function(){
$(this).find("div.snipit").slideDown("slow");
},function(){
$(this).find("div.snipit").slideUp("slow");
});
}
})
var app = new Vue({
el: '#app'
});
img{
border:1px solid yellow;
margin: 14px 0 0 0;
}
div.slide {
width: 310px;
height: 230px;
float: left;
border:1px solid red;
text-align: center;
position: relative;
background: url(http://dummyimage.com/310x230) no-repeat top center;
}
div.slide div {
width: 250px;
height: 100px;
padding: 0;
display: none;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
border:1px solid red;
bottom: 14px;
left:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
<my-comp></my-comp>
</div>
2. Using Vue + CSS without jQuery - http://jsfiddle.net/79rc5oss/
Vue.component('my-comp', {
template: `
<div class="slide">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="snipit">
<h4>Image 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
`
})
var app = new Vue({
el: '#app'
});
img{
border:1px solid yellow;
margin: 14px 0 0 0;
}
div.slide {
width: 310px;
height: 230px;
float: left;
border:1px solid red;
text-align: center;
position: relative;
background: url(http://dummyimage.com/310x230) no-repeat top center;
overflow: hidden;
}
.slide div.snipit{
width: 250px;
height: 0px;
padding: 0;
display: block;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
border:1px solid red;
bottom: 12px;
left:30px;
overflow: hidden;
transition: all .5s ease-out;
}
.slide:hover div.snipit{
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
<my-comp></my-comp>
</div>