Vue、jquery和angular之间区别

news/2024/7/11 1:42:07 标签: vue.js, jquery, angular.js

aVue、jquery、angular之间区别

  • angular与jquery区别
  • angular和Vue

jquery_1">angular与jquery区别

三个版本的输入数据绑定,都是单页面应用。
Angular

	<body ng-app>
		<input type="text" ng-model="name">
		<p>{{name}}</p>
	</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

jquery

<body>
	<input type="text">
	<p></p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
	$(function(){
		$('input').keyup(function(){
			let value=this.value;
			console.log(value)
			$('p').html(value)
		})
	})
</script>

Vue.js

</head>
<body>
<div id="app">
	<input type="text" v-model="message">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Vue.js!'
  }
})
</script>

显而易见的是,拥有双向数据绑定的angular用更轻量的代码做了相同的事。
1.从理论来看,jquery在创建之初了为了解决前端在浏览器之中的样式兼容性问题,它是一个js库,而angular是一种前端框架,前者是用于调用库来更便捷的写代码,后者是写代码在这个框架中,在它所创造的体系中进行实际的应用。
2.jquery不支持双向数据绑定,angular&Vue支持。
3.jquery的API大多数需要和DOM联系,而angular较少的使用DOM,避免了一定的重排重绘问题。
4.jquery应用于单页面程序开发,angular既适用于单页面开发,也被使用在app、云平台等多个整体应用中。
5.jquery主要用$+DOM进行协同开发,angular有一套自定义指令来进行使用,如ngIf ngFor ngModel等等。
6.与node&typescript结合的angular有着更强大的初始化项目能力,能够快速利用命令行创建初始项目。

angular和Vue

这两个都是双向数据绑定。不同的是
1.核心库与生态:Vue核心库较小,生态较新,angular核心库较大,生态较稳定。前者较易学习,后者相对较难。
2。双向绑定:Vue基于ES5中的getter/setter,angular基于它原生的模板编译规则和脏检查
缺点:
Vue:对IE9以下浏览器不支持,但性能较angular高效。
Angular:作用域有变化时,所有监听都需要重新被脏检查,监听越多angular越慢,脏检查循环需要执行多次。而解决这个问题对于前端来说并不容易。
3.指令不同:angular:ng-x Vue:v-x
4.angular由google维护,Vue由个人维护。
5.通信:Vue为了让通信数据流更清晰易懂,在不同组件间通信强制使用单向数据绑定,Angular双向数据绑定。


http://www.niftyadmin.cn/n/5129665.html

相关文章

069:mapboxGL加载GPX,转换为geojson,显示图形

第069个 点击查看专栏目录 本示例是演示如何在vue+mapbox中加载GPX,转换为geojson,在地图上显示图形。这里面用到了大剑师的gpx2geojson插件,很方便的做了数据的转换。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果所用的gpx文件配置方…

【Apache Flink】实现有状态函数

文章目录 在RuntimeContext 中声明键值分区状态通过ListCheckPonitend 接口实现算子列表状态使用CheckpointedFunction接口接收检查点完成通知参考文档 在RuntimeContext 中声明键值分区状态 Flink为键值分区状态&#xff08;Keyed State&#xff09;提供了几种不同的原语&…

【Java题】输出基本数据类型的最大值和最小值,以及float和double的正无穷大值和负无穷大值

一&#xff1a;代码 public class Test {public static void main(String[] args) {//输出byte型的最大值与最小值System.out.println(Byte.MAX_VALUE);System.out.println(Byte.MIN_VALUE);//输出short型的最大值与最小值System.out.println(Short.MAX_VALUE);System.out.pri…

“穷”用英语怎么说?柯桥成人英语培训

01 live in financial distress Many Americans are living in financial distress, at least some of the time. 很多美国人时常面临财务问题的困扰。 distress 意思是 suffering and problems caused by not having enough money, food “困境、窘境、困苦”&#xff0c;…

LeetCode:1465. 切割后面积最大的蛋糕(C++)

目录 1465. 切割后面积最大的蛋糕 题目描述&#xff1a; 实现代码与解析&#xff1a; 贪心 原理思路&#xff1a; 1465. 切割后面积最大的蛋糕 题目描述&#xff1a; 矩形蛋糕的高度为 h 且宽度为 w&#xff0c;给你两个整数数组 horizontalCuts 和 verticalCuts&#xff…

vue3 源码解析(2)— ref、toRef、toRefs、shallowRef 响应式的实现

前言 vue3 源码解析&#xff08;1&#xff09;— reactive 响应式实现 介绍完 reactive 之后还有另一个很重要的响应式API&#xff0c;其中包括 ref、toRef、toRefs 和 shallowRef。这些API在vue3中起着至关重要的作用&#xff0c;它们帮助我们更好地管理和跟踪响应式数据的变…

售后处置跟踪系统设想

售后处置跟踪系统设想 前言 随着汽车工业的发展&#xff0c;软件定义车的模式已成为主流汽车设计及智能化功能架构模式&#xff0c;通过引入SOA的软件架构设计&#xff0c;使得现有的座舱软件、云端服务软件、App软件等众多功能模块的版本迭代频次日新月异&#xff0c;发版更…

Echarts渲染不报错但是没有内容

&#x1f525;博客主页&#xff1a; 破浪前进 &#x1f516;系列专栏&#xff1a; Vue、React、PHP ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 问题&#xff1a;在开发项目的时候使用了Echarts但是好端端的忽然就不渲染了 感觉很无语啊&#xff0c;毕竟好好的就不渲染了&am…