代码片段
null
编辑于 2019-10-25 09:46
累计访问:84

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>

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>
分享代码片段
© 著作权归作者所有
ES6 教程 JSON解析格式化 JS在线运行 JAVA8新特性教程 jsfiddle中国国内版本 屏幕坏点检测工具 subline官方下载 JS在线运行编译 PHP在线运行编译 Java在线运行编译 C语言在线运行编译 Bash在线运行编译 C++在线运行编译 Ruby在线运行编译 Lua在线运行编译 Python在线运行编译 Go语言在线运行编译 Groovy在线运行编译 Dart在线运行编译
JSRUN前端笔记， 是针对前端工程师开放的一个笔记分享平台，是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 （极客专用语法）， 这里属于IT工程师。