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里的find与filter使用与区别
VUE里的find与filter使用与区别
158 0
|
11天前
|
JavaScript
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
|
11天前
|
前端开发
Vue2和Vue3的区别,在setup中定义的数据,在data(){return中能否定义到},在setup我们不能用this,写在return中可以用this,但是不能在setup否则会报错
Vue2和Vue3的区别,在setup中定义的数据,在data(){return中能否定义到},在setup我们不能用this,写在return中可以用this,但是不能在setup否则会报错
|
1月前
|
JavaScript 编译器 API
vue2和vue3区别
vue2和vue3区别
26 4
|
13天前
|
前端开发 JavaScript 数据管理
前端框架对比:React、Vue与Angular
【7月更文挑战第2天】React、Vue和Angular是前端三大框架,各有特色。React以组件化和虚拟DOM著称,适合大型SPA;Vue轻量且易用,适用于快速开发;Angular是全面解决方案,适合复杂应用,但学习成本高。选择取决于项目需求和团队技能。
|
18天前
|
JavaScript 前端开发 API
vue3和vue2的区别
vue3和vue2的区别
|
10天前
|
JavaScript
vue中v-bind和v-model有什么区别?
在Vue.js中,v-bind和v-model都是指令,用于实现数据和DOM元素之间的双向绑定,但它们的使用场景和功能有所区别。
10 0
|
14天前
|
JavaScript
vue $router与$route的区别详解
vue $router与$route的区别详解
6 0
|
2月前
|
JavaScript 网络架构 开发者
阿珊解说Vue中`$route`和`$router`的区别
阿珊解说Vue中`$route`和`$router`的区别
|
2月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。