Vue и jquery в примерах

Простые примеры реализации различных "фич" на jquery и vue.js

Ниже собрана часть по наиболее популярным и “избитым приемам”, благодаря которым можно в значительной степени понять работу vue.js. Первым - идет пример на jquery, вторым - на vue

UPD: чтобы посмотреть текущую статью с интерактивными примерами перейдите в приложение.

Забираем значения из инпута

Реализация на jQuery

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="jQuery capture information from a form input- on enter " src="//codepen.io/vedees/embed/preview/BbLOYg/?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/BbLOYg/'>jQuery capture information from a form input- on enter </a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Реализация на Vue.js

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Vue capture information from a form input - on enter" src="//codepen.io/vedees/embed/preview/qvaMox/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/qvaMox/'>Vue capture information from a form input - on enter</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Динамичная обработка input

Реализация на jQuery

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="jQuery Capture Information From a Form Input" src="//codepen.io/vedees/embed/preview/qvqGJg/?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/qvqGJg/'>jQuery Capture Information From a Form Input</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Реализация на Vue.js

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Vue capture information from a form input" src="//codepen.io/vedees/embed/preview/drOEQE/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/drOEQE/'>Vue capture information from a form input</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Toggle - переключение css классов

Реализация на jQuery

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Toggle Class jQuery" src="//codepen.io/vedees/embed/preview/drOEdr/?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/drOEdr/'>Toggle Class jQuery</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Реализация на Vue.js

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Toggle Class Vue" src="//codepen.io/vedees/embed/preview/LaboQM/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/LaboQM/'>Toggle Class Vue</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Показать или скрыть элемент по клику (Show - Hide)

Реализация на jQuery

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="jQuery show hide" src="//codepen.io/vedees/embed/preview/oVYROR/?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/oVYROR/'>jQuery show hide</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Реализация на Vue.js

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Vue show hide" src="//codepen.io/vedees/embed/preview/zboQQm/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/zboQQm/'>Vue show hide</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Показать или скрыть кнопку (if-else)

Реализация на jQuery

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Show button based on content jQuery " src="//codepen.io/vedees/embed/preview/QoGXbq/?height=265&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/QoGXbq/'>Show button based on content jQuery </a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Реализация на Vue.js

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Show button based on content Vue " src="//codepen.io/vedees/embed/preview/pYNXjL/?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/pYNXjL/'>Show button based on content Vue </a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Списки (Comparision)

Реализация на jQuery

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Comparision - jquery" src="//codepen.io/vedees/embed/preview/GerZzg/?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/GerZzg/'>Comparision - jquery</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Реализация на Vue.js

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Comparision - Vue" src="//codepen.io/vedees/embed/BbpKvK/?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/BbpKvK/'>Comparision - Vue</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Отправка данных с форм

Реализация на jQuery и AJAX

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="jQuery Form Submission AJAX" src="//codepen.io/vedees/embed/preview/bZBPER/?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/bZBPER/'>jQuery Form Submission AJAX</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>

Реализация на Vue.js

<div class="codepen"> <iframe height="265" style="width: 100%;" scrolling="no" title="Vue Form Submission" src="//codepen.io/vedees/embed/preview/Rdozar/?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vedees/pen/Rdozar/'>Vue Form Submission</a> by vedees (<a href='https://codepen.io/vedees'>@vedees</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div>