app.js

var http = require("http");
var fs = require('fs');
var url = require('url'); http.createServer(function(request, response) {
// 解析请求,包括文件名
var pathname = url.parse(request.url).pathname;
// 输出请求的文件名
console.log("Request for " + pathname + " received.");
// 从文件系统中读取请求的文件内容
fs.readFile(pathname.substr(), function(err, data) {
if (err) {
console.log(err);
// HTTP 状态码: 404 : NOT FOUND
// Content Type: text/plain
response.writeHead(, { 'Content-Type': 'text/html' });
} else {
// HTTP 状态码: 200 : OK
// Content Type: text/plain
response.writeHead(, { 'Content-Type': 'text/html' }); // 响应文件内容
response.write(data.toString());
}
// 发送响应数据
response.end(); });
}).listen(); console.log('Server running at http://127.0.0.1:8888/index.html');

index.html

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<!--这是我们的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message" />
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!',
yes: true,
no: false,
age: ,
name: 'keepfooljack' } // 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script> </html>

node day2 vue read html的更多相关文章

  1. 使用Node,Vue和ElasticSearch构建实时搜索引擎

    (译者注:相关阅读:node.js,vue.js,Elasticsearch) 介绍 Elasticsearch是一个分布式的RESTful搜索和分析引擎,能够解决越来越多的用例. Elasticse ...

  2. Node.js/Vue环境搭配安装

    http://blog.sina.com.cn/s/blog_497ff1a70102x0sw.html 第一次接触Node.js,想创建自己的服务就须配置好Node.js环境 安装Node.js 下 ...

  3. 用node+webpack+vue新建vue项目步骤

    1. 安装node,命令行输入node-v命令查看是否安装成功. 2. 安装vue:npm install vue-cli -g(全局安装). 3. 在想要创建vue项目的目录下,按住shift+右键 ...

  4. node,npm,vue的全局升级

    pc环境:windows 10, OS:win32, Arch:x64 1.升级node.js到最新 ⑴.别人成功的方法: . 第一步 npm -g install n //此处可以加上 --forc ...

  5. Vue笔记:使用node开发vue入门实例

    安装NPM 首先在命令终端输入 npm -v 检测是否安装 npm.如果没有,按照下面教程进行安装. 下载地址: nodejs中文网 到官网下载自己系统对应的版本,这里我们下载Windows系统的64 ...

  6. node与vue结合的前后端分离跨域问题

    第一点:node作为服务端提供数据接口,vue使用axios访问接口, 安装axios npm install axios --save 安装完成后在main.js中增加一下配置: import ax ...

  7. Linux下Jenkins与GitHub自动构建Node项目(Vue)

    根据上篇文章<Linux下Jenkins与GitHub自动构建NetCore与部署>,我们知道了Jenkins的强大功能,自动构建,部署了一个NetCore的Web,让开发人员专注于开发, ...

  8. node+mysql+vue+express项目搭建

    第一步:项目搭建之前首先需要安装node环境和MySQL数据库. 在已经完成上述的条件下开始进行以下操作: npm install @vue/cli -g   (-g 代表全局安装) 初始化项目  v ...

  9. wangeditor富编辑器在node和vue前后台分离的使用

    本来是想用百度的ueditor编辑器来达到想要的功能的,但在使用中,感觉前后台分离上,需要引入的东西过多,不轻量:然后就去尝试用wangeditor(这个名字听着感觉有点太随意的感觉....但功能上还 ...

随机推荐

  1. event.target.dataset

    dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量. 1.event.target.d ...

  2. QThread使用——关于run和movetoThread的区别

    QThread 使用探讨 2010-10-23 00:30 注意:本文停止更新,请优先考虑 Qt 线程基础(QThread.QtConcurrent等) dbzhang800 2011.06.18 Q ...

  3. 09.vue中样式-style

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 基本设置_common_setting

    comment(备注) ID(请勿修改) Param(参数) 说明与格式 积分物品ID设置 1 60000 积分属性虚拟货币,存储在Auth库account表TokenAmount字段. 这里设置积分 ...

  5. maven eclipse配置 创建项目

    下载maven jar 可以去官网http://maven.apache.org/ 或者我的百度云http://download.csdn.net/detail/taopeng_100/9894787 ...

  6. 脚本可执行,但无HTML测试报告文件生成,其造成的原因是在PyCharm的执行模式错误

    定义测试报告两种写法: 1)测试报告直接在本地绝对路径下生成 # 导入HTMLTestRunner模块 import HTMLTestRunner # 通过open()方法以二进制写模式('wb')打 ...

  7. SWUST OJ(960)

    双向链表的操作问题 /*双向链表的操作问题*/ #include <stdio.h> #include <stdlib.h> typedef struct DLNode { i ...

  8. 从Excel、CSV文件获取数据

    #region 从Excel获取数据 /// <summary> /// 从Excel获取数据 /// </summary> /// <param name=" ...

  9. html5(一)

    HTML5 三个基本特色:结构.样式.功能. <!DOCTYPE html ><html lang="en"><head> <meta c ...

  10. 使用MongoDB数据库(2)(三十六)

    快速开始使用Spring-data-mongodb 若MongoDB的安装配置采用默认端口,那么在自动配置的情况下,我们不需要做任何参数配置,就能马上连接上本地的MongoDB.下面直接使用sprin ...