深入理解jQuery和Vue的不同（附代码）
发布时间：09/01 来源：未知 浏览：
关键词：
深入理解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的不同（附代码）的具体内容，更多请关注百分百源码网其它相关文章！
