VUE
文章平均质量分 84
前端人
专注前端开发技术分享,助力初学者更好成长
展开
-
面试被问及 hash 与 history 的区别该怎么回答?
为什么推荐使用 hash 模式?创建项目时,vue-router 默认使用 hash 模式,设置模式的时候到底该使用hash还是history模式呢?先了解它们的实现原理,搞清楚之间的区别,就知道什么时候该选择什么模式了。一、实现原理hash 原理hash 通过监听浏览器 onhashchange 事件变化,查找对应路由应用。通过改变 location.hash 改变页面路由。history 原理利用 html5 的history Interface 中新增的 pushS原创 2021-12-03 09:29:33 · 1512 阅读 · 0 评论 -
什么,你还使用 webpack?别人都在用 vite 搭建项目了
一、vite 到底是干嘛的?vite 实际上就是一个面向现代浏览器,基于 ES module 实现了一个更轻快的项目构建打包工具。vite 是法语中轻快的意思。vite 的特点:1、轻快的冷服务启动。vite 是面向现代浏览器的,浏览器支持 ES6 的 imports属性,利用浏览器解析 imports,在服务端按需编译返回,不进行打包。所以运行速度较快。2、开发中的热更新。监听项目代码,有改动时,会立即重新运行。3、按需进行编译,不会刷新全部的DOM。vite只需要在浏览器请求源码原创 2021-10-25 09:27:09 · 957 阅读 · 0 评论 -
一文让你彻底搞懂 vuex,满满的干货
本篇文章,内容比较多,建议收藏!官方解释:Vuex 是专为 vue.js 应用程序开发的状态管理模式。一、Vuex 是做什么呢?什么是状态管理?简单地讲:可以把多个组件都需要的变量全部存储到一个对象里面,然后这个对象放在顶层的 vue 实例中,让其他组件可以使用。这样多个组件就可以共享这个对象中的所有属性。有些同学想着,这么简单我们自己在vue顶层定义一个对象不就可以实现共享了?我们发现虽然数据可以获取到,但是如果在某个组件内,数据改变了,那我们如何修改数据,让此数据在其他组件内保持最新原创 2021-10-22 14:36:48 · 420 阅读 · 0 评论 -
前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)
上一篇文章《前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)》介绍了什么是脚手架,以及Vue-cli 2.x如何创建项目,创建的项目结构。这篇文章介绍 Vue-cli 3.x 如何构建项目?一、Vue-cli 2 与 Vue-cli 3的区别vue-cli 3 是基于 webpack 4 打造的,vue-cli 2 还是 webpack 3。 vue-cli 3 的设计原则是 “0配置”,移除 build 和 config 等配置目录。 vue-cli 3 提供了 vue ui 命令,提原创 2021-10-09 09:45:05 · 165 阅读 · 0 评论 -
前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)
一、脚手架认识和使用前提CLI 是什么意思?CLI -- Command-Line Interface 命令行界面,俗称脚手架。脚手架就是一个大概的框架,是建筑学上的一个概念。1.1、什么是Vue-cli?Vue-cli 是官方发布 vue.js 项目脚手架,使用 Vue-cli 可以快速搭建 vue 开发环境,以及对应的 webpack 配置。1.2、使用脚手架的前提有哪些?1、安装 node.js,同时安装 npm。npm(Node Package Manager原创 2021-10-08 09:05:03 · 353 阅读 · 0 评论 -
Vue应用——关于nextTick
一、什么是 Vue.nextTick()返回目录 关于 nextTick,其实官网上面讲的蛮明白的,详情请看:Vue.nextTick( [callback, context] )语法Vue.nextTick([callback, context])参数{Function} [callback]:回调函数,不传时提供promise调用 {Object} [context]:回调函数执行的上下文环境,不传默认是自动绑定到调用它的实例上。用法 在下次 DOM 更新循环结束转载 2021-10-01 08:00:00 · 305 阅读 · 2 评论 -
使用 Vue 脚手架,为什么要学 webpack?
先问大家一个很简单的问题:vue init webpack prjectName 与 vue create projectName 有什么区别呢?它们是 Vue-cli 2 和 Vue-cli3 创建项目的两个命令,之所以两个命令不同,根本原因是 Vue-cli2 是基于webpack 3,而 vue-cli3 是基于 webpack 4 的。所以我们先介绍 webpack 是如何管理项目的,如何把项目中 js、css、html等是如何压缩转换文件?然后学习 vue-cli 2、vue-cli原创 2021-09-29 09:16:25 · 3133 阅读 · 0 评论 -
全面分析 Vue 的 computed 和 watch 的区别
一、computed介绍computed 用来监控自己定义的变量,该变量在 data 内没有声明,直接在 computed 里面定义,页面上可直接使用。//基础使用{{msg}}<input v-model="name" /> //计算属性 computed:{ msg:function(){ return this.name }}在输入框中,改变 name 值得时候,msg 也会跟着改变。这是因为 computed 监听自己的属性 msg,发现 name原创 2021-09-26 08:19:19 · 552 阅读 · 0 评论 -
大白话透彻讲解 Promise 的使用,读完你就懂了
一、为什么使用Promise?我们知道 js 执行的时候,一次只能执行一个任务,它会阻塞其他任务。由于这个缺陷导致 js 的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以使用回调函数执行。常见的异步模式有以下几种:定时器 接口调用 事件函数// setTimeout 示例function callBack(){ console.log('执行完成')}console.log('before setTimeout')setTimeout(callBack,1000)//原创 2021-09-25 14:35:58 · 1867 阅读 · 0 评论 -
传说中 VUE 的“语法糖”到底是啥?
一、什么是语法糖?语法糖也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法,在不影响功能的情况下,添加某种简单的语法也能实现效果,这种语法对计算机没有任何影响,但是对于程序员更方便,通常增加的语法糖能够增加程序员的可读性,减少出错的机会。使用语法糖可以简化代码,更便于程序员开发。二、VUE中语法糖有哪些?1、最常见的语法糖 v-model使用 v-model 可以实现数据双向绑定,但是如何实现的呢?v原创 2021-09-24 12:10:37 · 5354 阅读 · 4 评论 -
一文让你彻底搞懂 vue-Router
路由是网络工程里面的专业术语,就是通过互联把信息从源地址传输到目的地址的活动。本质上就是一种对应关系。分为前端路由和后端路由。后端路由:URL 的请求地址与服务器上的资源对应,根据不同的请求地址返回不同的资源。前端路由:在单页面应用中,根据用户触发的事件,改变URL在不刷新页面的前提下,改变显示内容。1、前端路由实现原理URL 的hash模式改变 hash 值的时候,#是一个位置标识符,可以进行页面内的位置跳转,并不会刷新页面。通过 location.hash 改变页面的..原创 2021-09-23 11:12:18 · 1804 阅读 · 2 评论 -
重学VUE——vue 常用指令有哪些?
一、什么是指令?在 vue 中,指令以 v- 开头,是一种特殊的自定义行间属性。指令属性的预期值是一个表达式,指令的职责就是:表达式的值改变时,相应地将某些行为应用到DOM上。只有v-for是一个类外,后边跟的不是表达式。一个指令能够接收一个参数,在指令名称之后以冒号表示。例如:<a v-bind:href="url">vue官网</a>添加指令后,url 会被当作变量来解析。二、常用指令2.1、v-model 双向绑定数据v-model 指令可以用在原创 2021-09-22 11:47:00 · 560 阅读 · 0 评论 -
前端框架VUE——数据绑定及模板语法
一、数据绑定Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:<div id="app"> {{ msg }}</div>//实例化代码var app = new Vue({ el: '#app', data: { msg: '欢迎学习Vue' }}){{ msg }} 为什么会变成 msg 的值?vue 使用基本 html 的模板语法,允许开发者声明式地将DOM 绑定至底层 vue 实例的数据,所有 vue原创 2021-09-18 12:02:22 · 453 阅读 · 0 评论 -
前端框架VUE——安装及初始化
本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容。告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容。一、安装方式vue 是一种前端框架,所以使用前我们必须安装,有三种安装方式分别为:1.1、使用 script 标签引入在 vue 官方文档,我们可以下载开发版本和生产版本两个 js 文件,生产版本是经过压缩,删除注释,警告等,比开发版本文件要小,下载之后直接通过 script 标签引入,Vue 会被注册为一个全局变量。//使用<s原创 2021-09-16 09:39:10 · 408 阅读 · 0 评论