Vue (二) 基础API
v-bind 指令描述:用于动态地将数据绑定到 HTML 元素的属性上,当数据发生变化时,其对应的属性值也会自动更新变化 语法:v-bind:attrName="expression" or :attrName="expression" attrName 为要绑定的属性名,expression 为要绑定的数据,它可以是任意的 Vue 表达式 1. 动态绑定元素属性组合式API选项式API1234567891011121314151617181920<!-- src/App.vue --><template> <a :href="url" :title="title">{{ title }}</a> <!-- disabled 如果为 true, 则启用该属性, 反之则移除该属性 --> <input type="text" :disabled="disab ...
Vue (一) 项目创建与基本概念
Vue 是一个渐进式现代 JavaScript 框架,用于构建用户界面( UI )。它的目标是通过尽可能简单的 Api 实现响应式数据绑定和组合的视图集合( 组件 ) Vue 的核心只关注视图层,如果需要其它高级功能可以逐步引入( 如 路由、状态管理 等 ) Vue 起源于开源项目,由前 Google 员工尤雨溪开发并维护,它在开源社区中极具人气,尤其在亚洲地区广泛流行 MVVM 架构MVVM 是一种软件架构模式,它将应用程序分成三层:模型(Model)、视图(View)、视图模型(ViewModel) Vue.js 参照了 MVVM 架构的思想设计 模型(Model) 代表应用程序的数据和业务逻辑 它是应用的核心部分,包含了所有的数据处理、验证以及对数据的操作 视图(View) 代表应用程序的用户界面( UI )。它呈现模型中的数据给用户,并通过用户交互反馈数据的变化 在 Web前端中,通常由 HTML、CSS 组成,用于表示界面的结构和样式 视图模型(ViewModel) 连接模型( Model )和视图( View )。它是一个中间层,负责处理视图和模型之间的双 ...
Node.js 安装使用与CommanJS模块化
Node.js 是基于谷歌 V8( 一种JavaScript 引擎 )构建的一种 JavaScript 运行环境,由 Ryan Dahl 开发 Node.js 使 JavaScript 脱离了浏览器,可以实现服务器开发的一种 JavaScript 运行环境 Node.js 的安装官方地址:https://nodejs.org/zh-cn/ 安装完成后,输入 node -v 命令检测是否安装成功 12$ node -v #显示node版本号v17.6.0 通常 nodejs 安装时会自动安装 npm(node package manager)。输入 npm -v 检查 npm 是否安装 12$ npm -v #显示npm版本号8.5.1 Node.js 版本管理推荐下面这款工具来管理 Node.js 的版本 fnm: https://github.com/Schniz/fnm(推荐!!) 特点: 基于 Rust、快速、简单、垮平台 fnm 的使用: 123456789101112131415161718192021222324252627282930313233343536 ...
JavaScript ES6教程(上)
ES6 是 ECMAScript 的第 6 个版本。它与 2015 年 6 月正式发布,正式名称为 ECMAScript 2015,通常 ES6 泛指 ECMAScript 2015 及其后续的版本 ECMAScript 是一种由 ECMA 国际(前身为欧洲计算机制造商协会,英文:European Computer ManufacturersAssociation)通过 ECMA-262 标准化的脚本程序设计语言,它定义了该脚本语言的各种元素、结构、语法、运算符等等。而 JavaScript 则是该标准的具体实现 let 关键字let 允许你声明一个作用域被限制在块( {} )中的变量。与 var 关键字不同的是,let 声明的变量不会在作用域中被提升 let 声明与 var 声明的区别: 特点 var 声明 let 声明 变量提升 Yes No 作用域 函数级作用域 块级作用域 重复声明 Yes No 全局对象 Yes No 变量提升: 123/* 无变量提升 */console.log(age); //报错:ReferenceEr ...
JavaScript (十一) 垃圾回收与闭包
内存管理(Memory Management)内存管理是指程序运行时的所需内存的管理。在编程语言中内存管理是在高级抽象层次上进行的,通常由编程语言的运行时环境或虚拟机来处理。它隐藏了底层计算机系统的细节,使开发人员能够更方便地分配和释放内存,而不需要考虑底层硬件和操作系统的具体实现 在编程语言中内存管理对于避免内存泄漏和提高程序性能至关重要。如果程序无法正确地管理内存,可能会导致内存泄漏、内存溢出和代码错误等问题 内存生命周期内存生命周期是指程序运行时为其分配的内存从创建到最终释放所经历的过程,不管什么编程语言,内存生命周期基本是一致的,它可分为以下阶段: 分配内存(allocate memory):在程序中为变量、对象或某种数据结构分配内存空间 使用内存(use memory):将数据写入已分配的内存空间,并读取存储在其中的数据( 内存的读和写 ) 释放内存(free up memory):不再需要此处内存时,将其返回/归还给操作系统以便其他程序使用 JavaScript 中的内存管理1. 内存分配JavaScript 在定义变量(对象,字符串等)时自动进行了分配内存( all ...
JavaScript (十) 正则表达式
正则表达式(Regular Expression) 由具有特定规则的字符组合而成(规则字符串),用来描述一系列符合该规则的字符串的筛选逻辑 RegExp 对象RegExp 对象是 js 的内置对象,用于将文本与一个模式匹配 1.使用 正则表达式字面量 来创建一个RegExp类型对象 语法: 1var reg = /模式/选项 2.使用 构造函数 来创建一个RegExp类型对象 语法: 1var reg = new RegExp(模式, 选项) 属性: global 判断是否设置了 “g” 选项(true / false) ignoreCase 判断是否设置了 “i” 选项(true / false) multiline 判断是否设置了 “m” 选项(true / false) dotAll 判断是否设置了 “s” 选项(true / false) lastIndex 用于规定下次匹配的起始位置(索引),该属性的值需要正则表达式设置了 g 选项才有效,否则该值一直为 0 source 返回正则表达式模式(一个字符串) flags 返回正则表达式选项(一个字符串) 方法: exe ...
JavaScript (九) 异常处理与严格模式
Error 对象当代码运行时发生错误,会立刻中止当前 JavaScript 的执行,同时会创建新的 Error 对象,并将其抛出( throw ) 错误类型: SyntaxError 语法错误,当 JavaScript 引擎在解析代码时,如果遇到不符合语法规范的 tokens 或 token顺序时,就会抛出 SyntaxError 例: 123console.log([) //SyntaxError: Unexpected token ')'var = 1; //SyntaxError: Unexpected token '='{ //SyntaxError: Unexpected end of input ReferenceError 引用错误,当一个不存在的变量被引用时发生的错误 例: 12345//访问未声明的变量console.log(author); //ReferenceError: b is not defined//给函数调用表达式赋值function fun(){}fun() = 123; //R ...
JavaScript (八) 内置对象
内置对象( native object )是 ECMAScript 标准中定义的对象(标准内置对象)。内置对象独立与浏览器在任何 ECMAScript实现 中都可以使用 继承链 内置构造函数( 类 ) 描述 __proto__(原型) Object 类型 Js中所有的对象都是Object类型的实例,它们都会从Object.prototype继承属性和方法(如:toString()) Function.prototype Function 类型 Js中所有的函数都是Function类型的实例,它们都会从Function.prototype继承属性和方法(如:apply()、call()等) Function.prototype Array 类型 Js中所有的数组都是Array类型的实例,它们都会从Array.prototype继承属性和方法(如:length、push()、concat()等) Function.prototype 对象的创建创建一个Array类型的对象(即创建一个数组) 1234/* 语法 */var 数组名 = new Array(元素1,元素2 ...
JavaScript (七) 面向对象
JavaScript 支持面向对象的编程范式,面向对象是一种对现实世界理解和抽象的方法 所谓对象通常是指客观世界中的真实存在的事物,实物,实象。例如:一支笔、一本书、一只鸟 面向对象编程的三大特征: 封装:只关心入口和出口,而不关心过程 继承:指类与类之间的关系。如果两个类都有相同的属性或方法,那么可以让一个类继承于另类,这样就不需要在前者再次定义同样的属性或方法 多态:不同的对象可以定义具有相同名称的方法,方法是作用于所在的对象中。这种不同对象通过相同方法的调用实现各自行为的能力,被称之为多态 构造函数构造函数又可称为对象模版或类型对象,通过构造函数我们可以创建特定类型的对象( 实例 ) 构造函数和普通函数的定义方式是一样的,通常为了区分,构造函数的名称首字母要求大写 语法: 123function 名称([形参1, 形参2...形参N]){ //constructor body} 创建实例语法: 1var 对象名 = new 构造函数([实参1, 实参2...实参N]) 例: 1234567891011121314/* 定义类 */function Pe ...
JavaScript (六) 函数
一个函数是可以通过外部代码调用的一个“子程序”。函数中可以封装一系列语句,在需要时直接调用该函数。在定义函数时可以将值传递至函数,同时在调用函数时也可以返回一个值 创建与调用函数1、使用 函数表达式 来创建一个函数 语法: 123456/* 创建函数 */var 变量名 = function 函数名(形参1, 形参2...形参N){ //函数体}/* 调用函数 */变量名(实参1, 实参2...实参N); 例: 1234567/* 创建函数 */var fun = function(a, b){ console.log(a+b)}console.log(fun.name) // fun/* 调用函数 */fun(4, 3) 2、使用 函数声明语句 来创建一个函数 语法: 123456/* 创建函数 */function 函数名(形参1, 形参2...形参N){ //函数体}/* 调用函数 */函数名(实参1, 实参2...实参N); 例: 12345678/* 创建函数 */function fun(arg) ...