Vue
Vue
门门men
玩命敲码中
展开
-
下载或升级videojs报错:Super expression must either be null or a function, not undefined
下载或升级videojs报错:Super expression must either be null or a function, not undefined原创 2023-03-27 11:37:54 · 434 阅读 · 0 评论 -
uniapp自定义tabBar,根据角色展示路由导航
uniapp自定义tabBar(custom-tab-bar),根据角色展示路由导航原创 2023-01-04 10:05:31 · 1522 阅读 · 8 评论 -
使用vuex页面刷新后数据丢失了(vuex数据持久化)
vuex的状态储存是响应式的,当我们使用vuex进行全局状态管理时,vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,vuex存储的数据只是在页面中,相当于我们定义的全局变量,刷新之后,会发现之前获取的vuex状态的数据消失了,里面的数据就会恢复到初始化的状态。因为,刷新页面后,vuex会重新更新statevuex存取值一般都是放在computed计算属性中,但是页面一刷新数据就没了。computed: { insurDatalist() {原创 2021-05-08 10:42:48 · 1275 阅读 · 0 评论 -
vscode中vue项目代码有颜色的插件
下载插件Vetur就这原创 2021-05-08 10:23:56 · 2542 阅读 · 0 评论 -
前端面试题问答
CSS中那些属性可以继承?答:[A] 字体属性:font-family,font-size,font-style,font-variant,font-weight,font;可继承ps: font-size继承的是计算后的实际值[B] 文本属性:可以继承:word-spacing;letter-spacing;text-align;text-transform;text-indent;line-height不可继承:text-decoration;ve.原创 2021-04-28 10:05:25 · 140 阅读 · 0 评论 -
前端面试题
1、说说你对 SPA 单页面的理解,它的优缺点分别是什么?答:点我2、v-show 与 v-if 有什么区别?答:点我3、Class 与 Style 如何动态绑定?答:点我4、怎样理解 Vue 的单向数据流?答:点我5、computed 和 watch 的区别和运用的场景?答:6、直接给一个数组项赋值,Vue 能检测到变化吗?答:7、谈谈你对 Vue 生命周期的理解?答:8、Vue 的父组件和子组件生命周期钩子函数执行顺序?答:9、在哪个生命周期内调用异步请求?答:10、原创 2021-04-27 12:05:02 · 203 阅读 · 0 评论 -
对于即将到来的 vue3.0 特性你有什么了解的吗?
监测机制的改变3.0 将带来基于代理 Proxy的 observer 实现,提供全语言覆盖的反应性跟踪。消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制;只能监测属性,不能监测对象检测属性的添加和删除;检测数组索引和长度的变更;支持 Map、Set、WeakMap 和 WeakSet。模板模板方面没有大的变更,只改了作用域插槽,2.x 的机制导致作用域插槽变了,父组件会重新渲染,而 3.0 把作用域插槽改成了函数的方式,这样只会影响子原创 2021-04-27 12:02:50 · 193 阅读 · 0 评论 -
虚拟 DOM
虚拟 DOM 的优缺点?虚拟 DOM 是什么?虚拟DOM就是为了解决浏览器性能问题而被设计出来的。虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象 状态变更时,记录新树和旧树的差异最后把差异更新到真正的dom中.虚拟DOM的作用:使用原生js或者jquery写页面的时候会发现操作DOM是一件非常麻烦的一件事情,往往是DOM标签和js逻辑同时写在js文件里,数据交互时不时还要写很多的input隐藏域,如果没有好的代码规范的话会显得代码非常冗余混乱,耦合性高并且难以维护。另外一方面在原创 2021-04-27 11:52:44 · 159 阅读 · 0 评论 -
组件中 data 为什么是一个函数?
因为,如果**data是一个对象则会造成数据共享**,在多次使用该组件时,改变其中一个组件的值会影响全部该组件的值。而如果是通过函数的形式返回出一个对象的话,在每次使用该组件时返回出的对象的地址指向都是不一样的,这样就能让各个组件的数据独立。...原创 2021-04-27 11:24:43 · 3607 阅读 · 0 评论 -
Axios的使用
Axios是尤雨溪大神推荐使用的,它也是对原生XHR的二次封装。Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios安装 安装: npm install axios --save 引入: import Axios from './axios' 使用 :Vue.prototype.axios = Axios;(全局注册 在使用时可以使用this.$axios使用)特性:可以在Node环境中配合Express()使用实现异步的数据交互提原创 2021-03-26 14:28:11 · 182 阅读 · 0 评论 -
说说你对v-model 原理的理解?
v-model是什么?v-model本质就是一个语法糖,可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model,会根据标签的不同生成不同的事件和属性。 // 标准写法 <input v-model="name"> // 等价于 <input :value="name" @input="name = $event.target.value"> // 在组件上面时 <div :va原创 2021-03-19 11:55:58 · 800 阅读 · 0 评论 -
你是如何理解Vue 的单向数据流?
单向数据流?数据从父级组件传递给子组件,只能单向绑定。子组件内部不能直接修改从父级传递过来的数据。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来就不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。另外,每次父级组件发生更新时,子组件中所有的prop都将会刷新为最新的值。意味着你不应该在一个子组件内部改变prop。如果你这样做了,Vue会在浏览器的控制台发出警告。子组件想修改时,只能通过原创 2021-03-19 11:16:33 · 387 阅读 · 0 评论 -
加载大量数据,出现卡钝或白屏现象
在以前公司开发的时候,有过开发表格的经历,表格呢我们一般使用element-Ui,element-Ui这个表格它其实有一个致命的缺点,它会出现加载大量数据,会卡顿的现象,就是它会出现一个白屏。如何解决它的卡顿现象:加载大量数据一直是个历史性难题,一般情况下在做:报表,所有的表跟数据加载到一个里面了,以表格加载数据过大问题,它就会出现卡顿现象。其中有很多方案,例如:利用C3里的一些特性,让它在加载表格的时候,它不先加载这些东西,在向下拉的时候在去加载;虚拟渲染:它会让你感觉把所有数据加载完了,但实原创 2021-03-04 16:27:04 · 1783 阅读 · 2 评论 -
创建vue的组件的3种方式
局部组件全局组件插件式组件:封装一个全局的模态框,操作dom,vue当中不建议直接操作dom,它提供了install的方式去把组件引进来;原创 2021-03-04 09:36:36 · 148 阅读 · 2 评论 -
vue.esm.js:628 [Vue warn]: Unknown custom element: <SlideBar> - did you register the component corre
vue.esm.js:628 [Vue warn]: Unknown custom element: - did you register the component correctly问题根源注册组件时注册反了;应先新建VUE实例再注册组件是,调转一下顺序即可解决原创 2021-03-02 16:37:56 · 1855 阅读 · 0 评论 -
history模式刷新404;vue.esm.js:628 [Vue warn]: Cannot find element: #app
history模式刷新404的问题:就是它向服务器发送请求了当我搭建路由的时候,使用hash的时候非常友好,为什么,使用history路由的时候会报错;这里如果是history的话它会做一件事情;当我们访问接口,或者访问路由的话,就是我们的浏览器会向后端发送一个请求,而后端没有这个接口,会导致当前地址没找到,一旦没找到地址屏幕会显示空白。所以说它默认会把main当成服务器接口的地址请求。怎么让它不按照接口的方式请求,默认是按照路由里面去找,去webpack.dev.js里面找一个devSer原创 2021-03-02 16:05:18 · 269 阅读 · 0 评论 -
使用webpack搭建vue项目
webpack是打包工具vue/react都是基于webpack进行打包的,现在来讲webpack是最主流的打包工具。接下来我们使用webpack搭建一个vue项目。去vue官网借鉴Vue Loader :https://vue-loader.vuejs.org/zh/webpack中所有的loader都是去处理不同后缀名的文件的。起步创建文件夹,下载基本loadernpm i webpack webpack-dev-server webpack-cli@3.3 vue-loader v原创 2021-02-26 18:25:27 · 795 阅读 · 0 评论 -
数据响应式
什么是响应式?数据驱动视图html5中的响应式(屏幕尺寸的变化导致样式的变化)数据的响应式(数据的变化导致页面内容的变化)原创 2021-02-23 13:47:35 · 95 阅读 · 0 评论 -
前端面试题
一、CSS相关1.1 左边定宽,右边自适应方案:float + margin,float + calc/* 方案1 */ .left { width: 120px; float: left;}.right { margin-left: 120px;}/* 方案2 */ .left { width: 120px; float: left;}.right { width: calc(100% - 120px); float: left;}1.2 左右两边定宽原创 2021-02-22 14:15:49 · 175 阅读 · 0 评论 -
vue项目中keep-alive的使用
在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了。其拥有两个独立的生命周期钩子函数 actived 和 deactived,使用keep-alive包裹的组件在切换时不会被销毁,而是缓存到内存中并执行 deactived 钩子函数,命中缓存渲染后会执行 actived 钩子函数。vue生命周期ke原创 2021-01-29 21:21:01 · 208 阅读 · 0 评论 -
前端 VUE 面试题
vuex 同步请求和异步请求vue组件 class组件和函数式组件vue组件传值跨组件传值路由实现的原理a标签和router-link的区别路由守卫指令 v-show 和 v-if区别v-model.lazyv-on:click v-on:click.stopelement使用table上家公司用过什么技术vue技术栈 vuex 流程 state 属性 vue实例中如何调用vuex中的数据vue生命周期单页面项目..原创 2021-01-29 10:05:04 · 1521 阅读 · 0 评论 -
Vue Router 路由实现原理
一、概念通过改变 URL,在不重新请求页面的情况下,更新页面视图二、实现方式更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: hash模式 和 history模式Hash 在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。hash 模式下,仅 hash 符号之前原创 2021-01-28 22:08:27 · 295 阅读 · 0 评论 -
vue中router-link和传统a链接的区别
Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过实现跳转。vue 官方解释:<router-link> 比起写死的 <a href="..."> 会好一些,理由:无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。在 HTML5 histor原创 2021-01-28 22:00:21 · 412 阅读 · 0 评论 -
v-if和v-show的区别
v-if和v-show在元素展示的效果都是动态控制着dom元素的显示隐藏,只是在隐藏元素的时候效果会有区别。v-if元素隐藏时,会在dom节点中把该元素移除v-show元素隐藏时,会在dom节点中把该元素设置css属性为display : none,元素依然保留在dom节点中使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换;...原创 2021-01-28 21:58:22 · 160 阅读 · 0 评论 -
vue class组件
Vue class 组件带来的优点vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利:methods 可以直接声明为类的成员方法,钩子都可以直接写作class的方法计算属性可以直接通过get来获得,可以被声明为类的属性访问器data、render 以及所有的 Vue 生命周期可以直接作为类的成员方法所有其他属性,都可以放到Component装饰器里Vue原创 2021-01-28 21:57:24 · 1097 阅读 · 0 评论 -
computed和method区别
computed和method区别computed:计算属性是基于它们的依赖属性进行缓存的,只有在它的相关依赖发生改变时才会重新求值。method:只要被触发重新這染,method 调用总会执行该函数。原创 2021-01-28 21:57:01 · 596 阅读 · 0 评论 -
history模式,页面返回404,如何解决?
history是html5新增的api,它的功能是修改地址栏但是不向服务器端发送真是请求,如果页面返回404,说明发送了请求到服务器端,并且服务器端对该请求没有做处理,那么解决404的方案就是:服务器端对于这类请求重定向到某个页面即可。...原创 2021-01-28 21:55:53 · 622 阅读 · 1 评论 -
单页面项目和多页面区别
什么是多页面多个html多页面如何实现1.根据页面去划分整个项目2.浏览器自身实现页面切换3.页面跳转本质上是从服务器端请求htm|文件的过程多页面的特点1.页面切换简单2.开发繁琐困难(难以实现模块化,应用入口多)、不易于维护3.对seo搜索引 |擎友好什么是单页面(spa应用, single page application)单个html文件单页面如何实现1.通过js模拟页面的切换效果,并与ur|地址挂钩2.根据页面结构去划分应用单页面的特点1.所有的视图和逻辑仅用一个页原创 2021-01-28 21:54:25 · 445 阅读 · 0 评论 -
vue 函数式组件
函数式组件特点:没有管理任何状态没有监听任何传递给它的状态没有生命周期方法它只是接收一些prop的函我们将这样的组件标记为functional:无状态 == 无响应式数据无实例 == 无this上下文函数式组件的优点:渲染开销低,因为函数式组件只是函数;函数式组件基本写法: { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 r转载 2021-01-28 10:35:42 · 1391 阅读 · 0 评论 -
VUE 3的安装过程
在命令行运行:npm i @vue/cli -g ,会覆盖本地版本;新建项目vue create front原创 2021-01-20 22:03:00 · 437 阅读 · 0 评论 -
vuex和redux的区别
vuex同步异步方式不一样,\view——>commit——>mutations——>state变化——>view变化(同步操作)view——>dispatch——>actions——>mutations——>state变化——>view变化(异步操作)redux的同步异步方式一样。view——>dispatch——>actions——>reducer——>state变化——>view变化(同步异步一样)vuex原创 2020-12-25 19:50:48 · 1782 阅读 · 2 评论 -
v-model和VUE初始化闪动
v-model语法糖v-bind="message" @input="message=$event.target.value"v-model利用的是 Object.defineProperty 方法Object.defineProperty (要添加或修改属性的对象, …属性名, 特征对象)在添加属性是可以设置属性以下的特性:1.是否只读2.是否可删除3.是否可遍历4.可以为属性注册像改变事件一样的函数示例:let nameValue = ''let obj = {}Object原创 2020-12-23 20:39:44 · 509 阅读 · 0 评论 -
VUE-Router
hash模式在浏览器中符号#以及#后面的字符称之为hash,用window.location.hash读取。hash是URL中的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会加载相应位置的内容,不会重新加载页面。特点:hash虽然在URL中,但不被包括在HTTP请求中;#用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全原创 2020-12-23 20:29:59 · 105 阅读 · 0 评论 -
Vuex基本使用
Vuex是什么?Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。为什么要使用Vuex?vuex 类似Redux 的状态管理器, 用来管理Vue的所有组件状态。采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。1. statestate是储存的单一状态,驱动应用的数据源;2. viewview,以声明的方式将state映射到视图;3. actions原创 2020-12-21 19:34:01 · 266 阅读 · 0 评论 -
Vue与React生命周期异同浅析
Vue与Reac都有lifecycle生命周期的概念,每个组件实例在被创建之前都要经过一系列的初始化过程。生命周期指组件从初始化开始到结束的过程 或生命周期是描述组件从开始到结束的过程,每个组件都具有生命周期,都对组件通过生命周期给予的钩子函数进行管理。钩子函数指系统某些状态和参数发生改变的时候,系统立马去通知对应处理的函数叫钩子函数Vue生命周期触发vue的created事件以后,this便指向vue实例 var mlistVue = new Vue({原创 2020-12-15 21:03:59 · 169 阅读 · 0 评论 -
vue-router基本搭建
vue-router能够让单页面拥有看似和多页面应用一样效果vue-router是:a、实现更新视图但是并不重新请求页面b、url路径和网页一一对应创建案例时勾选Ruoter:项目搭建成功后目录中生成router文件夹与views文件夹:在浏览器中运行,顶部多出两个链接Hom/About:点击两个链接Hom/About页面切换的同时顶部url地址处也会改变:...原创 2020-09-08 15:52:23 · 153 阅读 · 0 评论 -
vue中几种类型的插槽(slot)
标题vue的slot主要分三种:默认插槽,具名插槽,作用域插槽vue中的插槽,指的是子组件中提供给父组件使用的一个占位符;用标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML、组件等,填充的内容会替换掉子组件的标签(替换占位符)。默认插槽默认插槽是最简单的一种插槽,和上面的描述一致,就是通过替换占位符达到在父组件中更改子组件中内容的效果。在子组件中放置一个占位符(slot):<template> <span> <span>原创 2020-08-02 14:07:23 · 4320 阅读 · 0 评论 -
vue组件的几种通信
props和¥emit(常用)父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的.Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <input type="text" v-model="mymessage" @input=原创 2020-08-02 13:27:07 · 263 阅读 · 0 评论 -
file-loader和url-loader的区别
file-loader和url-loader的作用webpack加载css背景图片、img元素指向的网络图片、使用es6的import引入的图片时,需要使用url-loader或者file-loader。url-loader和file-loader可以加载任何文件。区别:url-loader可以将图片转为base64字符串,能更快的加载图片,一旦图片过大,就需要使用file-loader的加载本地图片,故url-loader可以设置图片超过多少字节时,使用file-loader加载图片。...原创 2020-08-02 13:09:00 · 493 阅读 · 0 评论 -
vue中的常见内置组件
component组件:有两个属性—is inline-template渲染一个‘元组件’为动态组件,按照’is’特性的值来渲染成那个组件。.transition组件:为组件的载入和切换提供动画效果,具有非常强的可定制性。slot:作为组件模板之中的内容分发插槽,slot元素自身将被替换transition-group:作为多个元素/组件的过渡效果keep-alive:包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们详情请看官网API:点击打开链接...原创 2020-08-02 12:59:28 · 1213 阅读 · 0 评论