明仕msyz555react vue angular这些前端库我能不做单页APP吗?

比如我要在现成的效力器页面中运用一些盛行的前端库,比如就像jquery一样,我也不想什么搞一套前端构建情况什么的,直接在页面或js中修正就OK了。

哪个可以呢?我看到react要翻译jsx,唉。

我就想页面中部分模块需求JS渲染的直接改下,不做spa,不搞什么种种前端构建,直接JQ一样玩

这些框架或库本身就不是为SPA设计的,路由只是它们的一部分服从而已。

Vue最复杂,在每个页面引入Vue的源文件,然后就可以直接运用了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
</head>
<body>

<div id="app">{{val}}</div>

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
  new Vue{
    el: #app,
    data: {
      val: 0
    }
  };
</script>
</body>
</html>

然后看angular,异样引入源代码,可以直接运用

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Angular</title>
</head>
<body>
<div ng-controller="MainCtrl">
  {{a}}
</div>

<script src="./node_modules/angular/angular.min.js"></script>
<script>
  angular.moduleapp, []
    .controllerMainCtrl, function$scope {
      $scope.a = aaa;
    };
</script>
</body>
</html>

Angular2就别想了,太重,估计你也不肯意折腾,并且不运用构建东西你是无法享用编写TS兴味的。

至于React,也是可以直接运用的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React</title>
</head>
<body>
<div id="app"></div>

<script src="./node_modules/react/dist/react.min.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.min.js"></script>
<script>
  var App = React.createClass{
    render: function {
      return React.createElementh1, null, App;
    }
  };

  ReactDOM.render
    React.createElementApp, null, null,
    document.getElementByIdapp
  
</script>
</body>
</html>

不过不用JSX语法,你会发明代码太难维护了,假如你又不想构建东西的话,那只能做及时编译了,不过不发起用在消费情况,太耗功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React</title>
</head>
<body>
<div id="app"></div>

<script src="./node_modules/react/dist/react.min.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<script type="text/babel">
  var App = React.createClass{
    render: function {
      return <h1>App</h1>;
    }
  };

  ReactDOM.render
    <App/>,
    document.getElementByIdapp
  
</script>
</body>
</html>

(看完/读完)这篇文章有何感想! 明仕msyz555的分享…

发表评论

姓名 *
电子邮件 *
站点