Vue、jquery和angular之间区别

简介: Vue、jquery和angular之间区别

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双向数据绑定。



相关文章
|
2月前
|
JavaScript
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
128 65
|
8天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
15 1
|
22天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
76 6
|
19天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
16 2
|
22天前
|
JavaScript 前端开发
Vue 2 和 Vue 3 之间响应式区别
10月更文挑战第7天
31 2
|
8天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
12 0
|
1月前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
39 6
|
2月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
22天前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
82 0
|
2月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
80 4