javascript - react vue angular这些前端库我能不做单页APP吗？-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - react vue angular这些前端库我能不做单页APP吗？

黄舟 2017-04-10 17:39:19

[JavaScript讨论组]

588

比如我要在现成的服务器页面中使用一些流行的前端库，比如就像jquery一样，我也不想什么搞一套前端构建环境什么的，直接在页面或js中修改就OK了。

哪个可以呢？我看到react要翻译jsx，唉。

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

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(1)

PHPz2017-04-10 17:41:19 1楼

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

Vue最简单，在每个页面引入Vue的源文件，然后就可以直接使用了

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

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

<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>
<p ng-controller="MainCtrl">
  {{a}}
</p>

<script src="./node_modules/angular/angular.min.js"></script>
<script>
  angular.module('app', [])
    .controller('MainCtrl', 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>
<p id="app"></p>

<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.createElement('h1', null, 'App');
    }
  });

  ReactDOM.render(
    React.createElement(App, null, null),
    document.getElementById('app')
  )
</script>
</body>
</html>

不过不用JSX语法，你会发现代码太难维护了，如果你又不想构建工具的话，那只能做实时编译了，不过不建议用在生产环境，太耗性能

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

<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.getElementById('app')
  )
</script>
</body>
</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>