vue
文章平均质量分 87
田江
技术没有秘密,只有知道的人多了,才能把技术的作用发挥出来。
展开
-
vue3的面试题
vue3的面试题原创 2022-11-20 21:52:36 · 5673 阅读 · 3 评论 -
VUE面试题系列03
24、为何vue采用异步渲染?1、vue采用异步队列渲染是为了提高性能,在异步队里会去掉重复的无效的渲染。当vue中的数据发生改变后,vue框架会把该数据引起的dom更新放入异步队列( 缓冲在同一事件循环中发生的所有数据变更 ),进行排队。 如果同一个 watcher 被多次触发,只会被推入到队列中一次 。 这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的 。2、如果不采用 异步渲染,而是在数据发生改变后,立即更新dom,如果有重复无效的渲染,那么,就会造成性能的浪费。原创 2021-03-17 23:00:26 · 5759 阅读 · 6 评论 -
VUE面试题系列02,前端面试题
VUE面试题系列0216、动态路由传参2种方式params与query1)、params传声明式:<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>编程式:$router.push({ name: 'user', params: { id: '123' }})接 //模板里的写法: $route.params.参数名 //脚本里的写法: .原创 2020-12-27 21:23:28 · 7637 阅读 · 9 评论 -
VUE面试题系列01(带数字,带序号),前端面试题
VUE面试题(带数字,带序号)1、v-show 与 v-if 有什么区别?相同点:v-show和 v-if都是 控制 dom元素 的 显示和隐藏 的。不同点:1、原理: v-show是通过控制元素的样式属性display的值,来完成显示和隐藏; v-if是通过对dom元素的添加和删除,完成显示和隐藏 2、使用场景:由原理(做法)得出使用场景的区别 v-show:使用在dom元素频繁切换的场景原创 2020-12-23 21:46:48 · 8322 阅读 · 2 评论 -
vue面试题:vue路由按需加载(路由懒加载)
vue的SPA(Single Page Application)应用里,当(webpack)打包构建时,会把所有的js打在一起,JavaScript 包会变得非常大,并在第一次请求时全部下载完毕,影响页面加载(性能)。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。目前有三种方式实现路由组件的懒加载,分别是: vue异步组件 es 的 import() webpack的require.ensure() 一..原创 2020-06-16 20:43:05 · 3537 阅读 · 8 评论 -
面试题:vue实现双向数据绑定的原理(附源代码)
此面试题浅层次的解释在:前端面试题:vue 的双向数据绑定原理,v-model的源码深层次,其实就是问你vue数据绑定的原理:1、使用Object.defineProperty进行数据劫持,把data对象,computed等里的所有属性进行数据劫持。数据劫持的意思可以看:JavaScript中的Object.defineProperty()函数2、使用观察者模式,完成发布订阅。发布订阅...原创 2020-02-20 22:27:18 · 3240 阅读 · 3 评论 -
前后端分离情况下,如何联调项目
一、联调前:保证前后端各自没有问题。后端用postman测试一下。 前端连接的jsonserver,保证数据格式和后端返回的数据格式一致。二、前后端的计算机连在同一个局域网 可以在cmd 里,用命令 ping 对方的ip地址,来测试是否在同一个局域网里。以下提示是正确的:以下提示是错误的:三、把config/index.js中的反向代理改一下: ...原创 2020-02-16 19:15:08 · 10149 阅读 · 3 评论 -
webpack里如何配置反向代理,怎样配置反向代理,webpack配置反向代理(前后端联调),如何用反向代理解决跨域问题
反向代理一、为啥要叫反向代理 正向代理隐藏真实客户端,反向代理隐藏真实服务端。二、反向代理解决的问题 反向代理解决的就是跨域,在前后端联调的情况下,前端有服务器,后端也有服务器,那么联调时,就存在跨域问题三、反向代理的原理 通过伪造请求使得http请求为同源的,然后将同源的请求发送到反向代理服务器上,由反向代理服务器去请求真正的u...原创 2020-02-16 19:07:00 · 3859 阅读 · 0 评论 -
vue组件更新_引起组件更新的起因,什么会引发组件的更新
会不会引发vue中的组件更新,只要抓住:组件模板的显示结果会不会改变就行,如果显示结果会变,那就会更新组件,否则不会引发组件更新一、数据有没有渲染在页面上:数据在模板(页面)里使用了:只要数据变了,自然会引起页面的更新,因为,影响了组件里的模板显示结果 数据没有在模板(页面)里使用:就算数据变了,也不会引起页面的更新,因为,不影响组件里的模板显示结果二、数据有没有改动...原创 2019-11-14 23:36:33 · 1429 阅读 · 0 评论 -
理解BEM的命名方式
一、什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier)。无论是什么网站页面,都可以拆解成这三部分。二、带你认识网页 我们来看一下qq的官网,它可以由三个块组成:logo,导航nav和页面主题mian三个模块构成,如果再细分一下呢?logo是由图片和文字两个元素组成,导航由三个元素组成,页面主题中包含图片,文字和按钮三个元素,如果把一个...转载 2019-10-19 21:05:09 · 530 阅读 · 1 评论 -
vue系列_混入(mixin)
一、混入的理解: 1、混入(mixin)就是一个vue对象,你可以认为,混入是把每个vue组件的公共部分的内容抽取出来了。即提高了代码的复用性。 2、假设每个vue组件里的都有同样的函数testf,而且完成的功能是一模一样的,怎么办,不能像原生js那样单独封装个函数吧,肯定不行,那这就是混入(mixin)的最简单的理解。示例:var myMixi...原创 2019-07-27 20:18:03 · 791 阅读 · 0 评论 -
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
这篇文章主要介绍webpack如何搭一个vue脚手架的相关资料,文中有超详细讲解和注释,对大家学习或者使用webpack具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流。16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版...转载 2019-07-31 22:40:20 · 906 阅读 · 0 评论 -
二阶段和三阶段在文件结构上的区别,思路上的区别,认识上的区别
二阶段: 1、一开始按照代码类型进行分类,如html里只写html,css中只写css,js中只写js 2、讲到插件时,就会发现,每个插件里有完整的html,css和js,插件其实不是已经按照文件类型进行分类了,而是把html,css和js写在一个文件里,如:一个轮播图插件里,包括了自己的html,css和js代码。三阶段: 按照功能进行分类,即一个功...原创 2019-07-09 08:39:05 · 1508 阅读 · 2 评论 -
SPA,什么是单页面应用,为什么要使用单页面应用,单页面应用有啥好处
说到SPA,很多人只是在使用,不知道为什么使用?别人再用,所以,我也再用,流行,听到了,所以,我用。 SPA--------single page application。单页面应用,即一个web项目就只有一个页面(即一个HTML文件),对应传统的做网站或者web应用的人来说,觉这不可以思议------怎么可能,一个项目就一个html页面。那跳转怎么办?页面结构不一样怎么办?等等,...原创 2019-06-21 23:07:41 · 11303 阅读 · 11 评论 -
vue——项目优化,缩短首屏加载时间
在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。解决方法是,将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开...转载 2019-08-08 21:25:25 · 1721 阅读 · 0 评论 -
vue路由懒加载,vue router 导入方式
一:直接导入import Hello from '@/components/Hello'@是在webpack.base.conf.js 配置: resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('sr...转载 2019-06-04 18:11:16 · 906 阅读 · 0 评论 -
vue系列_自定义组件Modal(模态窗口)
父组件的代码(打开模态窗口的代码):<template> <div class="hello"> <button @click="toggleModal">打开Modal对话框</button> <Modal v-show="showModal" v-on:closeme="closeme"></Mod...原创 2019-07-27 22:56:57 · 32350 阅读 · 3 评论 -
Vue-router 路由守卫
在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段。export default new Router({ routes:[{ path: 'xxx', components: xxx, name: 'xxx', meta: { r...转载 2019-07-27 23:22:13 · 3232 阅读 · 0 评论 -
vue系列_vue-Router入门和理解
一、路由的概念和名称1、路由:就是根据不同的请求路径,跳转到不同的组件而已。2、路由配置:设置哪些路径对应哪些组件,就是路由的核心。3、谨记:Vue-Router也是个对象,在创建Vue-Router时,构造函数里需要传入路由配置,否则,路由对象Vue-Router如何进行路由4、Vue-Router对象必须要放到Vue对象里,否则,Vue-Router没法用。即:在创建Vue对象...原创 2019-07-28 06:47:09 · 1108 阅读 · 0 评论 -
vue系列_vue-Router_组件内部的路由守卫(局部路由守卫)01
如果你对vue的路由基础了解,就朝下看,不然不了解,请看vue系列_vue-Router入门和理解。一、概念:路由守卫:就是进入当前路由前,有个人“门卫”进行保护,也可以理解为“安检”。在Vue组件里有个函数叫作:beforeRouteEnter。就是完成路由守卫的,表示进入当前路由前要做什么?1、如下示例代码(先理解beforeRouteEnter函数):let good...原创 2019-07-28 07:21:44 · 8831 阅读 · 0 评论 -
vue系列_vue-Router_全局路由守卫
一、给vue-Router的对象(实例),增加如下代码:router.beforeEach((to, from, next) => { console.log(to.fullPath); if(to.fullPath!='/login'){//如果不是登录组件 if(!localStorage.getItem("username")){//如果没有登录,就先进入login组件进...原创 2019-07-28 07:56:45 · 1409 阅读 · 0 评论 -
vue调试工具vue-devtools安装及使用
一、为什么要使用vue-devtools由于用vue脚手架写的源代码,运行时,先经过webpack打包,打包后的结果和我们的源代码不一样,所以,没法调试程序,没法看的数据的变化,在google中调试非常费劲。Vue-devtools工具是专门为vue项目使用过程中设计的调试工具。有了这个工具,就可以在google浏览器的控制台里看到当前组件的模板结构和data。如下图所示(左边是当前组件...原创 2019-08-18 19:12:22 · 6676 阅读 · 6 评论 -
前端面试题:vue 的双向数据绑定原理,v-model的源码
一、双向绑定: 在vue中,使用指令v-model来实现双向绑定,双向绑定的意思是:表单改变,数据也改变,数据改变,表单也改变,以下为示意图:二、示例代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title&g...原创 2019-08-21 17:55:55 · 2887 阅读 · 2 评论 -
webpack4.0.1_vue脚手架的项目与json-server结合,vue开发前端时用json-server模拟数据
写在前面的话: 在完成现代web开发时,一个公司中,前后端同时进行开发,前端开发页面逻辑,后端处理业务逻辑。在后端还没有开发好,即没有提供数据是,则提前写好前后端的数据接口,前端人员利用json-server模拟出数据,前端利用fetch(或ajax)从json-server上请求到数据,进行动态数据的展示。等到后端人员把业务逻辑写好后。再把请求地址换成后端的即可。正式开始: ...原创 2018-03-08 23:31:02 · 1252 阅读 · 0 评论 -
vue框架中使用swiper,模块化的方式
一、安装swiper 在项目目录项用npm安装swiper包(模块) npm i swiper二、引入swiper 在需要swiper的组件里(如:demo.vue)引入swiper import Swiper from "swiper";三、使用swiper(demo.vue)<templa...原创 2019-04-18 21:55:13 · 1245 阅读 · 3 评论 -
人人都能懂的Vue源码系列(八)—initLifecycle
initLifeCycle方法用来初始化一些生命周期相关的属性,以及为parent,child等属性赋值,来看源码。export function initLifecycle (vm: Component) { const options = vm.$options // locate first non-abstract parent let parent = options...转载 2018-10-17 12:10:19 · 535 阅读 · 0 评论 -
06vue_计算属性_基础示例
模板内的JavaScript表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量...原创 2018-02-22 15:07:03 · 361 阅读 · 0 评论 -
05vue_模板语法_缩写
v- 前缀作为vue的属性提示(因为,vue是利用HTML的自定义属性,vue的属性都是以“v-”开头的),用来识别模板中 Vue 特定的属性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single...原创 2018-02-22 14:50:17 · 414 阅读 · 0 评论 -
JSON-Server使用
JSON-Server主要的作用是搭建一台JSON服务器,测试一些业务逻辑,不需要读取文件的方式。原创 2018-02-22 11:42:53 · 484 阅读 · 0 评论 -
10vue组件入门_如何写一个最简单的vue组件_vue组件的作用是啥
一、vue组件的概念: 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义标签,所有的 Vue 组件同时也都是 Vue 的实例(对象)。commonJS,AMD,CMD是把JS逻辑进行模块化vue组件是把页面(html代码,CSS代码)进行模块化如下图所示,一个页面分四个部分,每个部分是个vue组...原创 2018-03-01 14:44:05 · 4508 阅读 · 1 评论 -
04vue_模板语法_指令
概念和常见指令指令 (Directives) 是带有 v- 前缀的特殊属性。即:vue给HTML元素增加了一些自定义属性,这些自定义是属性是以"v-"开头的属性v-text:更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。v-html:更新元素的 innerHTMLv-show:根据表达式之真假值,切换元素的 displ...原创 2018-02-21 22:38:16 · 426 阅读 · 1 评论 -
vue脚手架(vue-cli)如何搭建项目
一、安装1、安装nodejs(自带npm)2、安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org3、全局安装webpack npm install webpack –g4、安装vue-cli脚手架构建工具 npm install vue-cli –g二、使用vue-cli构建项目目录1、准备一个文件夹作...原创 2018-03-08 22:19:04 · 1764 阅读 · 3 评论 -
03vue_模板语法_插值
模板语法Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并...原创 2018-02-21 17:29:13 · 414 阅读 · 0 评论 -
01vue的helloworld,vue入门,如何使用vue写一个最简单的效果
说明:1、本示例是作为程序员接触任何一门技术时的基本使用“hello world”。2、要测试该代码需要先下载vue.min.js看代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title原创 2018-02-03 17:55:19 · 3282 阅读 · 0 评论 -
vue脚手架中webpack的打包原理,vue脚手架的webpack是如何打包的?
vue脚手架写完代码后,要打包部署(打包)到web服务器上。1、运行命令 npm run build。就完了,一步搞定。下面说一下vue脚手架中webpack的打包原理:1、针对静态资源: 很多人会把静态资源一部分存放在src/assets目录下,一部分存放在static目录下,我建议所有的静态资源都存放在src/assets下。 在w...原创 2018-03-08 01:36:42 · 12518 阅读 · 4 评论 -
vue脚手架做的项目如何放在服务端,vue项目部署到服务器
在项目目录下(如:e:\workspace\taobao)运行 npm run build即可,完成后,就会在项目目录下有多一个dist目录,把dist下的内容就可以放在web服务器上了。哈哈,完了,ok了如下图: ...原创 2018-03-07 10:47:51 · 9152 阅读 · 2 评论 -
07vue_计算属性_setter和getter
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app1"&g原创 2018-02-22 15:40:40 · 690 阅读 · 2 评论 -
08vue_侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。代码:前端代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /...原创 2018-02-22 15:57:34 · 554 阅读 · 0 评论 -
vue中el属性,template属性,render函数的优先级,el属性,template属性,render函数分别都做了什么事情
//1、el,template,render(渲染函数)都是vue对象对应的HTML元素(DOM对象)//2、优先级顺序:el < template < render//3、el对应的HTML元素是写在网页上的。 HTML代码:<!DOCTYPE html><html> <head> <meta charset=...原创 2018-10-19 11:27:46 · 10608 阅读 · 4 评论 -
彻底理解vue的钩子函数,vue的生命周期理解,什么是vue的生命周期,钩子函数
官方图(官方的图大家总是理解不了): 使用vue框架,需要在合适的时机做合适的事情,了解了vue对象的生命周期和钩子函数,才能知道,哪些事情应该咋哪个函数里做。一、vue的生命周期的理解生命周期用人举例说明:生命周期就是一个人的一生,此处我需要说的没有人情一点(哈哈)。从人的出生,到成长,到工作,到死亡,就是人的一生,也叫一个人的生命周期。 2....原创 2018-10-17 22:32:02 · 23102 阅读 · 16 评论