浅谈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>
最后，想学习web前端的小伙伴们！
请关注+私信回复：“学习”就可以拿到一份我为大家准备的学习资料！
web前端学习资料