- 博客(33)
- 收藏
- 关注
RSS订阅原创 animate.css使用教程
1.基本用法，使用link引入<head><link rel="stylesheet" herf="animate.min.css"></head>给你想添加动画效果的元素添加一个 animated 类（必需）。如果需要动画循环运动，你还需要给这个元素追加 infinite 类，又或者自己另外定义一个类似于 infinite 的类。添加效果可...
2019-12-24 17:40:39
1808
原创 Vue里面的权限验证
//权限校验import router from './router'//需要本地安装routerimport {getUserInfo} from './api/login'//通过router路由前置钩子函数beforeEach(),//在跳转路由前进行拦截，如果已经登录则进行路由跳转，如果没有则进入登录页面router.beforeEach((to,from,next)=>...
2019-12-08 17:28:30
306
原创 axios引入Vue里面配置的方式
首先下载axios，局部安装 npm install --save-dev axios在src目录下面创建文件夹，写入request.js文件便于管理和引用，request内的文件配置import axios from "axios"//手动创建一个axios对象const request = axios.create({ baseURL: process.env.VUE_A...
2019-12-04 13:14:08
344
原创 Vue的proxy配置踩坑笔记
本想着就是个配置文件，看看基本就可以实现代码了，唉…，搞了一下午，太轻敌了，最后的最后，发现不要在target网址值里面不要加引号，如果加上引号，就会把本机的api和服务器的api相连作为网址进行访问，找不到答案啊！期待以后找到答案再来记录先记录一下这次实现的代码吧！创建vue.config.js，同package.json同级，会被自动加载module.exports = { ...
2019-12-04 12:44:22
2679
3
原创 elementUi里面的input设置问题解决笔记
1、input不能设置高度，方法一、取消了style里面的scoped，找到input的class，进行设置，可以解决问题，但是容易造成全局的样式污染方法二、在选择器前面加上 /deep/ 深度选择解析注：1、一定要找对input的所在类名，按F12在控制台内查看类名。 2、/deep/深度选择器用于将全局的组件或者类的样式转换为局部的类从而达到在scoped内部添加样...
2019-12-02 15:30:56
2710
原创 p标签不能设置margin: 100px auto;
margin 是给块容器用的,只能让标准流的盒子居中对齐，如果想让p标签内的文本内容居中需要使用text-align, text-align是给文本图片用的p无效是因为p的宽度和父级div宽度一样 效果看不出来了...
2019-12-02 11:43:18
1655
原创 vs code编辑器，中英文转换
首先打开vs code编辑器1.在附件调试器内收索插件“chinnese”点击安装。2.ctrl+shift+p 弹出搜索栏，输入config3.选择configure Display Language4.选择zh-cn ，点击重启。...
2019-10-31 16:05:55
363
原创 git拉取方式
如果想通过git拉取的方式把资源下载到项目内方法如下1.点击git页面需要下载列表右上角的“clone or download”.2.点击复制3.在项目内打开git，克隆地址...
2019-10-16 15:49:05
200
原创 命令行指令笔记
1.常用dos命令cd 打开文件夹 md 创建新文件夹dir 查看文件夹位置 cd..返回上一级文件夹cls 清屏 可以通过上下键找到以前的历史命令npm root -g 查看全局安装的位置本地安装失败 则执行npm init -f-f表示不去回答里面各种参数的配置尽量采用全局安装 -g2.vue-cli2...
2019-10-13 16:29:40
87
原创 状态字段
1.touched和untouched 判断用户是否访问过一个字段，也就是这个字段是否获取过焦点，如果一个字段获取过焦点，那么这个字段的touched就是true，untouched是false,反之。 来控制错误信息是否显示。关注是否获取过焦点当表单的valid是true（表单校验通过）获取未获取焦点的时候，隐藏 <div [hidden]="!formModel.get('us...
2019-10-10 16:56:23
229
原创 响应式表单案例，以及FormBuilder的使用
新建一个子项目，在html内写入<form [formGroup]="formModel" (ngSubmit)="onSubmit(formModel.value)"> <div>用户名:<input type="text" formControlName="username" > </div> <div>手机号:<...
2019-10-10 12:06:32
557
原创 响应式表单笔记
简介数据模型：数据模型是指一个用来保存表单数据的数据结构，简称模型。由定义在angularForm模块中的3个类组成，3个类分别是FormControl,FormGroup,FormArrayFormControl:保存着与其关联的html元素当前的值以及元素的检验状态，还有元素是否被修改过等信息FormGroup：既可以代表表单的一部分也可以代表整个表单，它是多个FormContro...
2019-10-09 17:44:46
106
原创 angular的表单简介以及模板式表单的应用实例
angular表单API模板式表单：表单的数据模型是通过组件模板的相关指令来定义的，因为使用这种方式定义表单的数据模型时，我们会受限于html的语法，所以，模板驱动方式只适合用于一些简单的场景响应式表单： 使用响应式表单时，你通过编辑写typeScript代码而不是html代码来创建一个底层的数据模型，在这个模型定义好以后，你使用一些特定的指令，将模板上的html元素与底层的数据模型连接在一起...
2019-10-09 15:24:50
184
原创 投影相关笔记
投影 动态改变组件模板的内容ng-content标记投影点 使用此指令可以将父组件上任意片段投影到子组件上在这个插值表达式中只能使用父组件的属性，不能使用子组件的属性使用ng-content可以定义多个html的投影点 ，而innerHTML只能插一段1.在子组件child.component.html内写入<div class="wrapper"> <h4&...
2019-10-08 15:27:53
116
原创 AfterViewInit和AfterViewChecked钩子的实现和注意事项
AfterViewInit和AfterViewChecked这两个钩子是在组件模板所有的内容都被组装完成以后，组件的模板已经呈现给用户看了，这个动作完成以后，这两个方法才会被调用。AfterViewInit方法会被先调用，AfterViewChecked方法会被后调用注意点一只有子组件视图的初始化和变更检测完毕后，父组件视图才开始初始化和变更检测，这也说明想要父组件视图想要完全组装好，...
2019-10-08 14:18:56
3459
原创 ViewChild装饰器,父组件调用子组件方法的实现方法
父组件需要调用子组件的方法，在父组件的模板里面调用子组件的API可以使用ViewChild装饰器方法一、使用viewChild装饰器让父组件调用子组件的方法1.在项目内创建一个子组件child.component. ng g component child//在child.compnent.ts内写一个greeting方法 greeting(name: string) { ...
2019-10-08 12:50:52
233
原创 ngOnChanges的简单举例概述
1、在子组件child.component.ts上面的更改export class ChildComponent implements OnInit, OnChanges { @Input() greeting: string; @Input() user: {name: string}; message: string = "初始化消息"; constructor(...
2019-09-16 17:05:57
3473
原创 生命周期钩子的调用顺序以及变更检测机制
1、调用顺序首先是构造函数constructorngOnChanges - 当一个父组件修改或初始化一个子组件输入属性的时候被调用，如果一个组件没有输入属性，那么这个方法永远不会被调用，首次调用一定发生在ngOnInit之前，此方法会被多次调用，每一次输入属性变化后都会被调用。ngOnInit - 如果组件存在输入属性，则在第一次 ngOnChanges 后调用，用来初始化组件或指令n...
2019-09-16 15:26:41
155
原创 组件的生命周期
组件的生命周期:在一个组件的生命周期中会发生各种各样的事件，从组件被创建开始，angular的变更检查机制就会开始监控组件。组件被创建后，会被添加到DOM树上，并且使用浏览器渲染出来让用户看到。在这之后，组件的属性可能发生变化，这会导致组件会被重新渲染，最后组件会被销毁。1、组件初始化ngOnChanges ngOnInit ngDoCheck ngAfterContentIni...
2019-09-16 15:24:59
136
1
原创 中间人模式
写在输出属性后，了解中介人模式，部分地方进行修改在这里order和priceQuote是两个兄弟组件，父组件是app.component1、在priceQuote.component.html上添加一点击事件 <!--绑定事件传递出event数据--> <input type="button" value="立即购买" (click)="buyStock($ev...
2019-09-16 13:19:39
158
原创 @Output输出属性，在组件间传递数据的实例
输出属性：使用输出属性，向组件外发射事件并通过事件携带数据，这个事件只能由父组件通过事件绑定的方式来捕获并处理1、ng new demo2、ng g component priceQuote3、在priceQuote.component.ts内书写代码import {Component, EventEmitter, OnInit, Output} from '@angular/...
2019-09-15 17:39:05
804
原创 第四章笔记
第四章 依赖注入 ng g service ... 生成到文件夹里的写法 ng g service/product 依赖注入、控制反转 依赖注入的好处 1、可重用性 @NgModule({ 在angular中指定providers声明那些对象需要依赖注入，而providers是一个数组，每一个元素是一个provide...
2019-09-15 14:28:32
110
原创 @Input输入属性，实现数据父子组件绑定的案例
ng new demong g componemt order1、首先需改order组件的order.component.ts2、修改order.component.html<div>我是子组件</div><div>我要买{{hue}}个颜色的{{dior}}口红</div>3、修改app.component.ts...
2019-09-15 14:27:29
371
原创 Can't bind to 'ngModel' since it isn't a known property of 'input'.解决办法
当在input标签上进行双向数据绑定[(ngModel)]的时候出现Can't bind to 'ngModel' since it isn't a known property of 'input'.在app.module.ts内添加FormsModule
2019-09-15 14:13:21
2073
原创 angular里面的依赖注入简单案例
使用angularCLI命令行创建项目 创建组件 ng g component product1 创建服务放在shared的文件夹下面 ng g service shared/product 在shared/product.component.ts内进行操作 export class ProductService { constructor() { } // 2.声明一个方法返回...
2019-09-11 15:37:31
145
原创 CanActivate、CanDeactivate和Resolve用法
路由守卫 1.只有当用户已经登录并拥有某些权限时才能进入某些路由 2.一个由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航下一个路由 3.当用户执行保持操作而试图离开当前导航时提醒用户 1.CanActivate:处理导航到某路由的情况这里的例子是当满足某种情况才允许进入路由在这里新创建一个目录，里面...
2019-09-09 17:38:47
1597
原创 angular子路由children
在html中的设置<div class="product"> <p> 这里是商品信息组件 </p> <a>{{productId}}</a><br> <!--这个位置一定是'./',这样才能找到子路由,而'/'则找到的是跟路由--> <a routerLink='./'>...
2019-09-09 15:03:58
1242
原创 routerOutLet的name属性--辅助路由
辅助路由特点：在一个页面上可以定义多个插座 1、 除需要中模板上面声明一个<router-outlet>的主插座以外，还需要声明一个带name属性的插座 <router-outlet name="text'></router-outlet > 2、在路由配置里面配置名叫‘aux’这个插座上可以显示那些组件， 例： {path: 'x...
2019-09-09 14:34:47
1299
原创 路由重定向
#重定向路由 ：在用户访问一个特定的地址时，将其重定向到另一个指定的地址 // 路由重定向：下面的代码意思是：当访问一个空字符串的路径时，给重定向到home路由上 {path: '', redirectTo: '/home', pathMatch: 'full'},...
2019-09-09 13:59:22
3631
原创 使用angular中router导航
1.Routes ： 路由配置，保存着那个URL对应展示哪个组件，以及在哪个RouterOutlet中展示组件配置路由：使用angularCLI命令行生成route新项目 ng new route在创建的任务中找到app文件夹，app.routing.module.ts即为路由配置文件在const routes: Routes = []模块中写入组件和路径例： 生成一个ho...
2019-09-09 13:54:15
169
原创 angularCLI创建项目以及项目环境的搭建、文件的配置
安装angularCLI首先要下载node.js并安装，下载请到官网，直接点击下一步下一步...就可以安装成功！node -v //查看node.js安装是否成功npm -v //查看npm版本安装angularCLI命令行$npm install -g @angular/cli //安装angularCLI命令行，$ng version //查看安装是否成功安装成...
2019-09-04 17:53:23
294
原创 input设置width时，引起圆角出现bug
input设置width时，引起圆角出现bug由于input标签内设置了placeholder，字体出现是紧紧贴着边缘，想着设置一下padding-left来调试一下，结果圆角出现了bug,发现width不能设置成%的形式；...
2019-08-21 15:45:27
130
原创 HTML标签简写、连写、快速生成html页面！
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2019-07-29 15:04:22
1849
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人