Difference between jQuery and Vue.js
Since jQuery is a library specialized for selector operation, it is simple and easy to handle part of HTML with just a little bit. Whenever you want to do complex processing Every time you search and operate elements from the selector each time, it is difficult to grasp and manage the whole thing because multiple elements that should display the same data are not synchronized properly. I do not have to do anything complicated so far, I think that there is no need to forcibly change unless you feel like the current situation is hard.
Vue.js is made with a design that uses a virtual DOM that runs at high speed … (It is difficult because it is difficult.) Simply put, JavaScript data and HTML elements are linked, and if data changes, It reflects on display. You do not have to write the process of synchronizing the data and display every time, you reduce the time to go back and forth between the design and the script when doing maintenance. It is suitable for interactive pages and pages where state management is active.
How about SEO?
The data that Vue.js has is not displayed even by looking at the browser source code. But recent crawler will pick up the part outputted by JavaScript such as Vue.js and I think that it is not enough to worry about it.
When considering OGP for sharing etc, there is also SSR (server-side rendering), so only the first access will be constructed on the server side with the necessary HTML on the initial screen and after that, it will be processed via the virtual DOM.
Writing difference
Replace letters
First, World let's you to writer a code that easily changes to another character.
In the case of jQuery
HTML
< div >
Hello < span id = "message" > World </ span > !
< button id = "update" > change </ button >
</ div >
JavaScript
$ ( document ). on ( 'click' , '# update' , function () {
$ ( '# message' ). text ( 'jQuery' )
})
When writing with jQuery it is roughly like this. It is necessary to enclose the part to be changed with a tag.
In case of Vue.js
HTML
< div id = "app" >
Hello {{message}}!
< button @ click = "update" > change </ button >
</ div >
JavaScript
new Vue ({
el : '# app' ,
data : {
message : 'World'
},
methods : {
update () {
this . message = 'Vue.js'
}
}
})
Writing it in Vue.js makes it look like this. There is still no difference, but rather jQuery seems easier.
Hold the character string from the beginning from the beginning {{ message }}and write it when displaying the character string of the data on the screen.
$(element).on('click', ...)behave similar to jQuery . You can write a method name, or you can write direct formulas if it is short not to use it.
this . message = 'Vue.js'
If you change the data {{ message }}this part will be changed together .
Adding and deleting list elements
Press the button to add a new element to the list and press the remove button to delete that element. Let's also display the number of current list elements.
In the case of jQuery
Assuming that it was acquired with Ajax, jQuery is also displayed from the data at the beginning.
HTML
< Div >
< the p- > Length: < Span Id = "Length" > 0 </ Span > </ the p- >
< Ul Id = "List" > </ Ul >
< Button Id = "Add" > Add </ Button >
</ div >
JavaScript
( function () {
var counter = 0
var list = [ 'Apple' , 'Banana' , 'Strawberry' ]
$ ( A document ). On ( 'the click' , '#add' , function () {
addItem ( 'Orange' + ( ++ counter ). ToString ())
})
$ ( A document ). On ( 'the click' , ' .remove ' , function ( event ) {
$ ( event . target ). parent (). remove ()
updateLength ()
})
function init () {
for ( var i = 0 ; i < list . length ; i ++ ) {
addItem ( list [ i ])
}
}
Function addItem ( Name ) {
$ ( '#List' ). Append ( '<Li>' Tasu Name Tasu '<Button Class = "Remove"> Remove </ Button> </ Li>' )
UpdateLength ()
}
function updateLength () {
$ ( '# length' ). text ( $ ( '# list li' ). length )
}
init ()
}) ()
Even though I use jQuery, I think that some people write classes and write more beautifully, but I think it is like this.
Well <span id="length">0</span>this is awkward data that this is often. In order to synchronize this with the number of list elements, updateLength()we have to do it each time we have changed. It is very troublesome.
Templates are also included in logic so maintenance is difficult.
$ ( '# list' ). append ( '<li>' + name + '<button class = "remove"> remove </ button> </ li>' )
Since jQuery is a type that can not survive without a selector, Attributes such as IDs and classes will increase more and more as the number of places to operate increases.
In case of Vue.js
HTML
< div id = "app" >
< p > Length: {{length}} </ p >
< ul >
< li v-for = "(item, i) in list" : key = "item" > {{item }}
< button @ click = "list.splice (i, 1)" > remove </ button >
</ li >
</ ul >
< button @ click = "addItem " > add</ button >
</ div >
JavaScript
New Vue ({
El : '#App' ,
Data : {
Counter : 0 ,
List : [ 'Apple' , 'Banana' , 'Strawberry' ]
},
Computed : {
Length : Function () {
Return This . List . Length
}
},
methods : {
addItem : function () {
this . list . push( 'Orange' + ( ++ this . Counter ). ToString ())
}
}
})
I see a lot of difference.
addItemBoth jQuery and Vue.js are functions that add new elements, but what you are doing is quite different. Addition and deletion to elements can also be done simply by manipulating the array on the data side.
this . list . push ( 'Orange' + ( ++ this . counter ). toString ())
it will be displayed in real-time if to make one of the things that returns the length of the array with data from the function type called.
computed : {
// This part has the same role as data
length : function () {
return this . list . length
}
},
Of course {{ list.length }}it's okay to write, but it's useful for filtering and other complex processing as it computes cached.
That’s nice.
Display / non-display switching and transition / animation
Let’s make common tab switching content.
If you use, you can receive clicks and enter, but checking the key code is also quite different so I dared tab index to use it. We do not consider WAI-ARIA and so on.
In the case of jQuery
HTML
< Div >
< Ul Id = "Tab" Class = "Tab" >
< Li Data-Id = "1" Tabindex = "0" > Menu1 </ Li >
< Li Data-Id = "2" Tabindex = "0" > menu 2 </ li >
< li data-id = "3" tabindex = "0" > menu 3 </ li >
</ ul >
<Div Id = "Content" Class = "Content" >
< Section Data-Id = "1" >
< the p- > Content1 </ the p- >
</ Section >
< Section Data-Id = "2" >
< the p- > Content2 </ p >
</ section >
< section data-id = "3" >
< p >content3 </ p >
</section >
</ div >
</ div >
JavaScript
( function () {
var current = 1
$ ( '#Tab' ). On ( 'Click' , 'Li' , Function ( Event ) {
ChangeTab ( $ ( This ). Data ( 'Id' ))
})
$ ( "#Tab" ). On ( ' keypress' , 'li' , function ( event ) {
if ( event . keyCode == 13 ) {
changeTab ( $ (this ). data ( 'id' ))
}
})
function init () {
changeTab ( current )
}
Function ChangeTab ( Id ) {
$ ( '#Content Section: Not ([Data-Id = "' Tasu Id Tasu '"])' .) RemoveClass ( 'Active' )
$ ( '#Content Section [Data-Id = " ' Tasu Id Tasu ' "] ' .) AddClass ( ' Active ' )
$ ( ' #Tab Li: Not ([Data-Id =" ' Tasu Id Tasu ' "]) ' .) RemoveClass ( ' Active ' )
$ ( '# tab li [data-id = "' + id + '"]' ). addClass ( 'active' )
}
init ()
}) ()
Add or remove classes from active elements.
display:none As it comes with switching animation was used as a substitute for the transition to fade in. visibility You can use such as, but if you do not like CSS, I'm going to put this implementation in CSS too.
I threw it out at the time of making a fade-out.
In case of Vue.js
HTML
< div id = "app" >
< ul class = "tab" >
< li v-for = "item in list"
@ click = "changeTab (item.id)"
@ keyup . enter = "changeTab (item.id) "
: class = " {active: active (item.id)} " tabindex = " 0 " > {{Item.Label}} </ li >
</ ul >
< div class = " content-vue ">
< transition>
< Section V-For = "Item In List" : Key = "Item.Id" V-If = "Active (Item.Id)" >
< the p- > {{Item.Content}} </ the p- >
</ Section >
</ transition >
</ div >
</ div >
JavaScript
new new Vue ({
el : '#app' ,
data : {
current : 1 ,
list : [{
id : 1 ,
label : 'menu1' ,
content : 'content1'
}, {
id : 2 ,
label : 'menu2' ,
content : '
content 2' }, {
id : 3 ,
label : 'menu 3 ' ,
content : ' content 3'
}]
},
Methods : {
active : function ( id ) {
return this . Current == id
},
ChangeTab : function ( id ) {
this . Current = id
}
}
})
Since Vue.js v-ifcan write a conditional branch that is also in the template, it displays only the content of the active ID.
< Section V-For = "Item In List" : Key = "Item.Id" V-If = "Active (Item.Id)" >
< the p- > {{Item.Content}} </ the p- >
</ Section >
And switching transition is <transition>surrounded by just by Vue managing the time and the switching has started The class is attached at the timing that it is finished, and it is over at the timing that the display:none element is deleted, so after that the style provided to the class You can stick it.
CSS
. V-enter-active , . V-the leave-active {
transition : all .8 s ;
}
. v-leave-active {
position : absolute ;
}
/ * From the left when viewed * /
. V-enter {
transform : translateX ( -20 px );
opacity : 0 ;
}
/ * When the disappearing TOP * /
. V-the leave--to {
transform : translateY ( -20 px );
opacity : 0 ;
}
You can easily make complicated transitions and display:none you will not be bothered by that anymore.
If you transition-group change the tag to even the case of list elements you can move in the same way. There are some samples officially, but the original movements are pretty interesting as you can make it easily simply by changing the CSS part.