Introduction: Many people say jquey and vue nothing comparable, and should Angular, React to it than that, I think they fall not much comparable, it is based framework mvvm design ideas, nothing more than a way to achieve not the same, there will be some differences in performance under different scenarios. However, from jquery to say vue or to change mvvm is trying to change a thought, is to change the original idea of direct manipulation dom to manipulate the data up, is it not a fundamental change?
1.jquery Description: Surely we have used jquery it, this was once and still the most popular web front end js library, but now he whether domestic or foreign usage is gradually being replaced by other js library, along with browsing follow vendors and ECMA6 achieve unity in the browser for HTML5 specification, jquery utilization rate will be lower and lower
2.vue description: vue is a front-end rise js library, is a streamlined MVVM. From a technical perspective, Vue.js focus on MVVM ViewModel layer model. It binds to the Model-View layer and connected together via a bidirectional data, through the operation of the data can be completed to render the page view. Of course there are many other frameworks such as mvmm Angular, React are similar, are essentially based on the concept of MVVM. However vue with his unique advantage of simple, fast, combination, compact, powerful and rapid rise
3.vue contrast and jquey
jQuery is using the selector ($) to select DOM object, its assigned value, event binding and other operations, and in fact native HTML only difference is that you can more easily select and manipulate DOM objects, data and interfaces are together. Such as the need to obtain content label label: $("lable").val();it is still dependent on the value of DOM elements.
Vue Vue is through the object and the data is completely separated from the View. Operate on the data no longer need to refer to the corresponding DOM object, it can be said of data and View are separate, they are bound to each other to achieve this target by Vue vm. This is the legend of MVVM.
4 illustrates
Scene One: A list add an element, the code below shows vue jquery and two operations, we can be seen vue only need to push data inside a data message to the process of adding a li tag, and you need to get jquery dom element node, and to add a label dom operation, if dom structure particularly complex, or add elements is very complex, the code reading becomes very complicated and low
view:
<! DOCTYPE HTML>
<HTML>
<head>
<Meta HTTP-equiv = " the Content-type " Content = " text / HTML; charset = UTF-. 8 " />
</ head>
<body>
<div ID = " App " >
<UL>
<-! autorendering array data according to the page ->
<Li V- for = " Item in Message " > Item {} {} </ Li>
</ UL>
<Button @ = the Click " the Add " > Add data </ Button>
</ div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js " > </ Script>
<Script> new new Vue ({
EL: ' #app ' ,
Data: {
Message: [ " Article data 1 " , " of data 2 " ],
I: 2
},
Methods: { // add to an array of data to the Add: function () {
the this .i ++
the this .message.push ( " first " + the this .i + " pieces of data "
}
)
}
})
</script>
jquery:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul id="list">
<li>第1条数据</li>
<li>第2条数据</li>
</ul>
<button id="add">添加数据</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"> </ Script>
<Script>
$ (Document) .ready (function () {
var I = 2 ;
$ ( ' #add ' ) .click (function () {
I ++ ;
// by the last operation dom after manually add a tag element li
$ ( " #list " ) .children ( " li " ) .last () the append (. " <li> of " + + I " th data </ li> " )
});
}) ;
</ Script>
Scene 2: Show hidden button control, the code below shows vue jquery and two operations, we can be seen to true and false values vue isShow only need to control the properties, or the need to operate the jquery dom element control the buttons to show and hide
view:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul>
<!--根据数组数据自动渲染页面-->
<li v-for="item in message">{{item}}</li>
</ul>
<button @click="add" v-show="isShow""
<Button = @ the Click> Add Data </ Button>showButton " > Hide button </ Button>
</ div>
</ body>
<Script the src = " https://unpkg.com/vue/dist/vue.js " > </ Script>
<Script> new new Vue ({
EL: ' #app ' ,
data: {
Message: [ " Article data 1 " , " Article second data " ],
I: 2 ,
isShow: to true
},
Methods: { // add to a data array to add :
function(){
this
++ .i
the this .message.push ( " first " + the this .i + " pieces of data " )
},
// the control value to isShow
showButton: function () {
the this .isShow = to false ;
}
}
})
</ Script>
jquery：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul id="list">
<li>第1条数据</li>
<li>第2条数据</li>
</ul>
<button id="add">添加数据</button>
<button id="
</ body>
</ div>> Hide button </ the Button>"showButton
<Script the src = " https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js " > </ Script>
<Script>
$ (Document) .ready (function () {
var I = 2 ;
$ ( ' #add ' ) .click (function () {
I ++ ;
// add a label li element after the last manual operation by dom
$ ( " #list " ) .children ( " li " ) .last () .append ( " <Li> of " + + I " th data </ Li> " )
});
// need to manually hide dom element
$ ("#showButton").click(function(){
$("#add").hide()
})
});
</script>
Output:
4. Summary: The content of relatively shallow talk, mainly about the difference between analysis and jquey vue contrast, the above two examples just do a simple explanation, however, much more than these to be able to solve the problem vue, more complex .
vue applicable scenarios: Background page complex data manipulation, form filling page
jquery applicable scenarios: for example, some html5 animated pages that need to operate js page style page
However, both can also be used in conjunction with, vue focused on data binding, jquery focus on operating style, animation effects, etc., will be more efficient completion of business needs
5. Include the company's front-end directory structure, and interested to share the code for everyone to see
src code directory contains files static assets, components vue component files, file plugins plug (contains the login operation, HTTP request operation, filters, encryption and decryption operations, a common method and the like), routing Router file, store vuex file, app.js vue relevant configuration, index.html main page
package build directory file webpack, dist directory file generated after packaging, node_modules cited external components
