浅谈web前端常用的三大主流框架

讲到前端的框架，大家想必都能脱口而出：Angular、React、Vue，那么这几个框架的优缺点，以及在项目当中如何抉择框架的使用等等，本篇就将介绍这三大框架的使用感受

双向绑定

开篇就用这三大框架的双向绑定的实现作为一个 demo 引入，通过这三大框架的双向绑定能够简单的了解三大框架在编码上的一些区别以及其的简易程度，从下面的代码简洁程度来讲，vue.js 给我们带来的体验还是不错的

Angular

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body ng-app="MyModule"><div ng-controller="MyCtrl"><input type="text" ng-model="message"><h1>{{ message }}</h1></div><script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script><script>// 这边使用到的是推断型依赖注入const MyModule = angular.module("MyModule", [])const MyCtrl = function ($scope) {$scope.message = 'Hello world !!!'}MyModule.controller('MyCtrl', MyCtrl)</script>
</body></html>

React

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="root"></div><script src="https://cdn.bootcss.com/react/16.9.0-alpha.0/umd/react.development.js"></script><script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script><!-- 注意这边的 babel 只能用 5.x 以下版本的 --><script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script><script type="text/babel">// 这边使用到的是 JSX 语法，React 内部并没有实现双向绑定，所以这边使用了 input 的 change  事件来实现双向绑定class Input extends React.Component {constructor(props) {super(props)this.state = {message: 'Hello world !!!'}this.handleChange = this.handleChange.bind(this)}handleChange(event) {this.setState({message: event.target.value});}render() {var message = this.state.message;return ( <div><input type = "text" value = { message } onChange = { this.handleChange } /> <h1> { message } </h1> </div>);}}ReactDOM.render(<Input/>, document.getElementById('root'));</script>
</body></html>

Vue

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><input type="text" v-model="message"><h1>{{ message }}</h1></div><script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script><script>new Vue({el: '#app',data() {return {message: 'Hello world !!!'}}})</script>
</body></html>

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。

浅谈web前端常用的三大主流框架相关推荐

浅谈web前端三大主流框架
转自:微点阅读(www.weidianyuedu.com)http://www.weidianyuedu.com/ web前端三大主流框架是什么?前端开发师的岗位职责有哪些?小编整理了相关内容供大家参 ...
浅谈Web前端安全策略xss和csrf，及又该如何预防？
Web前端安全策略xss和csrf的攻击和防御一.XSS跨站请求攻击 1.什么是XSS 2.场景模拟 3.XSS的攻击类型 4.如何防御XSS 二.XSRF跨站请求伪造 1.什么是csrf 2.场景 ...
css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货发展过程上个世纪Web开发人员流行使用表格进行 ...
浅谈web前端理解一(前端学习路线)
提到学习web前端,在外行人或者初学者的眼里,应该是绚丽的画面,精彩的布局,或者各种UI以及依据前端开发出来的小游戏.但经过一段时间的学习,你会发现其实本质上是一种搬砖经验的积累,以及布局框架的积累. ...
web前端三大主流框架_web前端三大主流框架
于前端开发工程师来说,组件化模块的框架能够帮助我们更加快速的搭建自己的网站.下面本篇文章和大家介绍一下web前端的三大主流框架:Angular.React.Vue,让大家可以对这三个框架有一定的了解, ...
Web前端三大主流框架是什么？Web前端前景与就业形势
近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师.开发工程师.软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员.那么Web前端三大主流框架是什么呢? 一.We ...
web前端三大主流框架是什么？
转载自品略图书馆 http://www.pinlue.com/article/2020/07/1217/0311017786310.html web前端三大主流框架是什么?前端开发师的岗位职责有哪些? ...
web前端三大主流框架介绍
转自:微点阅读 https://www.weidianyuedu.com web前端三大主流框架是什么? 前端开发师的岗位职责有哪些?微点阅读小编整理了相关内容供大家参考了解,请各位小伙伴随小编一起 ...
Web前端三大主流框架是什么？它们的优点和缺点试什么？
一.Web前端三大主流框架是什么 React: 1.声明式设计:React采用声明范式,可以轻松描述应用. 2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互. 3.灵活:React ...

浅谈web前端常用的三大主流框架

浅谈web前端常用的三大主流框架相关推荐

最新文章

热门文章