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

讲到前端的框架，大家想必都能脱口而出：Angular、React、Vue，那么这几个框架的优缺点，以及在项目当中如何抉择框架的使用等等，本篇就将介绍这三大框架的使用感受双向绑定开篇就用这三大框架的双向绑定的实现作为一个 demo 引入，通过这三大框架的双向绑定能够简单的了解三大框架在编码上的一些区别以及其的简易程度，从下面的代码简洁程度来讲，vue.js 给我们带来的体验还是不错的Angul...

前端摆渡人

75974人浏览 · 2019-04-16 17:07:49

前端摆渡人 · 2019-04-16 17:07:49 发布

讲到前端的框架，大家想必都能脱口而出：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（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

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

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^