您好,欢迎访问一九零五行业门户网

深入了解jQuery和Vue的区别(附代码)

深入了解jquery和vue的区别(附代码)
1.jquery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作
2.vue是首先把值和js对象进行绑定,然后修改js对象的值,vue框架就会自动把dom的值就行更新。
3.可以简单的理解为vue帮我们做了dom操作,我们以后用vue就需要修改对象的值和做好元素和对
象的绑定,vue这个框架就会自动帮我们做好dom的相关操作
4.这种dom元素跟随js对象值的变化而变化叫做单向数据绑定,如果js对象的值也跟随着dom元素的
值的变化而变化就叫做双向数据绑定
用一个简单的例子来说明编写jquery和vue上的不同
修改文字
点击按钮后:
改为
(1)jquery代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> </head> <body> <p> <p>大家好,我是<span id="name">张三<span>!</p> <p>我是一名<span id="jop">医生</span>.</p> <button id = "modifybtn">修改</button></p><script type="text/javascript"> $("#modifybtn").click(function(){ $("#name").text("李四"); $("#jop").text("老师"); });</script> </body> </html>
(2)vue代码
<!doctype html><html><head><meta charset="utf-8"><title>vue</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><p id="app"> <p>大家好,我是<span>{{name}}<span>!</p> <p>我是一名<span>{{jop}}</span>.</p> <button v-on:click="modifyinfo">修改</button></p> <script>new vue({ el: '#app', data:{ name:"张三", jop:"医生" }, methods:{ modifyinfo:function(){ this.name = "李四"; this.jop = "老师"; } }})</script></body></html>
感谢大家的阅读,希望大家收益多多。
 本文转自: https://blog.csdn.net/xutongbao/article/details/77870989
 推荐教程:《js教程》
以上就是深入了解jquery和vue的区别(附代码)的详细内容。
其它类似信息

推荐信息