全部标签

vue.js

Vite 和Webpack 的核心对比？

全方位对比vite和webpack 一. webpack原理 1. webpack打包过程 1.识别入口文件 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖） 3.webpack做的就是分析代码。转换代码，编译代码，输出代码 4.最终形成打包后的代码 2. webpack打包原理 1.先逐级递归识别依赖，构建依…
前端技术
- 677
- 0
青梅博客21年9月25日
2021年web前端面试集锦

一. HTML、CSS相关 html5新特性、语义化语义化标签： header nav main article section aside footer 语义化意味着顾名思义，HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。语义化的优点有: 代码结构清晰，易于阅读，利于开发和…
web前端
- 1.1k
- 0
青梅博客21年8月1日
vue 中使用 v-bind 与 v-on 来实现 v-model 双向绑定？

Vue — 使用v-bind与v-on实现v-model v-model其实是一个语法糖，他的背后本质包含两个操作： 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件实现步骤如下： ① 通过v-bind实现，若修改app.message，则使得网页显示的input中的value也发生改变。 <body> <div id="app&q…
VUE
- 777
- 0
青梅博客21年6月11日
vue指令和用法？

vue基本指令本质就是自定义属性 Vue中指令都是以 v- 开头 v-cloak 防止页面加载时出现闪烁问题 v-text v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题如果数据中有HTML标签会将html标签一并输出注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值 <div id="app&q…
VUE
- 1.7k
- 0
青梅博客21年6月10日
Vue 组件间通信六种方式

前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如prop…
VUE
- 705
- 0
青梅博客21年3月19日
vuex最简单、最详细的入门文档

我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :  <template> <div> <a href=…
VUE
- 697
- 0
青梅博客21年3月19日
Vue3.0 起步快速搭建项目系列一

常常说要开始学习，却总是止于嘴。一起开始学习吧 . . . 1 安装脚手架 npm install -g @vue/cli # OR yarn global add @vue/cli 2 检查版本 Vue CLI v4.5.7 vue -V 3 搭建项目 vue create vue3.0 ? Please pick a preset: (Use arrow keys) //请选择预选项 &…
VUE
- 983
- 0
青梅博客21年2月28日
前端工具VScode+NodeJs+Git下载配置

下载vscode需要用到node.js和git 一、安装NodeJs 1.下载Nodejs Node.js官网下载地址:https://nodejs.org/en/download/ Node.js历史版本下载地址：https://nodejs.org/zh-cn/download/releases/ tips:脚本语言需要一个解析器才能运行，JavaScript是脚本语言，在不同的位置有不一样的…
前端工具
- 2k
- 0
青梅博客20年8月11日
H5用axios代替Ajax调取服务器接口

功能需求：普通ajax调取后台接口需要写很多代码，且不好统一管理token 所需材料： HTML页面 , Config.js , Api.js 正文部分：第一步：在a.html引入vue.js, axios文件, a.js, config.js 和 api.js,路径自己配好 <script src="https://cdn.bootcss.com/vue/2.5.17-be…
前端技术
- 988
- 0
青梅博客20年8月11日
Vue 组件

什么是Vue组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。注册 vue.component全局注册注册或获取全局组件。注册还会自动使用给定的id设置组件的名称 // 注册组件，…
VUE
- 906
- 0
青梅博客20年8月9日
从0到1搭建webpack2+vue2自定义模板详细教程

前言 webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用的最多，不过对于很多人来说，vue-cli 的配置还是过于复杂，对于我们了解细节实现不是很好，所以想自己从零开始搭建一个模板工程，也顺便重新认识一下webpack和vu…
前端技术
- 1k
- 0
青梅博客20年8月8日
Vue.nextTick 的原理和用途

一、原理 1.异步说明 Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。 2.事件循环说明简单来说，Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。 eg: 图解：事件循环：第一个tick（本次更新循环） 1.首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程…
VUE
- 830
- 0
青梅博客20年8月8日
vuejs-指令详解

文章目录 v-if v-show v-else v-model v-repeat 数组变动检测内置过滤器 1.filterBy(0.12版本) 2.orderBy(0.12版本) v-for v-text v-html v-bind v-on v-ref v-el v-pre v-cloak v-if v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为fal…
VUE
- 912
- 0
青梅博客20年6月24日
vue-router嵌套子路由实际使用

前端路由的定义在spa流行之前，前端路由是没有的；而像java之类的后台语言很早就有了，后端路由一般就是定义一系列的访问地址规则，路由引擎根据这些规则匹配并找到对应的处理页面，然后将请求转发给页面进行处理。在spa应用中，前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种做法，一是在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航；二是…
VUE
- 826
- 0
青梅博客20年6月24日
前端Js框架汇总

概述：随着互联网飞速发展的时代，技术更新迭代的速度也在加快。看着Java、Js、Swift在各领域心花路放，也是煞是羡慕。寻了寻.net的消息，也是振奋人心，.net core 1，mono，xamarin等等，但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品，产品又在不同程度的推进着技术的演进。 Web、无线、物联网、VR、PC从不同方向推进着技术的融合与微创新。程序员在…
javascript
- 1.1k
- 0
青梅博客20年6月7日
vue-cli3项目搭建配置以及性能优化

项目初始化注意：安装前请确保有安装node.js，并且node>=8.9 全局安装vue　 npm install -g @vue/cli 如果之前安装了vue旧版本，查看vue --version 创建项目 vue create vue-cli3-init(项目名) 注：名称不能采用驼峰 vue-cli3也可以采用UI面板进行配置，相对比较方便，目前先写命令行创建，后续再加上面板创建。 …
VUE
- 760
- 0
青梅博客20年5月20日
vue-cli3项目搭建配置以及性能优化

vue-cli3项目搭建配置以及性能优化在之前的开发中主要用的是vue-cli2，最近空闲时间比较多，接下来有新项目，本着偷懒的本能，自己打算搭建一个基础包以备后期开发应用，并对其进行性能优化和配置搭建整个过程如下：初始化项目修改目录结构多环境运行 axios封装模块化vuex 全局引用样式移动端适配配置常用util 引入第三方UI框架配置vue.config.js文件 vue项…
VUE
- 813
- 0
青梅博客20年5月19日
Vue PC端UI框架

1. Element Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库中文文档 | github地址 2. iView 一套基于 Vue.js 的高质量UI 组件库中文文档 | github地址 3. vue-element-admin vue-element-admin是基于 Vue2.0，配合使用 Element UI 组件库的一个前端管理后台集成解决方…
VUE
- 908
- 0
青梅博客20年5月18日
Vue最常用的第三方插件

1. Vue.js devtools 用于开发调试Vue.js的一个必备插件。可以在Chrome中的扩展程序中直接安装，也可以本地文件的方式安装。 2. nprogress页面顶部进度条当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度，并在又上角有个蓝色loading的动画。一般情况下切换到目标路由时，在目标路由中的生命周期中可能会做一些处理（如请求接口等），这些操作会有一…
VUE
- 802
- 0
青梅博客20年5月3日
Vue移动端 Web App 点击穿透问题解决方案

描述在近期的一个移动端项目中，有一个页面需要有弹框提示，并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。代码如下： this.myScroll = new IScroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: tr…
VUE
- 835
- 0
青梅博客20年5月2日
针对Vue3.0 Beta版本新特性知识点汇总

前言在 4 月 21 日晚，Vue 作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展。以下是直播内容整理想学Vue的小伙伴们，小编这几个月陆陆续续收集整理了几十篇关于Vue的学习相关文章以及项目开发中的总结，相关Vue学习资料文章请见本篇文章底部 1. 全新文档RFCs Vue.js 3.0 Beta发布后的工作重点是保证稳定性和推进各类库集成所有的进度和文档都将在全新R…
VUE
- 3.2k
- 0
青梅博客20年4月22日
在使用vue的项目中对于性能优化的处理

1.图片优化 ①. 图片大小优化，部分图片使用WebP（需要考虑webp兼容性）在线生成，如智图、又拍云 gulp生成，gulp-webp或gulp-imageisux canvas生成 ②. 减少图片请求，使用雪碧图在线生成：sprites Generator、腾讯的gopng、spriteme 代码生成：gulp.spritesmith或者sass的compass 2.页面性能优化图片或…
VUE
- 878
- 0
青梅博客20年4月17日