蜕.-CSDN博客

一、变量、常量、命名规则变量：几乎和JavaScript差不多，其中var可以自动推断类型var str = "123";print(str);常量：主要有final和const区别：const值不变且一开始就得赋值；final可以开始不赋值，但是只能赋值一次。而final不仅有const的编译时常量的特性，最重要的是它是运行时常量。并且final是惰性初始化，即在运行时第一次使用前才初始化。// final常量简单来说就是用方法赋予常量时用final final a =

2021-04-26 23:39:12 115

原创 TypeScript进阶

一、面向对象一个事物到了程序中就变成一个对象我们想干什么就先找到它的对象，再用对象去完成对应的工作所有对象都被分成了两个部分，数据（属性）和功能（方法）二、类直接定义的属性是实例属性，需要通过对象的实例去访问const per = new Person();per.name使用static开头的属性是静态属性（类属性），可以直接通过类去访问Person.agereadonly开头的属性表示一个只读的属性（无法修改）static readonly age: numbe

2021-03-14 23:03:33 112

原创 webpack配置

webpack基本配置webpack中的所有配置信息都应该写在module.exports中const path = require('path');// 引入HTML插件const HTMLWebpackPlugin = require('html-webpack-plugin');// 引入clean插件用于清除dist目录const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {

2021-03-14 01:22:32 234

原创 TypeScript编译（tsconfig.json）

一、自动编译（-w）// 自动编译只限于当前文件 tsc 01_app.ts -w// 不适合日常的开发let a = 'app';创建tsconfig.json配置文件可以直接使用tsc进行全局编译。加上-w就是自动编译二、tsconfig.json"include" 用来指定哪些ts文件需要被编译（主要）** 表示任意目录* 表示任意文件"include": [ "./src/**/*"]"exclude" 指不需要被编译的文件目录（一般不用自己设置）默

2021-03-10 21:10:18 509

原创 TypeScript基本类型

一、number | string | booleanTS的Number | String | Boolean和JS的差不多// 声明一个变量A，指定为number类型let a: number;// 只能为数字，否则ts报错但是开始可以编译成jsa = 10;// a = 'a'// 声明完变量就直接进行赋值（用的不多）let c: boolean = false;ts => js 可以编译成任何版本的js，默认编译版本为ES3作用：确保代码有最好的兼容性，在不同的浏览器

2021-03-10 01:32:08 168

原创 vue可复用性&组合

官方文档：https://cn.vuejs.org/v2/guide/mixins.html一、混入（mixin）基础混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hell.

2021-03-03 00:29:13 235

原创 Vuex基础

官方文档：https://vuex.vuejs.org/zh/guide/一、开始最简单的 Storeimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }})在组件中使.

2021-03-01 22:56:01 170

原创 vue路由进阶

官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html一、导航守卫（类似中间件）全局前置守卫（还有很多钩子函数，具体可看文档）你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // to: Route: 即将要进入的目标路由.

2021-02-27 23:10:58 148

原创 vue路由基础

https://router.vuejs.org/zh/guide/#html一、基础HTML<div id="app"> <h1>Hello App!</h1> <p>   <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --.

2021-02-26 15:58:23 174

原创 vue-cli

一、介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 实现的交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形化的创建和管理

2021-02-23 22:20:40 85

原创 vue动态组件&异步组件

https://cn.vuejs.org/v2/guide/components-dynamic-async.html一、在动态组件上使用 keep-alive重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。<keep-alive> <componen.

2021-02-23 16:16:11 130

原创 21/3/10-vue插槽

https://cn.vuejs.org/v2/guide/components-slots.html一、插槽概述在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute注意： v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。跟 v-on 和 v-bin.

2021-02-23 00:08:20 116

原创 vue组件

一、组件基础为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：注意：每个组件必须只有一个根元素二、父传子（props）<div id="app"> <ul>   <school school-name="清华"></school&

2021-02-21 23:12:43 83

原创 vue生命周期

https://cn.vuejs.org/v2/guide/instance.html一、生命周期钩子每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期钩子的 this 上下文指向调用它的 Vue 实例注意：不要在选项 property 或回调上使用箭头函数，比如 created: ().

2021-02-20 17:49:36 100

原创 vue过渡&动画

一、概述Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js二、过渡的类名v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效

2021-02-20 16:40:36 273

原创 vue表单输入绑定（v-model）

https://cn.vuejs.org/v2/guide/forms.html一、基础用法v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用 value property 和 input 事件；checkbox 和 radio 使用 checked property 和 change 事件；select 字段将 value 作为 prop 并将 change 作为事件。<div id="app">.

2021-02-19 17:57:08 324

原创 vue事件处理

https://cn.vuejs.org/v2/guide/events.html一、监听事件<div id="app"> <h1>点击次数：{{count}}</h1> <button type="button" @click="count+=1">点击1</button> <button type="button" @click="clickE">点击2</button></div><.

2021-02-18 23:41:22 92

原创 vue初识

企业提高开发效率的发展历程原生JS->jquery之类的库->前端模板引擎->Vue.js/Angular.js/React.js（能够帮助我们减少不必要的DOM模板——虚拟DOM；提高渲染效率）框架和库的区别框架：框架是一套完整的解决方案对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。但是优点也很明显，其功能完善，提供了一整套的解决方案库（插件）只是提供某一个小功能对项目入侵性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求Vue和

2021-02-18 16:45:41 159 1

原创面试笔记（七）

1. 面试题（一）var name = 111var a = { name: 222, say: function(){ console.log(this.name) }}var fun = a.sayfun() // 111a.say() // 222var b = { name: 333, say: function(fun) { fun() //相当于fun.call(window, ...) }}b.say(a.say) // 111b.say = a.sa

2021-02-13 23:32:27 160 2

原创面试笔记（六）

1. Vue2.0/3.0双向数据绑定的实现原理https://developer.mozilla.org/zhcn/docs/web/javascript/reference/global_objects/object/definepropertyES5：Object.definePropertyES6：Proxy<body> 姓名：<span id="spanName"></span><br> <input type="text"

2021-02-10 00:38:47 141

空空如也

空空如也