Lee达森的博客

9.5.1　Vue.js指令prevent修饰符在Vue.js指令中使用prevent修饰符可以阻止控件元素的默认行为，相当于调用了event.preventDefault()方法。例如，表单的提交（Submit）行为和超链接元素的跳转行为，就是该控件元素的默认事件行为。在Vue.js指令中使用修饰符，需要在指令?称之后用英文句号（.）来连接，类似于引用对象属性的方式。例如，针对表单的提交（ Submit ） 行 为 使 用 prevent 修 饰 符 ， 就 要 写 成 （ v-on...

9.4.1　Vue.js指令接收参数针对Vue.js框架中的一些指令，可以通过接收一个“参数”来绑定一些功能，这个接收的参数需要在指令?称之后用冒号（:）来连接。例如，在前面的【代码9-10】中用到过绑定元素id属性，就是通过v-bind指令用冒号（:）连接id属性描述符（v-bind:id）来实现的。下面介绍一个通过v-bind指令接收href参数，绑定超链接元素的地址属性的代码实例。【 代 码 9-12 】 （ 详 见 源 代 码 vuederectives 目 录 中 的vue...

9.3.1　Vue指令概述Vue.js框架设计了一个复杂且完整的“指令”系统，用于实现较为复杂的动态页面渲染功能。在Vue.js框架下，一般的指令（ Directives ） 都 是 指 带 有 前 缀 （ “v-” ） 的 特 殊 属 性（Attribute）。Vue指令的功能是，当表达式的值（一般对应property属性）发生改变时，将其产生的连带变化“响应式”地作用于D?M，从而完成页面的渲染操作。关于Vue指令的具体形式，请参考下面的简单示例：上面代码示例中的v-if就是一个Vue指

本节介绍Vue.js框架模板语法中插值的内容，并讲解如何通过插值实现数据绑定的功能。9.2.1　文本插值在Vue.js框架中，进行数据绑定最常见的方式就是使用遵循Mustache语法的“双大括号（?? ??）”形式的文本插值。下面看一个最简单的、使用文本插值的代码实例。【 代 码 9-1 】 （ 详 见 源 代 码 vuetemplate 目 录 中 的vuetemplate.html文件）【代码说明】第01～15行代码中，通过元素定义了一个层（id="id-di?-tem?l-t...

Vue.js数据“同步更新”的功能很实用，页面渲染效果也很惊艳。不过，我们不总是需要全部数据都保持同步更新，那么该如何操作呢？Vue.js框架为数据对象定义了“冻结”方法，可以实现阻止property属性同步更新的功能。这个方法就是由?bject对象所提供的freeze()方法，通过在一个对象上使用freeze()方法，就会阻止修改现有的property属性，也就意味着Vue.js框架的视图响应系统无法追踪property属性的变化。下面通过一个具体的代码实例进行详细介绍。（1）在页面中定义

在Vue.js应用中，每个Vue实例在被创建（new Vue()）时，都要经过一系列的初始化过程，例如：设置数据监听、编译模板、将实例挂载到D?M上，以及在数据变化时更新D?M等。一般地，在前端应用框架中将这个过程称为应用的“生命周期”。同时，在Vue应用的“生命周期”过程中，会根据进程演化的不同阶段定义一组相关过程方法（回调函数的形式）。前端框架会将这组过程方法称为“生命周期的钩子函数”，所谓“钩子函数”就是给用户提供了在这些回调函数中添?自定义代码的机会。因此，这些“生命周期的钩子函数”

8.2.1　观察属性方法Vue.js框架设计了一个$watch方法，用于“观察”Vue实例上的属性是否发生变化。这里的属性变化，具体可以是一个属性表达式的变化，也可以是稍微复杂的一个函数计算结果的变化。如果$watch方法观察到了变化，就会通过一个回调函数得到两个参数，分别表示变化后的新值和变化前的旧值。下面是关于$watch方法的基本语法格式：关于这个$watch方法如何实现“观察”Vue实例上的属性变化，我们还是通过具体的代码实例进行讲解。请看下面这个“观察”计数器变化的代码。【

8.1.1　Vue.js数据同步对于Vue.js框架编程而言，当创建一个新的Vue实例对象时，其会将数据（data）对象中的所有的property属性?入到Vue.js框架的响应式系统当中去。该操作带来的最直接效果就是，当这些property属性值发生改变时，视图（View）将会随之发生“响应”——也就是同时更新为新匹配的属性值。以上关于Vue.js数据的描述听起来会感觉比较晦涩，下面我们通过具体实例进行解释。（1）在页面中定义一个层（）元素，用于显示Vue组件定义的对象，代码如下...

MySQL作为一种?型的关系型数据库在互联网中被大量使用。本节将使用mys?l模块进行MySQL数据库的连接。.3.1　MySQL介绍MySQL数据库由瑞?MySQL AB公司开发，目前属于?racle公司。MySQL采用双授权模式，分为商业版和社区版。MySQL数据库凭借其体积小、速度快、总成本低等特点被广泛应用在Web开发中。经?的开源软件架构LAMP中的M便是指MySQL。MySQL的官方网站是http://www.mysql.com/。读者可以在社区版下载网址https://dev.m

目前，MongoDB是非关系型数据库中功能最丰富、最像关系型数据库的产品。MongoDB由10gen团队在2007年发起，2009年2月首度推出。MongoDB支持的数据结构类似于json的bson格式。这种数据结构非常松散，可以很方便地存储比较复杂的数据类型。MongoDB的主要特点是高性能、易存储、易使用、易部署。MongoDB的最小数据单位是文档（类似于关系型数据库中的行）。文档是由多个键及其对应的值组成的（类似于json），一组文档共同组成了一个集合。集合类似于关系型数据库中的表，但是

为了使用Node.js创建UDP服务器，首先要调用require('dgram')加载dgram模块。调用dgram模块中的createSocket()方法来创建一个UDP服务器。这个方法接收一个必需参数和一个可选参数，必需参数是一个表示UDP协议的类型，可指定为udp4或者udp6，代码如下：这个方法中的可选参数为一个回调函数，是UDP服务器接收数据时触发的回调函数，可接收两个参数，一个为接收到的数据，另一个为存放发送者信息的对象，代码如下：rinfo对象的属性及属性值如下：addre

在本系列教程之前已经提到HTTP服务器。只需要使用以下代码就可以创建一个简单的HTTP服务器。【代码6-13】通过这段代码可以在浏览器中看到创建的服务器发送给浏览器的数据。在第4章中已经说明了http模块的主要应用，这里不再讲解，将重点放在HTTP服务器优化上。上面这个HTTP服务器只是实现了将一行字符串的数据发送给浏览器。很明显，如果服务器仅仅能发送一些字符串，那几乎是不可用的，因此需要对上面这个服务器的功能进行拓展。通过文件模块读取文件并发送给浏览器就是一个不错的选择，将上面的代码修改为

为了使用Node.js创建TCP客户端，首先要调用require('net')来加载net模块。创建一个TCP客户端只需要创建一个连接TCP客户端的socket对象即可：创建一个socket对象的时候可以传入一个json对象。这个对象有以下属性：fd：指定一个?在的文件描述符，默认值为null。readable：是否允许在这个socket上读，默认值为false。writeable：是否允许在这个socket上写，默认值为false。allowHalfOpen：该属性为false时，TCP服

OSI参考模型将网络通信功能划分为7层，即物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。TCP协议就是位于传输层的协议。Node.js在创建一个TCP服务器的时候使用的是net（网络）模块。使用Node.js创建TCP服务器为了使用Node.js创建TCP服务器，首先要调用require('net')来加载net模块，然后调用net模块的createServer方法就可以轻松地创建一个TCP服务器。net.createServer([options][,connectionLis

Node.js使用流（Stream）的方式来处理文件。这种处理方式和处理网络数据几乎是一样的，操作起来非常方便。使用流的方式操作一般会有一个问题，即无法在文件的指定位置进行读写。但是Node.js进行了更底层的操作，除了可以在文件的尾部写入，也可以在文件的特定位置写入数据。Node.js中有丰富的API支持对文件的各种操作，包括获取文件信息、创建和删除文件、打开和关闭文件、读写数据。在本节中将会介绍文件的一些基本操作，下一节会针对具体格式的文件操作进行讲解。在处理文件之前都需要调用Node.

为了使用Node.js进行文件操作，首先要调用require('fs')来?载文件系统模块。异步方法的最后一个参数总是一个完整的回调函数（callback函数）。传递给回调函数的参数一般取决于这个方法本身，但是第一个参数永远是异常（err）。如果方法执行成功，第一个参数将会是null或者undefined。当使用同步方法来执行时，任何异常都会立刻引发。我们可以使用try或者catch来处理异常并将错误信息显示出来。下面给出一个异步方法的例子，其中tmp文件夹下有一个hello文件。【代码5

util模块是一个工具模块，提供的主要方法有：util.ins?ect()：返回一个对象反序列化形成的字符串。util.format()：返回一个使用占位符格式化的字符串，类似于C语言的?rintf。可以使用的占位符有%s、%d、%j。util.log()：在控制?输出，类似于console.log()，但这个方法带有时间戳。下面通过代码说明这些方法的调用方式。【代码4-15】上面这段代码已经将对象反序列化为一个字符串。之所以说这个方法在调试的时候非常有用，是因为我们还可以让控制台输出字符串

Node.js的核心模块主要有http、fs、url、querystring模块。下面分别对这几个模块进行分析。fs模块将在第5章详细介绍。http模块在第2章的例子中使用过，本节将详细分析其方法和原理。4.3.1　http模块——创建HTTP服务器、客户端使用http模块只需要在文件中通过require('http')引入即可。http模块是Node.js原生模块中最为亮眼的模块。传统的HTPP服务器会由Apache、Nginx、IIS之类的软件来担任，但是Node.js并不需要。Node.

Node.js中的模块可以分为原生模块和文件模块。在Node.js中可以通过re?uire方法导入模块、exports方法导出模块。 4.2.1　re?uire导入模块对于原生模块（如http），只需要使用re?uire('http')导入这个模块并将其赋值给一个变量，即可使用这个模块导出的属性、方法（即函数）。【代码4-1】 对于文件模块，可以使用“./”前缀来指代当前路径，从而使用相对路径来?载模块。?载模块时，可以省略.js扩展?。例如，在同级的文件夹node中有一个?为myModule

NPM默认与Node.js一起安装，可以在命令行中输入npm，验证NPM是否安装，如图4.1所示。1．npm –v、npm version通过输入“npm -v”命令或者“npm –version”命令可以查看NPM的安装版本（v6.14.5），如图4.2所示。图?.2　NPM查看版本结果2．npm init通过“npm init”命令可以生成一个package.json文件。这个文件是整个项目的描述文件。通过这个文件可以清楚地知道项目的包依赖关系、版本、作者等信息。每个NPM包都有自己的p

利用好Node.js提供的console控制台和debug可以有效地辅助开发和定位bug。在Node.js中，console代表控制台，可以通过console对象的各种方法向控制台进行标准输出。注意：在面向对象程序设计中，把类中定义的操作或功能称为方法（Method）。本书在没有特别说明以及不会造成混淆时也把方法称为函数，如果交替使用，则都是指一个意思。3.3.1　console对象下的各种函数在REPL交互式运行环境中输入console，可以看到console对象下各种函数组成的一个数组，

与其他语言相比，JavaScript总是显得相对灵活，对代码的格式要求也显得相对宽松，因此对JavaScript编码制定一定的规范是非常重要的。一个良好的规范不仅能让阅读代码的人感到清晰愉悦，还能让整个项目更?容易维护。3.2.1　命名规范JavaScript作为一种弱类型的语言，命?的规范显得更?重要，因为开发人员并不能直接看出这个变量的作用。1．var关键字在JavaScript中，所有的变量都应该通过var关键字来声明，而不是缺少var关键字，因为缺少var的变量声明会使得这个变量成

JavaScript是一门解释型、弱类型的脚本语言，也是Web开发最重要的语言之一。JavaScript由ECMAScript、D?M（文档对象模型）、B?M（浏览器对象模型）三部分组成。ECMAScript规定了JavaScript的语法核心，这也是本节重点介绍的内容。3.1.1　变量1．交互式运行环境——REPLNode.js提供了一个交互式运行环境——REPL。在这个交互式环境中可以运行简单的应用程序。在控制台直接输入node即可进入这个环境，此时控制台会显示一个提示符“>”，表明我们

目前，有多种开发工具可以支持Node.js应用的开发，比如：jetBrains WebStorm、Eclipse、Visual Studio Code等。这些开发工具原则上是“条条大路通罗马”，相互间各有优势、并无优劣之分。在本书中，我们选择Visual Studio Code开发工具，之所以选择该工具也是为了配合后面关于Vue.js的内容。接下来，通过Visual Studio Code打开刚刚创建的Node应用目录（vueprojects），效果如图1.30所示。如图1.30中的方形区域标识

在前文中，我们介绍了如何通过Visual Studio Code开发工具测试运行单个js脚本文件的Node程序。不过，这种开发方式在近年来已经被一种全新的、以自动化方式构建Web前端应用的方式所取代了。所谓“自动化”方式，其实就是通过一种或几种自动化工具来构建Web前端应用的开发框架。这类开发框架基本都是通过一种或几种工具自动生成的，生成后的框架会包含大部分Web前端应用所需的基本类库、第三方插件和支撑配置文件，等等。可以说，这种全新的开发方式将Web前端应用开发提升到了一个全新的高度，并且符

Visual Studio Code（简称VS Code）可谓是近年来风头日盛的代码开发和管理工具，该工具由微软（Microsoft）公司负责开发维护，并在2015年4月30日的Build开发者大会上第一次正式对外发布。Visual Studio Code的设计目标是一款能够满足跨平台运行的、轻量级的、可扩展的开发工具，主要用于编写当前流行的Web应用和云服务应用的源代码编辑器。虽然VS Code同样是隶属于Visual Studio系列开发平台，但与诸如Visual Studio 2015、V

在Node命令行开发环境中，可以直接运行js脚本文件。方法也很简单，通过node命令指定js文件?即可，具体如下：接下来，我们将前一小节中测试的两段js脚本代码整合到同一个js脚本文件中，代码如下：【代码1-1】（详见源代码commandline目录中的commandline.js文件）【代码说明】在上面的代码中，将前一小节中测试的两端js脚本代码写在了一个js脚本文件中，然后通过node命令行工具运行该js脚本文件，如图1.16所示。 如图1.16中的标识所示，通过node命令行运行j

在Node.js开发包安装完毕后，首先要测试Node的开发环境，以验证Node是否安装成功。测试方法很简单，在控制台命令行窗口通过输入以下node命令即可。这里选择Node.js自带的控制台命令行工具（Node.js commandprompt）进行测试，效果如图1.12所示。如图1.12中的箭头和标识所示，通过输入“node -v”命令查询到了当前系统安装了v10.16.3版本，表明Node开发环境已经安装成功了。前文中介绍了node自带的包管理工具NPM，下面再验证一下NPM工具是否也安装

Node.js可以在多个版本的Windows系统平台（Windows 7、Windows 10以及Windows Server系列等）下稳定运行，本书主要介绍在Windows 10系统下Node.js开发环境的安装部署过程。在Windows 10系统中进行Node.js环境部署相对比较简单。首先，从Node.js的官方网站（https://nodejs.org/en/download/）上下载新的Node安装包。如果下载网速较慢，国内用户还可以通过Node.js官方中文站点（http://nod