lick_dog_-CSDN博客

angular路由官网地址我们的框架一般是通过cli构建的如果不是那么就单独引入路由模块官网有教程下面我们说路由的使用引入AppRoutingModule把 AppRoutingModule 导入 AppModule 并把它添加到 imports 数组中。Angular CLI 会为你执行这一步骤。但是，如果要手动创建应用或使用现存的非 CLI 应用，请验证导入和配置是否正确。下面是使用 --routing 标志生成的默认 AppModule。import { AppRoutingModul

2022-01-23 17:55:17 546

原创 angular服务，操作DOM，组件传值，周期

angular服务里面可以写公共的方法当每个组价想要使用的时候都可以去调用(有点感觉像vue中的vuex)创建服务代码式创建ng g service services/服务名，创建好之后进入引入并配置如下图使用服务第一种(官网不推荐这种)// 引入storage服务import { StorageService } from '../../services/storage.service'let storage = new StorageService();//因为StorageSe

2022-01-19 23:11:35 781

原创 Angular_基础

Angular_基础创建组件ng g //当输入ng g时会提示我们需要创建的内容ng g component components/news //此时会创建组件并会在src、app文件下面生成 components文件夹和news组件并自动生成相应的代码如果我们通过上述命令行进行创建的组件系统会自动会给我们在app.module.ts中引入该组件否则我们就得自己引入，引入之后才能正常使用引入组件箭头所指的地方就是组件名，我们只需像下面那样写我们就可以在其它组件中使用其它组价了

2022-01-09 13:03:42 530

原创 Ts_泛型

Ts_泛型/** 当我们不确定类型时我们可以像下面那样写，但是这样肯定是不符合我们规范的，因为any会关闭ts的检测功能，这样也不能体现出我们该返回和参数到底是什么类型* 所以此时情况下泛型就出来了* */function fun(a:any):any { return a;}/** 使用泛型的情况下,这里N就是泛型但是不是非得是N我们可以是其它的就像变量一样* */function fun2<N>(a:N):N { return a;}//方式一直接

2022-01-02 23:42:17 853

原创 Ts_封装

Ts_封装对象就是属性和方法的容器，主要就是存储属性和方法的默认情况下我们可以对对象中的属性进行任意的修改，所以ts为了确保数据的安全性，就添加了权限设置只读属性(readonly) 属性无法更改的ts的三种属性修饰符public 公共属性（默认值）,可以在类中、子类中、对象中进行修改protected 受保护属性可以在类和子类中进行修改private 私有属性只能在本类中修改使用其余地方都不可以 /* * public 公共属性（默认值）,可以在类中、子类中、对象

2021-12-29 17:18:17 613

原创 Ts_接口

接口(interface)接口中所有属性和方法是没有实值的只是定义了其结构，也就是所有方法都是抽象方法接口就类似于抽象类，接口主要负责定义一个类的结构，接口也可以限制对象的结构和type一样，我们可以让一个类去实现接口，下面我们依次介绍下。与type类似作用(检查对象类型)/** interface是接口的标志* 接口用来定义一个类的结构* *//** type 和 interface感觉是差不多的，但是也有些区别* 因为type不能重复定义interface是可以重复定义的并且定义之后会

2021-12-29 14:40:37 560

原创抽象类抽象方法

抽象类抽象方法抽象类和抽象方法的使用关键字就是abstract 抽象类和抽象方法都是前面加上abstract抽象方法只能在抽象类里面使用如果继承了抽象类必须要写当前类里面的方法抽象方法是没有函数体的/** 抽象类前面要加上abstract 此时该类就只能被继承不能用作创建实例，用作创建实例就会报错** *///此时下面这个就为抽象类abstract class Animal { name:string; age:number; constructor(nam

2021-12-28 17:32:22 86

原创 Ts编译选项

Ts编译选项Ts文件不多的情况下我们可以手动编译如果要自动监听然后自动编译该ts文件后面加个-w就行了tsc xxx.ts -w//此时只能监视当前这个ts文件

2021-12-27 16:03:16 296

原创 Ts的类型和类型声明

Ts的类型和类型声明Ts的类型声明先声明变量再赋值let a : boolean ;a = false;声明的同时进行赋值let b : number = 2;这算是第二种的简写因为声明和赋值同时进行的话 ts会自动为我们进行声明let c = false;// c = 1;//此时也会报错函数的参数声明和返回值类型声明//js中的函数是不会考虑参数的数量和类型的function fun(num1:number,string1:string):string {//最后一个

2021-12-16 15:33:24 1766

原创 Typescript 开发环境安装

Typescript 开发环境安装下载node.js下载地址下载长期维护版，这是稳定版本如果已安装Node可以使用命令行 where node查找node的安装路径使用命令行全局安装typescriptnpm i -g typescriptnode_global是我专门放全局安装的东西的文件看ts是否安装成功在命令行输入tsc因为ts是不能直接被浏览器解析的所以要转换为js才能让浏览器解析哦ts的转换tsc ts文件名转换为js后我们引入html中就可以直接在浏览器f12中查

2021-12-13 18:21:31 523

原创伪元素伪类

伪元素伪类伪类(????伪类用于定义元素的特殊状态。语法selector:pseudo-class { property: value;}实例/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:hover { color: #FF00FF;}/* 已选择的链接 */a:active { color: #0000FF

2021-12-13 12:27:16 276

原创浅谈vue-router的两种模式

浅谈vue-router的两种模式hash模式history模式 //可以自己实验看差别 <button id="rotte" onclick="changeUrl()"> hash模式1 </button> <button onclick="changeUrl2()"> hash模式2 </button> <button onclick="changeUrl3()"&

2021-12-12 14:23:34 450

原创 es6 7 8 9 10特性归纳

es6 7 8 9 10特性归纳(网上一大堆我是借鉴别人的和自己的一些理解)ES6Let 与 Const’类模块化箭头函数函数参数默认值模板字符串解构赋值延展操作符对象属性简写promise迭代器生成器Let 和 Constlet和const实现了块级作用域的概念，在用var生命变量时变量会提升且赋值undefined，但是let和const不会提升变量所以不能在定义前使用，所以就形成了暂时性死区。{var a = 10;}console.log(a);---

2021-12-11 22:10:33 607

原创浅谈 promise

浅谈 promisePromise 对象代表一个异步操作状态pending 准备状态fulfilled 操作成功 resolvedrejected 操作失败特点promise是单一状态，一旦状态确定就不会在发生改变只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，只有两种可能从pending => resolved 或者 pending => rejected是链式调用.then.then的方式这样就避免出现回调地狱了，但是如果链式过多也会不

2021-12-11 15:57:51 405

原创 js中的module模块化

js中的module模块化模块可以把多个功能隔离成独立的文件，减少代码的耦合度模块可以开放部分功能供外部使用模块通过导入导出的形式，使代码看着更规整导出let title = "导出主题";function show(){ console.log("我是导出的方法"+`这是我的${title}`);};export {title,show};导入<html lang="en"><head> <meta charset="UTF-8"

2021-12-11 11:55:55 574

原创 vue的teleport

vue的teleport关于官网的介绍官网解释例子：子组件圆的css样式此时页面效果在父组件中（因为home这个div设置absolute所以组件中的圆是以home这个div作为参考，但是我们想要这个圆以body为父级元素进行参考，此时我们就可以使用teleport）改造子组件，添加teleport,to代表以谁为父级改造之后的效果此时圆浮动就是以body为父级进行参考的与vue components一起使用官网例子在同一目标上使用多个teleport<telep

2021-12-07 13:26:19 283

原创 vue 自定义指令

vue 自定义指令全局注册const app = Vue.createApp({})// 注册一个全局自定义指令 `v-focus`app.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… mounted(el) { // Focus the element el.focus() }})局部注册 data(){ return {} }, directives:{ focus: {

2021-12-06 22:52:42 119

原创 vue组件之间的传值归纳

vue组件之间的传值归纳prop和$emit使用方法组件嵌套过深的时候，使用provide和inject使用方法ref 也可以直接获取父组件或子组件的数据在组件或者html标签上我么都能使用ref在html标签上使用ref在组件上使用ref此时可以直接访问到组件中的data属性action,组件中的方法也是能够访问到的在子组件中我们也能访问到父组件的方法和属性直接通过this.$parent.属性或者方法名就能访问到父组件注意当 ref 与 v-for 一起使用

2021-12-06 14:53:56 177

原创 vue provid/inject

vue provid/inject当组件嵌套不深我们可以使用prop和$emit进行传递我们需要的值，但是一旦组件嵌套过深，再这样一层一层通过组件间传值获取数据就比较麻烦，此时我们就需要通过provide / inject来进行传值父组件中跟data一样可以是对象模式也可以是函数模式子组件中处理响应式例子...

2021-12-06 11:59:47 309

原创 vue slot(插槽)

vue slot(插槽)渲染作用域规则：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。父级组件此时这种情况下，action不会去访问组件里面的action只会去访问父级里面的备用内容(默认内容)当父级里面没写东西，这个插槽就会默认显默认内容具名插槽组件内<div class="container"> <header> <slot name="header"></slot> &l

2021-12-06 11:01:32 108

原创 vue中的prop

vue中的prop1、一般情况接受prop里面数据是以数组的形式进行接受props: ['title', 'likes', 'isPublished', 'commentIds', 'author']2、我们可以传递静态或者动态的数据到prop里面，且传递的数据可以有很多类型vue官方例子3、props验证 props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型

2021-12-05 11:58:20 659

原创 vue组件的基础父子组件的传值

vue组件的基础父子组件的传值在我们vue项目目录中有个components文件在里面我们是专门注册组件的创建组件创建组件就跟我们创建一个vue文件一样的，它也有单独的data,methods,周期等，创建组件有全局创建和局部创建，但是我们几乎都只会用局部创建很少会用到全局创建，全局创建在打包时不管你用没用到都给你一起打包，局部我们创建过后了除自身不会使用，其余想在那使用就在那引入就行。使用组件父子组件之间的传值通过props实现父组件向子组件传值**父组件中**子组件中传递

2021-12-04 23:18:07 307

原创 vue v-if v-show v-for 数组

vue v-if v-showv-if 通过创建和销毁DOM来显示或者隐藏DOM元素v-if可以和v-else-if和v-else一起搭配使用v-if可以直接作用在template标签上<template> <div class="home"> <template v-if="false">//此时该template下面的内容都是不可见的 <h1>hahah</h1> &l

2021-12-04 09:42:45 3452 1

空空如也

空空如也