kalrry

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。// 等同于element.scrollIntoView(true) element . scrollIntoView(alignToTop);// Boolean型参数 element . scrollIntoView(scrollIntoViewOptions);// Object型参数 参数。

to系列包含 toRef、toRefs、toRaw。

reactive只支持object【array，object，map，set…相对于reactive来说shallowReactive是浅层响应式改变。readonly是把reactive值变成一个只读的，使之没有办法赋值。reactive不能直接赋值，会破坏响应式对象从而导致页面不显示。ref取值赋值都需要加value，reactive不需要。数组可以使用push加解构。问题和第【二】项说明相似。

如果shallowRef使用ref的更新方式，用triggerRef包裹会强制更新shallowRef，起到和ref相同的作用。customRef自定义ref，相当于自己去实现一个ref响应式。ref响应式原理其实就是收集依赖和触发依赖更新。在vue2里面是data包裹的数据才有响应式。在vue3里面用ref包裹的数据才有响应式。vue2中常用ref来操作dom。用来判断一个数据是不是ref对象。

建window.dispatchEvent派发事件。

解决方案：需求不让使用分页情况下可以使用分页测试 AntDesign

vue-router 路由跳转打开新页面的两种方式

Vue父子组件的双向绑定一、两种实现方向二、示例三、参考文档一、两种实现方向用v-model用.sync修饰符二、示例子组件//属性props:{ name:{ type:String }}//更新值this.$emit('update:name','123')父组件v-model方式//将属性name的值更新为123<text-document v-bind:name="username" v-on:update:name="use

vue之v-model与.sync修饰符的区别---kalrry一、v-model1、父组件：2、子组件：3、示例代码:4、本质二、.sync1、父组件：3、示例代码4、本质三、总结功能作用场景：一、v-model1、父组件：父组件通过v-model绑定值。如需根据v-model传入的值改变，而触发其他更新需要通过watch监听。2、子组件：声明model对象 设置事件event和prop字段通过porps接受父组件传送值修改是通过this.$emit广播事件3、示例代码:父组件&lt

Vue之封装Axios---kalrry一、简介1. Axios是什么？2. 主要特点2. 为什么封装Axios二、Axios发送请求1. 发起一个 GET 请求2. 发起一个POST请求三、封装Axios1. 安装Axios2. Axios的初步封装3. Axios请求的封装4. 使用一、简介1. Axios是什么？官方解释：Axios 是一个基于 promise 实现的 HTTP 库，在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。

Vue之v-model双向绑定原理---kalrry一、简介二级目录三级目录一、简介v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定ps：不懂语法糖是什么意思的请点击二级目录三级目录...

Vue之过渡与动画---kalrry一、过渡1. v-enter2. v-enter-active3. v-enter-to4. v-leave5. v-leave-active6. v-leave-to二、CSS 动画1. 只修改name的值和css样式2. @keyframes3. 使用第三方动画库（animate.css）4. 使用JavaScript 钩子实现动画一、过渡Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件，该组件用于包裹要

Vue之webpack快速上手---kalrry一、简介二、Webpack的简单使用1、准备工作2、Webpack安装3、项目常见目录4、webpack.config.js1. 入口2. 出口3. webpack.config.js配置文件4. 实例demo(让li元素隔行变色)三、vue-cli融合webpack创建项目1、安装vue-cli2、用vue-cli来构建项目四、在webpack中的一些基本使用1、ES6模块化规范中的定义：2、组件的使用3、实例组件components4、main.js5、配

Vue项目中的问题汇总---kalrry一、普通问题1. mounted钩子函数中请求数据导致页面闪屏的问题2. 路由模式改为history后，出现首次启动首页报错，和刷新访问路由报错3. vuex中数据刷新丢失问题4. token存储问题5. Vue解决浏览器兼容问题二、项目需求问题1. 页面权限控制和登陆验证2. 动态菜单2、动态生成菜单3、将它转化为菜单栏，这里使用了 iview 的组件举例。参考一、普通问题1. mounted钩子函数中请求数据导致页面闪屏的问题解决方式：这其实就是数据加载先后

vue之动态注册并渲染组件---kalrry简介：目录结构一、普通方法二、方案二三、方案三四、方案四简介：目录结构待完善补充index.vuedir{ //目录文件夹 comp1.vue comp2.vue}一、普通方法按照常规做法是在index.vue中直接这样引入并注册：import comp1 from './dir/comp1.vue'import comp2 from './dir/comp2.vue'....export default { components

Vue之条件语句&循环语句---kalrry一、v-if条件语句1. v-if2. v-else3. v-else-if4. v-show二、v-for 循环指令1. 例：v-for 循环数组渲染列表2. 例：v-for 循环对象渲染列表3. 例：将第二个的参数作为键名4. 例：将第三个参数作为索引5. 例：v-for 循环创建整数列表一、v-if条件语句1. v-if<div id="app"> <p v-if="ok">v-if条件判读</p>&lt

vue之过滤器---kalrry一、简介1、语法2、使用3、例子二、官方文档一、简介作用： 格式化数据1、语法//全局过滤器Vue.filter('过滤器名称',function(value){ 逻辑代码 return 结果})//局部过滤器new Vue({ .... filters:{ 过滤器名称:function(value){}, ... 过滤器n }})2、使用<div>{{msg | 过滤器}}</div&gt

Vue之computed/watch---kalrry一、计算属性(computed)1.普通方法2.运用计算属性后3.computed 与 methods区别4.computed的setter属性二、监听属性1.监听属性watch2.immediate属性3.deep属性4.computed 与 watch 区别1. 相同点：2. 不同点：一、计算属性(computed)计算属性在处理一些复杂逻辑时是很有用的。计算属性与普通方式应用对比1.普通方法<div id="app"> {{

Vue之前后台交互---kalrry一、接口调用方式二、前置概念Promise1. 概念：2. 优点：3. 基本用法：三、发送Ajax请求(于Promise)1. 基于Promise发送Ajax单次请求2. 发送多次Ajax请求3. then参数中的函数返回值4. 实例方法5. 对象方法四、fetch（ES6新增）特点：1. fetch请求参数2. get请求参数3. post请求参数4. 响应数据格式：五、axios发送数据请求特点：使用:1、cdn引入2、在vue中使用1. 引入2. 基本用法3. 请求

Vue发送请求之Ajax---kalrry一、简介二、Axios1. GET请求get方法传递参数3、POST传递参数三、在脚手架中使用1、安装axios并引入2、传参方式：3、发送AJAX请求一、简介vue-resource是vue自带的发送请求方式ajax是第三方插件来完成vue本身不支持发送AJAX请求，需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐

Vue实例对象中的属性与方法---kalrry01、el02、data03、methods04、computed05、template06、watch07、vue实例的属性对象08、beforeCreate09、created10、beforeMount11、mounted12、components01、el是根实例的特有属性,代表根元素提供一个页面上的DOM对象作为Vue实例的挂载目标.可以是选择器或者或DOM元素实例02、datadata对象中的属性是响应式的，直接向vm实例设置属性不是

Vue下ref的基本使用---kalrry一、简介二、ref获取dom元素三、ref获取组件一、简介在js中是通过设置id，然后通过document.getelementbyid(hello) 来获取dom树进行操作。在vue框架里面，是通过ref设置来获取参数的，这个东西有一个 好处，对于普通的元素比如button而言，他就是一个跟js一样的dom树获取，但是对于组件而言，就可以获取整个组件对象，我们可以通过这种方式获取组件里面的内容进行操作。ref 被用来给DOM元素或子组件注册引用信息。引用

Vue样式绑定---kalrry一、简介二、class样式绑定1、对象绑定方式2、数据绑定方式3、对象与数据结合的绑定方式三、class样式绑定1、对象绑定2、数组绑定一、简介vue常用样式绑定有两种方式：class样式绑定style样式绑定二、class样式绑定1、对象绑定方式格式：v-bind:class=“{styleClass:flog}”styleClass：定义好的样式类flog：布尔值，表示样式是否显示例子<style type="text/css">

VUEvue框架的两大核心：数据驱动和组件化。第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM）第二周：大家需要转变编程思维的习惯：组件化（封装的是页面）一、前端开发历史1994年可以看做前端历史的起点（但是没有前端的叫法）1995年网景推出了JavaScript1996年微软推出了iframe标签， 实现了异步的局部加载1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商

JavaScript库集合---kalrry---imgweb3.js参考web3.js序号JS库功能备注01web3.jsweb3.js 库是一系列模块的集合，服务于以太坊生态系统的各个功能备用链接02Three.js03Ramda04Lodash05Moment06Highlight.js07D308Voca09Immutable.js10Hammer.js

vue+webpack项目中设置页面title的方法---kalrry一、使用vue的自定义指令二、设置html title三、vue中配置vue.config.js四、HtmlWebpackPlugin插件五、动态设置页面title六、以上每种做完重启项目便可一、使用vue的自定义指令<div v-title>{{htmltitle}}</div>...directives: { title: { inserted: function (el, bindin

vuex持久化插件---vuex-persistedstate---kalrry一、简介二、插件安装三、配置使用四、自定义存储方式一、简介vuex刷新丢失的监听写法vuex是在中大型项目中必不可少的状态管理组件，刷新会重新更新状态，但是有时候我们并不希望如此。例如全局相关的登录状态、token、以及一些不常更新的状态等，我们更希望存储到本地，减少无用的接口访问，提升用户体验；二、插件安装npm i -S vuex-persistedstate三、配置使用在vuex初始化时候，作为组件引入i

Vuex刷新页面导致数据丢失解决办法---kalrry一、前言二、解决方案方案一实现原理代码实现方案二插件实现一、前言vue构建的项目中，vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新；但vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，里面的数据就会恢复到初始化的状态。如果此时用户已经登录了，但我把登录状态放到state中了，一刷新页面，还要重新登录，购物车里的添加的数据，一刷新要重新添加

vue-awesome-swiper的使用姿势---kalrry简介一、安装二、按需引入三、全局引入四、调用代码五、配置options简介vue-awesome-swiper是基于swiper的，安装不同版本的vue-awesome-swiper对应不同的swiper，所以swiper里面的属性多数能应用到vue-awesome-swiper中，也可以根据swiper文档来设置vue-awesome-swiper属性，swiper官方文档在这里我使用的是vue-awesome-swiper V3.1

数据模拟服务之间的区别---kalrry一、JsonPlaceHolder二、JsonServer三、Mockjs一、JsonPlaceHolder如果只是get一些数据，只用借助jsonplaceholder就可以实现，但想要post数据，使用jsonplaceholder就有些力不从心了，这时可借助json-server来搭建我们的本地的数据接口，对数据进行增删改查二、JsonServer主要的作用就是搭建本地的数据接口，创建json文件，便于调试调用三、Mockjs主要的作用就是生成随机数

RESTfulAPI让请求语义化---kalrryRESTfulAPI让请求语义化RESTfulAPI让请求语义化就是一个在定义接口的时候规范 让我们在发送请求的时候 使用动作+操作的接口 更加清楚的描述当前我们这个接口是干什么的原有的请求 GET POST 语义化不够明确在有了RESTfulAPI之后 可以让我们的接口更加具有语义化GET 读取后台内容POST 发送内容PUT 更新修改内容 （更新全部）PATCH 更新修改内容（局部更新）DE

一、GET与POST千年疑问https://www.cnblogs.com/logsharing/p/8448446.html

vue.js纪录片---kalrryhttps://www.youtube.com/watch?v=OrxmtDw4pVI

vue 基础知识点---kalrry一、vue 的理解1、什么是 MVVM？2、Vue的优缺点？3、Vue跟React的异同点4、请说说双向绑定实现的原理？5、请说说你对“渐进式框架”的理解？6、Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？7、请说说什么是虚拟 DOM?二、生命周期1、说说 vue 生命周期的做用是什么？2、说下你对vue生命周期的理解，分别有哪些阶段？2、说说 vue 实例生命周期钩子函数具体适用的场景？3、第一次加载会触发哪几个钩子？4、子组件与父组件生命周期发生的先

vue是现今最为主流的MVVM框架，作者：尤雨溪vue是渐进式的自低向上增量开发的MVVM框架渐进式：渐进式的框架 就是一种可以更好的方便的与其他框架整合的模式（只会做职责之内的事情）自低向上增量开发： 从简单到复杂的一个过程 vue在编写的时候 先把基本页面写好 在逐渐完成逻辑

Vue & React 组件传值---kalrry一、Vue组件传值1、父传子(props)（1）父组件（2）子组件2、子传父($emit)（1）子组件（2）父组件3、跨组件(bus.js)（1）bus总线(中转站)（2）发送数据（3）接收数据4、VueX5、ReduX(第三方工具)二、React组件传值1、ReduX(第三方工具)2、React-ReduX(优化)一、Vue组件传值1、父传子(props)（1）父组件<template> <div class="fath

Vue.js常用插件集合---kalrry前言一、Vue.js UI组件二、Vue.js开发框架三、Vue.js实用库四、Vue.js服务端五、Vue.js辅助工具六、Vue.js应用实例七、Vue.js Demo示例八、详细分类01、UI组件及框架02、滚动scroll组件03、slider组件40、编辑器05、图表06、日历07、地址选择08、地图09、播放器10、文件上传11、图片处理12、提示13、进度条14、开发框架汇总15、实用库汇总前言Vue是主流的前端框架，Vue.js常用插件可以提升开

Vue3与ViteVue3之——和Vite不得不说的事Vue3之——和Vite不得不说的事点击带你离开

nextTick钩子函数的原理以及应用---kalrry一、引出问题二、原理三、什么是nextTick一、引出问题vue的响应式并不是数据变了DOM立即更新，而是按照一定的规则进行DOM的更新验证问题：ref绑定dom元素给个点击事件打印dom内容，发现视图变了，但打印后台的内容还是初始数据代码待更新ing二、原理首先是修改数据是一个同步任务，在修改的时候仅仅是对data内容进行了改变，但是还没有涉及到dom操作vue 开启一个异步队列，并把修改视图的所有进程全部放进去等同步的那些修改数

vue中遇到数据变了，视图没有改变的原因及解决方案---kalrry出现数据变了视图没变的原理解决方案 $set$set的解决原理出现数据变了视图没变的原理在vue中，模型变视图变，是因为vue中有数据劫持与发布订阅者模式共同影响的，但是数据劫持是通过Object.defineProperty()来进行劫持的，但是Object.defineProperty()只会监听初始化的时候data数据，初始化之后新添加的数据是不会被劫持的，这才导致模型变了数据劫持劫持不上，导致视图没有gengxin解决方案 $