深入了解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代码

nbsp;html>  
  
  
    <meta>  
    <script></script>  
  
  
<p>
    </p><p>大家好，我是<span>张三<span>!</span></span></p>
    <p>我是一名<span>医生</span>.</p>
    <button>修改</button>

<script>  
    $("#modifyBtn").click(function(){
        $("#name").text("李四");
        $("#jop").text("老师");
    });
</script>  
  

 (2)Vue代码

nbsp;html>


<meta><title>Vue</title><script></script><p>
    </p><p>大家好，我是<span>{{name}}<span>!</span></span></p>
    <p>我是一名<span>{{jop}}</span>.</p>
    <button>修改</button>

	
<script>
new Vue({
  	el: &#39;#app&#39;,
	data:{
    	name:"张三",
    	jop:"医生"
	},
	methods:{
    	modifyInfo:function(){
        	this.name = "李四";
        	this.jop = "老师";
    	}
	}
})
</script>

  感谢大家的阅读，希望大家收益多多。

 本文转自： https://blog.csdn.net/xutongbao/article/details/77870989

 推荐教程：《JS教程》

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！