数据代理是指通过一个对象代理另一个对象中属性的(读/写)操作。 数据代理的原理 数据代理可以通过Object.defineProperty()实现。在Vue中,很多技术的实现都使用到了Object.defineProperty()这个方法。 Object.defineProperty()的用法如下所示: 1let person = { 2 name: '张三', 3 sex: '男', 4 // age: 18, 5} 6 7/** 8 * 使用 Object.defineProperty() 给对象添加属性 9 * 1. 参数1:要添加属性的对象 10 * 2. 参数2:要给对象添加的属性名称 11 * 3. 参数3:要添加的属性...
文本插值 数据绑定最常见的形式就是文本插值。 在HTML标签体中,使用两个花括号{{ }}将JS表达式引起来。文本插值含义是将JS表达式的结果作为文本显示到页面中;并不是指JS表达式的结果为文本。 插值表达式的语法如下: 1{{expression}} 其中,expression将作为JS表达式去解析并执行。示例如下: 1<div id="app"> 2 <h1>Hello, {{name}}<!-- 插值表达式 -->!</h1> 3</div> 4 5<script type="text/javascript"> 6 new Vue({ 7 el: '#app', 8 data: { 9 name: 'Vue.js' 10 }...
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 Vue中模板语法有以下两种类型: 插值语法:用{{}}包裹起来的表达式。 Vue插值语法中,可以指定JS表达式将数据与模板进行绑定。 与语句不同的是,插值表达式指可以生成值的语句,这个语句可以放在任何需要值的地方。也就是说插值表达式一定需要有值(或返回值)。表达式中的变量、方法都是在对应Vue实例的 data 中定义的。当data发生了改变,页面中对应的数据也会发生改变(动态)。 指令语法:以v-为开头的Vue指令。
指令是指在Vue模板中由Vue原型对象或用户自定义的、带有v-前缀的特殊HTML属性。指令可以用于解析标签(包括标签属性、标签内容、绑定事件等等)。 数据绑定 单向数据绑定 v-bind单向数据绑定:单向绑定是指数据只能从Vue实例中的data流向页面内容。 将v-bind:置于要使用表达式的HTML属性前,Vue会将其属性值解析为表达式。v-bind的语法规则如下: 1v-bind:attribute="expression" attribute:v-bind指令的参数,v-bind指令的参数是HTML属性。 expression:表达式中的对象和方法等均来自Vue实例。 例如: 1<div id="app"> 2 <a...
Vue.js 是一套构建用户界面的渐进式框架。Vue 只关注视图层,采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 在学习Vue之前需要了解HTML、CSS和JavaScript。 Vue的特点: 采用组件化模式,提高代码复用率、且让代码更好维护。 采用声明式编码,让编码人员无需直接操作DOM,提高开发效率。 使用传统JS操作DOM属于命令式编码。 使用虚拟DOM和优秀的Diff算法,尽量复用DOM节点。 Vue官网为:https://cn.vuejs.org/。 安装 Vue 安装Vue的方式有很多,可以在Vue2文档中查阅。 其中最简单的方式就是通过<script>标签...
TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括: 类型批注和编译时类型检查。 类型推断。 类型擦除。 接口。 枚举。 Mixin。 泛型编程。 名字空间。 元组。 Await。 安装 TypeScript 安装TypeScript: 1npm install -g typescript 安装完成后可以使用 tsc 命令来执行 TypeScript 的相关代码。查看 TypeScript 版本号: 1tsc -v...
跨域请求问题 跨域是指发送与当前服务的域名(或端口)不一致的请求。跨域问题的产生原因是浏览器不允许JS请求对域名不同或端口不同的服务发起请求(同源策略)。 演示跨域问题: 编辑一个html页面: 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script...
中间件(Middleware),特指业务流程的中间处理环节。 当一个请求到达Express的服务器之后,可以连续调用多个中间件,从而对这次请求进行预处理。 Express中间件的调用流程如下: Express的中间件,本质上就是一个处理函数。Express中间件的格式如下: 注:中间件函数的形参列表中,必须包含next函数。而路由的处理函数中只包含request(res)和response(res)。 利用中间件,可以实现后端中Filter(拦截器)或Interceptor(拦截器)等功能。 在中间件调用流程中,next()函数就是实现多个中间件连续调用的关键。next()表示将流转关系转交给下一个中间件或路由。 中间件的作用:通过...
路由的类型 在Express中,路由指的是客户端的请求与服务器处理函数之间的映射关系。Express中的路由分三部分组成: 1app.METHOD(PATH, HANDLER) METHOD:请求的类型。 PATH:请求的URL地址。 HANDLER:请求的处理(回调)函数。 路由的匹配过程 每当一个请求到达服务器之后,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。 在匹配时,Express会按照路由被定义的顺序进行匹配,如果请求的类型和请求的URL同时匹配成功,则Express会将这次请求,转 交给对应的函数进行处理。 关于路由的基本使用,已经在 Express 基础 中进行了介绍。 路由的模块化使用 为了方使...
Nodemon是一种监听项目文件变动,让项目文件在修改时可以自动重启项目的工具。使用Nodemon时,当代码被修改,Nodemon会自动帮我们重启项目,极大方便了开发和调试。 Nodemon项目地址:https:/www.npmjs.com/package/nodemon。 使用Nodemon时,一般是在全局进行安装: 1npm i nodemon -g 安装完Nodemon后,可以使用nodemon命令来启动项目,这样当项目文件被修改时,nodemon会自动完成项目的重启。例如: 1nodemon app.js