芋圆味糖罐-CSDN博客

原创 typeScript

TS的概念TypeScript是一种由微软开发的开源、跨平台的编程语言。它是js的超集，最终会被编译为js代码安装命令：npm install -g typescript检查版本：tsc -V基础类型语法：let 变量名:数据类型 = 值注意：在ts中一开始是什么类型，后期赋值的时候，不允许用其他类型的数据赋值给当前这个变量😉布尔类型let flag:boolean = trueconsole.log(flag); // true😉数字类型let a1: number = 10

2022-05-05 15:52:41 410 1

原创小程序页面跳转页面有几种方式

js实现navigateTo （有返回键，不可以跳转到tabBar页面）//保留当前页面，跳转到应用内的某个页面wx.navigateTo({ url: '/pages/detail/detail?id=1'})switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）wx.switchTab({ url: '/pages/detail/detail',})reLaunch (跳转任意页面，没有返回，有首页按钮）wx.reLa

2022-03-01 15:29:13 916

原创小程序生命周期函数

生命周期：是指小程序从创建到销毁的一系列过程小程序三种生命周期小程序应用的生命周期、页面生命周期、组件生命周期函数小程序应用的生命周期App({ onLaunch: function(options) { // 监听小程序初始化。小程序初始化完成时（全局只触发一次） }, onShow: function(options) { // 监听小程序显示。小程序启动，或从后台进入前台显示时 }, onHide: function() { // 监听小程序

2022-03-01 15:18:08 228

原创 vuex和本地存储的区别

区别vuex 存储在内存；localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。应用场景vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值永久性当刷新页面时vuex存储的值会丢失，localstorage不会

2022-02-27 18:43:46 903

原创 var、const、let的区别

是否存在变量提升var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefinedlet和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错console.log(f) //undefinedvar f = 1 ;console.log(g) //ReferenceError: g is not definedlet g = 2;console.log(h) //ReferenceError: g

2022-02-24 21:14:29 101

原创箭头函数与普通函数的区别

箭头函数是匿名函数，不能作为构造函数，不能使用new// 箭头函数let fun = () => { console.log('我是箭头函数');})// 普通函数function fun(){ console.log('我是普通函数');}箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：一种只包含一个表达式，连{ ... }和return都省略掉。还有一种可以包含多条语句，这时候就不能省略{ ... }和return不能作为构造函数，不能使用newlet fu

2022-02-24 20:18:53 139

原创添加进度条

给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress打开main.js，编写如下代码下载依赖cnpm i nprogress --save编写如下代码main.js//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'.....//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息axios.interceptors.request.u

2022-02-24 18:42:56 156

原创 cookie、localStorage、sessionStorage

cookieCookie设计初衷是用来和服务器通讯，而不是本地存储，他只是被‘借用’到本地存储特点存储太小，最大4kbhttp请求时需要发送到服务器，增加请求数据量只能用document.cokkie = “” 来修改，太过简陋localStorage和sessionStorage相同点最大可存 5MAPI简单易学，setItem、getItem、removeItem、clear不会随着http请求被发送出去不同点localStorage数据会永久存储，除非代码或手动删除

2022-02-24 16:17:57 319

原创 promise的使用及实现

概念promise是es6提出的一种异步编程的解决方案promise的实现（原理）：promise本质上是一个构造函数，它接收一个函数作为参数该函数接收两个参数分别是resolve和reject 他们也是函数promise有三个状态pending 初始状态fulfilled 成功状态rejected 失败状态promise 在实例的时候会产生一个状态 state 他的初始值是pending(进行中) 当我们调用了resolve函数后 promise的状态会立即从进行中的状态转化为

2022-02-23 20:07:15 305

原创 async、await

特点asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数异步async函数调用，跟普通函数的使用方式一样异步async函数返回一个promise对象async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的async/await的优点方便级联调用，即调用依次发生的场景；同步代码编写方式，更符合代码编写习惯；多个参数传递， Promise的then函数只能传递一个参数，async/await没有这个限制，可以定义块级变量传递数据

2022-02-23 20:01:52 232

原创 vue2与vue3的区别

1、双向数据绑定原理vue2 是结合发布者订阅者模式，结合es6Object.defineProperty()对数据进行劫持，进一步通过vue中的watcher的update实现双向数据绑定vue3 中使用了es6的proxy进行数据代理相对于vue2，使用proxy的优势：1.defineProperty只能监听某个属性，不能对全对象监听；2.可以监听到数组内部的变化；3.vue2中我们给对象添加一个新属性，它不会更新到视图上，只是因为新添加的属性并没有通过Object.defineProp

2022-02-22 19:19:39 294

原创 Vue3的组合api(composition-API)

vue2的api弊端在vue2中，我们编写组件的方式是 Options API<script>export default { // 定义数据 data() { return {}; }, // 声明周期钩子 created() {}, mounted() {}, // 定义方法 methods: {}, // 组件 components:{}, // 过滤器 filter: {},

2022-02-22 11:15:48 372

原创 Vue中的Mixin&extends的使用

官方定义MiXinMixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项项目中如何使用Mixin在src文件夹下创建一个mixins文件夹在demomixins.js文件下export default { data() { return { msg:'mixins 中的data'

2022-02-20 18:30:15 214

原创 vue3的vite脚手架+TS

安装vue3最新版本的vue-cli卸掉旧版npm uninstall vue-cli -g // oryarn global remove vue-cli安装新版本 @vue/clinpm install -g @vue/cli 或yarn global add @vue/cli//检查vue版本号vue -V搭建vue3最新脚手架有两种，分别是原先那种和vite脚手架原先vue create 项目名称// 与旧版本步骤一致可在安装时，选择配置项vite脚手架

2022-02-18 18:39:33 465

原创后台管理系统打包

把main.js文件删除建两个文件main-prod.js、main-dev.jsmain-pros.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import '@/assets/reset.css'import TreeTable from 'vue-table-with-tree-grid'Vue.component('

2022-02-17 15:10:45 591

原创 echarts的使用

echarts的地址下载cnpm i echarts@4.6.0 --S图表容器首先，在 HTML 中定义有宽度和高度的容器// 准备具有大小的容器<div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));</sc

2022-02-16 15:56:51 239

原创 slot插槽

插槽插槽分为匿名插槽，具名插槽，作用域插槽匿名插槽子组件内部，设置，就可以使用匿名插槽，数据将方式在插槽对应的位置，如果有多个匿名插槽，将会每个插槽都有一份数据渲染匿名插槽其实也是有名字的，为 default ，通常都是不写的// 组件（父） <Card> <p>hello,world</p> </Card>// 组件内部（子） <div class="cardItem"> <h1>子页

2022-02-16 15:10:32 365

原创富文本编辑器

下载依赖cnpm i vue-quill-editor --S在main.js中导入//导入vue-quill-editor（富文本编辑器）import VueQuillEditor from 'vue-quill-editor'//导入vue-quill-editor的样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'....

2022-02-14 19:02:04 180

原创 tree-table 树形表格

首先先下载cnpm i vue-table-with-tree-grid --S<!-- expand-type="false 有复选框

2022-02-10 15:08:48 1028 2

原创浏览器回流、重绘

1、什么是回流页面中元素的尺寸，布局，显示或隐藏等改变而需要重新构建页面，就会引起回流。2、什么是重绘页面中元素属性发生改变，而这些属性只是影响元素的外观，而不会影响布局的，比如background-color。则就叫称为重绘区别回流必将引起重绘，而重绘不一定会引起回流// 比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局改变时就需要回流// 添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距// 填充、边框、宽度和高度，内容改变...

2022-02-07 19:04:03 287

原创 vue3新语法

Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）作用: 聚合代码 & 逻辑重用1. 使用 reactive 绑定数据<template> <div> <h1>使用 reactive 绑定数据</h1> <p>{{state.msg}}</p> <p>{{info}}</p&gt.

2022-02-05 10:05:12 130

原创 vue2与vue3双向数据绑定的区别

新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()Vue2双向数据绑定存在的问题：关于对象Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的关于数组Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newV.

2022-02-05 10:05:03 350

原创 vue之filter

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })var app = new

2022-02-05 10:04:52 96

原创 vue中如何自定义指令directive

什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令//会实例化一个指令，但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"``v-xxx="'st

2022-01-30 15:47:04 148

原创 vue自定义指令的应用场景

使用场景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件1. 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus>2. 下拉

2022-01-30 15:46:14 134

原创 vue组件化开发

使用组件的好处组件是可以复用性的易于维护有封装性，易于使用大型项目中降低组件之间重复性父传子<template> <div> <my-child :parentMessage="parentMessage"></my-child> </div></template><script> import MyChild from '@c

2022-01-30 15:45:33 806

原创 vue-Router实现原理

前端路由概念通过改变 URL，在不重新请求页面的情况下，更新页面视图vue-Router两种模式Hash — 默认值，利用 URL 中的hash("#") history-- 利用URL中的路径（/home）如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})mode 区别mode:“hash” 多了 “#”http://localhost:8080/#/loginmode:

2022-01-30 15:45:12 63

原创 vue路由、路由传参

vue路由的基础用法1 .安装 npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld from '

2022-01-30 15:44:41 1121

原创 vue中的keep-alive

概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们和 transition 相似，keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素，也不会出现在父组件中原理在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性参数include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

2022-01-30 15:43:48 200

原创 v-for中为何要使用key

一、Key是什么有两种<ul> <li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />key的概念key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点1. 在写v-for的时

2022-01-30 15:43:20 682

原创 vue之prop

propprop大小写// 小写的prop 用来接收父传子接收的数据props:['msg']单项数据流单项数据流不允许修改在组件中修改 prop 传递过来的数据 Vue 会发出警告所以有两种常见的用法去修改 prop 传递过来的值本地data中定义属性，并将 prop 作为初始值data() { return { msg_data: this.msg }}使用computed 将prop 的值进行处理computed:{ msg

2022-01-30 15:42:34 751

原创 vue中的修饰符

一、事件修饰符.stop // 阻止事件继续传播.prevent // 阻止标签默认行为.capture // 使用事件捕获模式.self // 只当在 event.target 是当前元素自身时触发处理函数.once // 事件将只会触发一次.passive // 告诉浏览器你不想阻止事件的默认行为<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载

2022-01-30 15:42:07 140

原创 mvvm和mvc

mvvm概念MVVM 是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型model是我们应用中的数据模型View是我们的UI视图层ViewModel可以把我们Modle中的数据映射到View视图上在View层修改了一些数据，也会反应更新我们的Model,简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化以vue为例：view 对应 template，vm 对应 new Vue({…})，mo

2022-01-30 15:41:12 166

原创 Vue中的$nextTick()

概念在下次 DOM 更新循环结束之后执行延迟回调有时候我们想要在created中获取到dom元素，就可以使用$nextTick（）如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

2022-01-27 15:01:26 803

原创 vue修改数据页面不重新渲染

直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><script>export default { data:()=&

2022-01-27 14:57:09 671

原创 Vue组件通信(父传子、子传父、兄弟通信)

父传子父组件给子组件传递自定义属性，子组件通过props来接收父组件代码<son :fa-msg="msg"></son> import son from './Son' //引入子组件data () { return { msg: '父组件', }},components:{son},子组件代码<p>子组件接收到内容：{{ faMsg }}</p>

2022-01-27 14:55:46 187

原创 vue中的diff算法

概念diff算法就是进行虚拟节点对比，并返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom而Vue3只比较发生变化的节点当节点一旦发生改变会给一个变量效率大大提高...

2022-01-27 14:55:18 195

原创 vue虚拟dom

概念通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销

2022-01-27 14:54:25 349

原创 vue双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤第一步：需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，

2022-01-27 14:53:41 75

原创 v-if与v-show的区别

相同点都可以动态控制着dom元素的显示隐藏不同点v-if: 控制DOM元素的显示隐藏是将DOM元素删除和添加v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display:none或者display:blockDOM元素是还存在的性能对比v-if有更高的性能消耗v-show有更高的初始渲染消耗使用场景v-if适合运营条件不大可能改变的场景下v-show适合频繁切换// v-show 用于商品tab切换...

2022-01-27 14:51:50 155

空空如也

空空如也