2019年06月_肖ZE

原创事件监听兼容写法——EventUtil

// EventUtil const EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { //DOM2级 element....

2019-06-21 16:08:54 304

原创 vue——vue-i18n

vue 项目中如何实现国际化 vue-i18n安装npm install vue-i18n引入import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识 //this.$i18n.locale //...

2019-06-13 21:28:22 4830

原创 vue——init

创建项目vue create myItem安装依赖cnpm i vuex vue-router axios -Scnpm i node-sass sass-loader -D配置router.jsimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)let router = ...

2019-06-12 17:35:04 1172

原创 angular——ionic

ionic安装cnpm i -g cordova ionic创建项目# 空白栏ionic start myApp blank# 底部切换（适合手机 app）ionic start myApp tabs# 侧边栏（适合 pc 端）ionic start myApp sidemenu运行项目ionic serve文件目录e2e：端对端测试文件node...

2019-06-09 22:22:24 2187

原创 angular——自定义模块配置路由模块懒加载

自定义模块当项目比较小的时候可以不用自定义模块，但是当项目非常庞大的时候，可以使用自定义模块来组织项目，并通过 angular 自定义模块实现路由的懒加载# 创建 user 模块ng g module modules/user# 创建 user 模块下的子组件ng g component modules/user/components/funng g component modul...

2019-06-09 16:34:15 1041 2

原创 angular——路由

app-routing.module.ts 中配置路由// 引入组件import { FunComponent } from './components/fun/fun.component'import { HomeComponent } from './components/home/home.component'// 配置路由const routes: Routes = [ ...

2019-06-09 12:01:26 246

原创 angular——数据交互（get、jsonp、post）

HttpClientModule 模块get 方法在 app.module.ts 中引入 HttpClientModule 模块并注入import { HttpClientModule } from '@angular/common/http'imports: [ HttpClientModule,],在用到的地方引入 HttpClient 并在构造函数声明impor...

2019-06-09 11:19:20 505

原创 angular——Rxjs 异步数据流编程

Rxjs 是一种针对异步数据流编程工具，或者叫响应式扩展编程，目的就是异步编程，常用的 Observable 和 fromEventcallback 和 promise 异步获取数据 name: any = 'bob' getData () { // Callback 异步获取数据 function callback (cb) { setTimeout(...

2019-06-09 09:48:10 677

原创 angular——生命周期函数

生命周期函数作用ngOnChanges()Angular（重新）设置数据绑定输入属性时的响应。该方法接收 SimpleChanges 当前和先前属性值的对象。ngOnInit() 在一个或多个数据绑定输入属性发生更改之前和之后调用。主要用在父子组件传值时ngOnInit()在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。在第一次...

2019-06-09 08:19:52 7849 2

原创 angular——父子组件通信

父传子 @input父组件不仅可以给子组件传递简单的数据，还可以把自己的方法以及整个父组件传给子组件子组件获取父组件的 msg 数据父组件调用子组件的时候传入数据<app-son [msg]="msg"></app-son>子组件引入 Input 模块import { Component, OnInit, Input } from '@angular/...

2019-06-08 22:15:49 6443

原创 angular——ViewChild

ViewChild获取 DOM 节点模板中给 DOM 节点起个名字 <div #domName> 我是一个 DOM 节点 </div>业务逻辑组件内引入 ViewChild import { Component, OnInit, ViewChild } from '@angular/core'在类里面获取 DOM 节点 @ViewC...

2019-06-08 21:06:27 673

原创 vue——导航守卫

导航就是我们说的路由，当路由发生变化的时候，我们想要做的事情，这就是导航守卫的重点。路由改变的函数我们写到项目的哪个位置，代码写哪个地方，这个就是官网上说的（全局守卫，路由独享的守卫，组件内的守卫），下面一一介绍：（一）全局守卫：用来监测所有的路由，代码写在路由页面(router.js)方法有：router.beforeEach((to, from) => { // ......

2019-06-07 11:28:56 1686

原创 angular——公共服务

公共服务创建公共服务# 在 services 目录下创建 storage 服务ng g service services/stroage配置服务在 app.module.ts 下// 引入配置服务import { StorageService } from './services/storage.service'providers: [ StorageService...

2019-06-06 09:46:48 565 1

原创 angular——数据操作及管道

// 数据绑定<div [title]='title'> {{content}}</div>// 解析绑定 html 标签content: string = '<h1>我是 html</h1>'<div [innerHtml]='content'></div>// 循环遍历数组<div *ngFor...

2019-06-05 09:47:23 1165

原创 angular——脚手架初始项目及部分目录讲解

安装脚手架cnpm i -g @angular/cli# 检查版本ng v创建项目ng new angular-app# 如果要跳过 npm i 安装ng new angular-app --skip-install打开项目ng serve --open

2019-06-04 22:40:43 996

原创 typescritp——修饰器

修饰器：修饰器是一种特殊类型的声明，它能够被附加到类声明、方法、属性或参数上，可以修改类的行为通俗讲修饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能常见的修饰器有：类修饰器、属性修饰器、方法修饰器、参数修饰器修饰器写法：普通修饰器（无法传参）、修饰器工厂（可传参）类修饰器类修饰器在类声明之前被声明（紧靠着类声明）类修饰器应用于类构造函数，可以用来...

2019-06-04 13:58:58 445

原创 typescritp——模块、命名空间

db.tsexport function getDB (): void { console.log('获取数据库的数据')}export let save = (): void => {console.log('保存数据成功')}let obj = { name: 'bob', age: 18,}// 当然这种，default 命名的暴露也行，一个模块只能默认暴...

2019-06-03 22:01:08 648

原创 typescript——模拟数据库操作

功能：定义一个操作数据库的库，支持 Mysql MongoDb Mssql要求：Mysql、Mssql 与 MongoDb 功能一样，都有 add、update、delete、get 方法注意：约束统一的规范，以及代码复用解决方法：需要约束规范所以要定义接口，需要代码复用所以用到泛型接口：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范泛型：通俗理解泛型就是解决类、接...

2019-06-03 21:31:25 1938

原创 typescript——泛型

软件工程中，不仅要创建一致的定义良好的 API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能在像 C# 和 Java 这类语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据通俗理解就是未来解决：类、方法、接口的复用性，以及对不特定数据类型的支持泛型定义可以支持不特定的数据类型，要求：传入...

2019-06-02 13:50:05 138

原创 typescript——接口

属性接口：对 json 的约束function printLabel (json: { label: string }): void { console.log(json)}printLabel({ label: '' })上面的方式传 json 太繁琐假如对批量方法传入参数进行约束interface FullName { firstName: string secon...

2019-06-02 09:20:58 142

原创 typescript——静态属性/方法多态抽象类

静态属性/方法class Person { name: string static desc = 'static' // 静态属性 constructor (name: string) { this.name = name } run (): void { console.log(`${this.name} is running`) } stat...

2019-06-01 16:24:17 666

原创 typescript——类的定义继承修饰符

类的定义class Person { name: string // 属性 constructor (n: string) { // 构造函数实例化类时候触发的方法 this.name = n } run (): void { // 方法 console.log((this.name)) }}let p = new Person('bob')p....

2019-06-01 15:09:51 174

肖的博客