随笔分类 - 前端专题
摘要：基本示例 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } sayHello() { console.log(t
阅读全文
摘要：数组解构 let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 console.log(second); // outputs 2 上面的写法等价于： first = input[0]; s
阅读全文
摘要：TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 基本示例 function printLabel(labelledObj: { label:
阅读全文
摘要：布尔值 let isDone: boolean = false; 数字 let amount: number = 6; 字符串 类型 模板字符串 支持换行 支持内嵌表达式 和 JavaScript 一样，可以使用双引号，也可以使用单引号，推荐单引号 let nickname: string = '张
阅读全文
摘要：变量声明 在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过 function 关键字，而在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class ，下面我们来讨论 var 、 let 和 const
阅读全文
摘要：搭建 TypeScript 开发环境 什么是 compiler？ less 编译器：less EcmaScript 6 编译器：babel TypeScript 编译器：typescript 一句话：把 TypeScript 转换为 JavaScript ，浏览器就具有运行了 在线测试编译环境 co
阅读全文
摘要：TypeScript 介绍 TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。 Typ
阅读全文
摘要：本章节主要为大家描述 Angular “概念模型”（ Mental Model ）的构建。我发现，很多开发者已经做过非常多的项目，但是当你跟他聊的时候，你很快就会发现他并没有掌握这门框架的精髓。打几个比方，当别人提到 Spring 的时候，你的大脑里面第一个想到一定是 DI、IOC、AOP 这些东西
阅读全文
摘要：启动流程示意图 目录结构 . ├── e2e 端到端测试（暂且不关心） ├── node_modules npm安装的第三方包 ├── src 存放业务源码 ├── .angular-cli.json AngularCLI脚手架工具配置文件 ├── .editorconfig 针对编辑器的代码风格约
阅读全文
摘要：执行命令: ng new my-app Angular CLI 将会自动帮你把目录结构创建好，并且会自动生成一些目录文件，就像这样： 请特别注意：Angular CLI 在自动生成好项目骨架之后，会立即自动使用 npm 来安装所依赖的 Node 模块，所以这里你懂的，一道墙又会阻止我们通往自由的道路
阅读全文
摘要：目前，无论你使用什么前端框架，都必然要使用到各种 NodeJS 工具，Angular 也不例外。与其它框架不同，Angular 从一开始就走的“全家桶”式的设计思路，因此 @angular/cli 这款工具里面集成了日常开发需要使用的所有 Node 模块，使用 @angular/cli 可以大幅度降
阅读全文
摘要：Angular 是什么？ Angular（读音['æŋgjʊlə]）是一套用于构建用户界面的 JavaScript 框架。由 Google 开发和维护，主要被用来开发单页面应用程序。 类似于 Vue.js MVVM（数据驱动视图思想） 组件化 模块化 指令 ...... 由 Google 开发和维护
阅读全文
摘要：自定义指令 内置指令不能满足我们特殊的需求 Vue允许我们自定义指令 Vue.directive 注册全局指令 <!-- 使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 --> <input type="text" v-focus>
阅读全文
摘要：表单基本操作 获取单选框中的值 通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gen
阅读全文
摘要：案例选项卡 1、 HTML 结构 <div id="app"> <div class="tab"> <!-- tab栏 --> <ul> <li class="active">apple</li> <li class="">orange</li> <li class="">lemon</li> </
阅读全文
摘要：v-if 使用场景 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间的切换 <div id="app"> <!-- 判断是否加载，如果为真，就加载，否则不加载--> <span v-if="flag"> 如果flag为true则显示,false不显示! </sp
阅读全文
摘要：v-on指令 用来绑定事件的 形式如：v-on:click 缩写为 @click; v-on事件函数中传入参数 <body> <div id="app"> <div>{{num}}</div> <div> <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 --> <
阅读全文
摘要：指令 什么是自定义属性 指令的本质就是自定义属性 指令的格式：以v-开始（比如：v-cloak） v-cloak指令用法 插值表达式存在的问题：“闪动” 如何解决该问题：使用v-cloak指令 解决该问题的原理：先隐藏，替换好值之后再显示最终的值 <style type="text/css"> /*
阅读全文
摘要：模板语法概述 前端渲染方式 原生js拼接字符串 使用前端模板引擎 使用vue特有的模板语法 原生js拼接字符串 基本上就是将数据以字符串的方式拼接到HTML标签中，前端代码风格大体上如图所示。 缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。 使用前端模板引擎 右侧
阅读全文
摘要：发布时间： 2014年2月，Vue.js正式发布 2015年10月27日，正式发布1.0.0 2016年4月27日，发布2.0的预览版本 Vue：渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 官网：https://cn.vuejs.org/v2/guid
阅读全文
