weixin_58032613的博客

Cookie 和 Session的区别

给网页的标签头部添加小图标方法

ant model 模态框组件自定义foot脚部按钮

前端vue获取URL地址里面的参数

文件流转换成url

写项目的时候遇到了这样一个问题，根据左侧下拉框来判断右侧input框的正则表达式。废话不多说，下面我们直接上代码。

总结：生命周期的优点：生命周期让我们在控制整个vue时更容易形成更好的逻辑，四个阶段，11个钩子函数，创建前后、挂载阶段、更新阶段、销毁阶段分别有：创建前：beforeCreate() data和methods不可使用创建后：Created() 可以使用data和methods不能使用dom挂载前：beforeMount() data,methods可以使用但是不能使用dom挂载后：Mounted() dom渲染完毕可以使用dom更新前：beforeUptate() 当data的数据导致d

首先我问大家一句，什么是目录？知道的小伙伴可以在下面留言（目录就是文件夹）那什么是vue的目录呢？接下来大家请看两张图第一张是配置好的vue文件的一些基本内容第二张是src（开发文件）里面的文件这两张图就说明了vue文件的一个基本目录感谢@仰Vue框架文件目录的直接与理解...

我的这篇文章，帮助大家分析vue相对原生js的优缺点，vue的一些好处如下：一、控件跟数据自动绑定可以直接使用data里面的数据值来提交表单，而不需要再使用$("#myid").val()那一套方法来获取控件的值，对控件赋值也方便很多，只需要改变data的值，控件就会自动改变值。将复杂的界面操作，转化为对数据进行操作。比如下面的一段代码就可以很简单的实现了select控件的里面的列表的动态管理：html代码：<el-select v-model="mType" style="flex: 1;

认识mixin目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；一个Mixin对象可以包含任何组件选项；当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中；Mixin的基本使用Mixin的合并规则如果Mixin对象中的选项和组件对象中的

ElementUI 是一套ui组件库，目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色，若用于项目开发，难免遇到要需求修改其默认样式的情况，本文就基于vue 框架介绍几种修改 ElementUI 默认样式的办法。面试官会问：怎样修改ElementUI的默认样式 ？如何修改ElementUI样式？回答：一共有三种方法：1、内嵌法修改样式、通过:style修改，用于局部组件块2、:class引用修改样式，通过:class修改，用于局部组件块3、import导入修改样

一、官网的描述混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins，在创建一个co

一、动画生命周期在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter被移除)，在过渡/动画完成之后

一、名词解析：provide：Object | () => Objectinject：Array | { [key: string]: string | Symbol | Object }provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。provide 和 inject 主要在开发高阶插件/组件库时使用。并不推

项目创建vite的介绍首先要想使用vite来创建一个vue项目，要把vue脚手架升级成为5.0.1版本，但是有一个很大的缺陷，就是升级过后不会再向下兼容vue2的语法创建项目的方式脚手架升级为5.0.1版本：cnpm install vue@next 或 yarn global add @vue/cli 安装新版@vue/cli升级完之后，输入：vue -V 来查看脚手架的版本号脚手架为5.0.1版本创建项目的语法也变了，原本在4.5.15版本的时候还可以做到向下兼容使用vue cli语法

本文详细的讲解了项目打包上线的过程，如有错误，请私信我更改

如果为对象添加少量的新属性，可以直接采用Vue.set()如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象如果你需要进行强制刷新时，可采取$forceUpdate() (不建议)vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式

在下次DOM更新循环结束后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。使用场景是：可以在created钩子函数中拿到dom节点无法获取的原因：vue的reader渲染函数是异步的，例如将变量修改，数据改变引起虚拟dom对比，如果立刻获取真实dom，无法获取，因为数据改变引起虚拟dom对比，立即获取真实dom是undefined，可以使用定时器、$nextTick 使用场景：假如定义一个变量开关，修改开关变量让按钮和输入框来回切换，切换到input直接获取dom为其绑定自动聚焦，

type 可以是下列原生构造函数中的一个：- String Number Boolean Array Object Date Function Symbolprop 数据单项传递- 父影响子，子不影响父- 不能在组件中直接修改 prop 传递过来的值，Vue 会给出警告- prop 验证时，会在实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的- 非 prop 特性，组件可以接受任意的特性，而这些特性会被添

插槽就是父组件往子组件中插入一些内容。有三种方式，默认插槽，具名插槽，作用域插槽1. 默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据2. 具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置。3. 作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。

ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。

1. 安装elementUI：npm i element-ui -S2. 在main.js中引入elementUIimport Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element, { size: 'small' })3. 访问Element官网【组件–Upload上传】<el-upload action="https://jsonplaceholder.typi

本文详细的讲解了如何使用自定义指令实现js的拖拽功能

本文章详细的详细的讲解了vue的tree-table插件的使用

一、v-for中为什么要用keyvue中列表循环需加:key=“唯一标识” 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue

2. 默认使用懒加载在2.x版本里。不管数据多大，都会在一开始就为其创建观察者，在数据很大时，就会造成性能的问题。在3.x中，只会对渲染出来的数据创建观察者，而且3.x的观察者更高效。3. 3.0新加入了TypeScript以及PWA支持4. 重构Virtual DOM* 模板编译时的优化，将一些静态节点编译成常量* Slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组织

双向数据绑定用原理发生了改变，使proxy替换Object.defineProerty,使用Proxy的优势：可直接监听数组类型的数据变化监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升可直接实现对象属性的新增/删除默认使用懒加载在2.x版本里。不管数据多大，都会在一开始就为其创建观察者，在数据很大时，就会造成性能的问题。在3.x中，只会对渲染出来的数据创建观察者，而且3.x的观察者更高效。3.0新加入了TypeScript以及PWA支持

v2是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。v3 使用发布者订阅模式，结合ES6的prosy的set和get方法来进行数据劫持，进一步结合watchr的update方法

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

vue脚手架配置在根目录创建vue.config.js在module.exports中配置devserver的内容devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target:'http://localhost:3000/',//跨域请求资源地址

一、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

vue中自定义过滤器• 过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据• 过滤器分为全局过滤器和局部过滤器全局过滤器全局过滤器是通过Vue.filter()来定义的，定义好后，它在所有组件中都可以使用。第一个是过滤器名称 第一个参数是需要过滤的值 第二个参数是给过滤器传递的值局部过滤器局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.过滤器的使用方式是，在双花括号或v-bind中通过一个管道符 ‘|’

vue中除了核心功能内置的指令外，也允许注册自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。全局自定义指令是通过Vue.directive('第一个参数是指令的名称',{第二个参数是一个对象，这个对象上有钩子函数})

一般我们在面试的时候面试官通常会问以下问题你封装过组件吗？说一下组件封装？你在项目中是如何封装组件的？…而我的回答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载

修饰符：在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符常用的主要有：• .stop :阻止事件冒泡• .self :当事件作用在元素本身，触发回调• .once :只执行一次 • .prevent: 阻止默认事件• .capture :事件捕获• ·passive:告诉浏览器你不想阻止事件的默认行为• ·trim:自动过滤用户输入的首尾空格语法：@事件名.修饰符=“方法名”

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

一、计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {

想要理解虚拟dom首先要知道什么是虚拟dom？虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。为什么要用虚拟DOM来描述真实的DOM呢？创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。

1.父传子：在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 Bus.$off(“事件名”)2.子传父：vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件。子组件通过$emit触发父组件上的自定义事件，发送参数（第一个是要改变的属性值，第二个是要发送的参数）

watch在vue的文档中是这样解释的。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。值是包括选项的对象：选项包括有三个。第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）