本文摘自PHP中文网,作者烟雨青岚,侵删。
深入了解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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!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的区别(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
jquery dom是什么
jquery遍历方法有哪些?
怎么判断jquery div是否为空
jquery判断是否为ie浏览器的方法
两分钟了解jquery与javascript、js 三者间的区别
jquery实现鼠标滚轮控制图片缩放
jquery怎么判断对象是否存在?
如何删除css样式
jquery怎么生成元素
jquery 轮播图怎么写
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 深入了解jQuery和Vue的区别(附代码)