深入了解jQuery和Vue的区别(附代码)_WEB前端开发

深入了解jQuery和Vue的区别(附代码)_WEB前端开发,第1张

同源策略是什么意思_WEB前端开发

同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。


可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。


深入了解jQuery和Vue的区别(附代码)_WEB前端开发,第2张

深入了解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上的不同

修改文字

点击按钮后:


深入了解jQuery和Vue的区别(附代码)_WEB前端开发,第3张

改为

深入了解jQuery和Vue的区别(附代码)_WEB前端开发,第4张

(1)jQuery代码

引起内存泄漏的 *** 作有哪些_WEB前端开发

引起内存泄漏的 *** 作有:1、setTimeout的第一个参数使用字符串而非函数的话,会引发内存泄漏;2、闭包、控制台日志、循环【在两个对象彼此引用且彼此保留时,就会产生一个循环】,会引发内存泄漏。


<!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的区别(附代码)的详细内容,更多请关注ki4网其它相关文章!

CSS中@import是什么意思?_WEB前端开发

在CSS中@import是导入CSS样式表,这种方式通常会在CSS文件中使用,这样做的好处是,可以把多个样式表导入到一个样式表中,从而在页面里面只需要导入一个样式表即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/zaji/560906.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020-06-28
下一篇 2020-06-28

发表评论

登录后才能评论

评论列表(0条)

保存