vue
文章平均质量分 73
vuecli-vue-vue-webpack
song854601134
这个作者很懒,什么都没留下…
展开
-
vue的prop 以及 watch使用一些问题
文章目录prop赋值给 datavue的props赋值给data的解决问题`还有一点 如果子组件props 接收的prop 是基本数据类型。父组件的赋值给prop的值改变,不会使子组件的值改变 `prop赋值给 data问题:当组件props里的某个值(a)(a值要是对象引用类型的数据)赋给了data对象里的某个值 (b); 当a值发生了变化,b值还是最开始的a值, 但实际应该是b值是最新的a值例如:<template> </template> <scri原创 2022-04-14 23:12:58 · 2235 阅读 · 0 评论 -
vue2和vue3插槽使用对比
文章目录vue3具名插槽一个不带 `name` 的 slot 出口会带有隐含的名字“default”。具名插槽的缩写作用域插槽element-plus #default="AAA"缩写形式:独占默认插槽的缩写语法解构插槽(也即独占插槽的结构插槽)vue2具名插槽作用域插槽vue3具名插槽<slot name="header" > 对于这样的情况,`` 元素有一个特殊的 attribute:name。通过它可以为不同的插槽分配独立的 ID,也就能够以此来决定内容应该渲染到什么地方:&原创 2022-03-19 16:32:49 · 1676 阅读 · 0 评论 -
Vue笔记(天禹)后四章
文章目录4. Vue中的Ajax4.1. Vue脚手架配置代理4.2. GitHub用户搜索案例4.3. vue-resource4.4. slot插槽4.4.1. 默认插槽4.4.2. 具名插槽4.4.3. 作用域插槽5. Vuex5.1. 理解Vuex5.1.1. Vuex是什么5.1.2. 什么时候使用Vuex5.1.3. Vuex工作原理图5.2. 求和案例5.2.1. 使用纯vue编写5.2.2. 搭建Vuex环境5.2.3. 使用Vuex编写5.3. getters配置项5.4. 四个map方法原创 2021-11-09 12:09:00 · 508 阅读 · 0 评论 -
Vue笔记(天禹) 前三章
文章目录1. Vue核心1.1. Vue简介1.1.1. 官网1.3. 模板语法1.7. Vue中的数据代理1.8. 事件处理1.8.1. 事件的基本用法1.8.2. 事件修饰符1.8.3. 键盘事件1.9. 计算属性1.10. 监视属性1.10.1. 监视属性基本用法1.10.2. 深度监视1.10.3. 监视属性简写1.10.4. 监听属性 VS 计算属性1.11. 绑定样式1.12. 条件渲染1.13. 列表渲染1.13.1. 基本列表1.13.2. key的作用与原理1.13.3. 列表过滤1.13原创 2021-11-09 12:04:44 · 393 阅读 · 0 评论 -
开发中vue3 使用心得
中直接使用 await来等待异步函数,编译器会自动给 setup函数带上 async。但是一旦使用了await ,父组件中需要使用。这样可以确保 模板上渲染是接口返回的数据,或者传递给子组件的是接口返回的数据。原创 2023-06-14 12:05:00 · 254 阅读 · 0 评论 -
开发中积累的vue知识点
3.由于js中函数没有重载的这一说。所以在vue的methods中。下面只是定义了一个函数。因为底下的那个函数把上面的函数给覆盖了。自定义事件组件实例销毁后,原生的dom事件仍可以被调用,但是我们的自定义事件不会被调用了。原生的dom事件,比如@click加上的事件。虽然原生的dom事件仍可以调用,但是这些事件带来的数据更新变化不会在同步到vue页面上了。全局事件总线vuex中模块化+namespaced写了namespaced:true,路由router起别名的引用使原创 2022-06-14 17:03:28 · 1604 阅读 · 0 评论 -
vue2和vue3的v-model用法区别
vue2中 可以给v-model在自定义组件上使用 vue3使用@update:modelVlaue来代替了vue2的v-model原创 2023-03-02 17:27:00 · 339 阅读 · 0 评论 -
Vue2.6.0 框架使用总结
Vue2.6.0 框架使用总结自定义事件不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的:<!-- 没有效果 --><my-component v-on:my-event="doSomething"></my-component>原创 2022-04-05 12:00:56 · 684 阅读 · 0 评论 -
Vue3 解构赋值失去响应式引发的思考
虽然无敌,但是他也有本身的局限,从而产生一些我认为的弊端(其实就是不符合js语言的自然书写方式,有的人觉得就是个特殊写法,他不属于弊端)以上就大致解释了为什么解构赋值,可能会失去响应式,我猜的文档中懒得解释其中缘由,索性就定了个规矩,您啊!如此依赖,就能实现响应式了,大家可以发现,这个obj的整个对象就被拦截了,但是你发现对象在嵌套深一层。包裹起来,其实道理是一样的,也是变量赋值的原因,在这里我们就不再赘述!我们知道解构赋值,区分原始类型的赋值,和引用类型的赋值,原创 2022-10-12 15:42:00 · 2231 阅读 · 0 评论 -
Vue3快速上手
什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。原创 2022-08-18 16:49:07 · 104 阅读 · 0 评论 -
require和import的区别
文章目录2. 不同端(客户端/服务器)的使用限制3. require/exports 是运行时动态加载,import/export 是静态编译4.require/exports 输出的是一个值的拷贝,import/export 模块输出的是值的引用5. 用法不一致(1). require/exports 的用法(2). import/export 的写法(3). import/export 不能对引入模块重新赋值/定义(4). ES6 模块可以在 import 引用语句前使用模块,CommonJS 则需要先原创 2022-04-29 08:43:22 · 592 阅读 · 0 评论 -
vuejs中v-show和v-if的区别
vuejs中v-show和v-if的区别是什么区别:1、“v-if”是动态的向DOM树内添加或者删除DOM元素,“v-show”是通过设置DOM元素的display样式属性控制显隐;2、编译过程不同;3、编译条件不同;4、“v-if”的切换消耗高,“v-show”的初始渲染消耗高等等。v-if与v-show的区别v-if指令与v-show指令都可以根据值动态控制DOM元素显示隐藏,v-if和v-show属于Vue的内部常用的指令,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。描述原创 2022-04-20 16:01:49 · 811 阅读 · 0 评论 -
vue-cli3.0-环境变量和模式配置
vue-cli3.0入门-环境变量和模式配置(二)我们在开发项目过程中,正常情况下会有本地开发环境,测试线环境,线上正式线环境等,当然不同公司会有点差别,具体情况具体玩吧,不同环境的配置会有所不同,比如我们服务器地址,接口地址等等。所以我们要区分,那就需要我们配置境变量和模式,来管理。关于环境变量的配置,在此,自己也是简单做一下笔记,只为方便以后查看,虽然官方有文档:部分内容也会拿过来记录,下面是自己之前配置的一些笔记整理。一、环境变量的四种方式在官方文档中,CLI3.0有四种方式来指定环境变量:原创 2022-04-20 13:52:31 · 3758 阅读 · 0 评论 -
hash和history区别&前端路由和后端路由比较
文章目录后端路由简介前端路由1. hash 模式2. history 模式项目中的场景两种模式各自的特点hashhistory存在一个问题总结后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样http://www.xxx.com/login大致流程可以看成这样:浏览器发出请求服务器监听到80端口(或443)有请求过来,并解析url路径根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等)浏览器根据数据包的 Cont原创 2022-03-18 14:02:10 · 768 阅读 · 0 评论 -
this.$message
前言在平时的开发过程中,我们总是先写好一个组件,然后在需要的页面中用 import 引入即可,但如果是下面这种类型的组件呢????image上面这种类型的浮层提示有一个很大的特点,就是使用频率特别高,几乎每个页面都会用到它,于是乎我们就要在每个页面中去引入该组件,并且在每个页面都得通过一个变量来控制它的显隐,这显然不是我们想要的????。。。那我们想要的是什么样呢?????用过一些 UI 框架的同学们应该知道有这样一种用法:this.$message({ duration: 3000,原创 2022-01-27 21:52:41 · 8687 阅读 · 1 评论 -
Vue.use到底是什么鬼?
我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?不妨来看个究竟。其实这些轮子都可以称之为插件,它的功能范围没有严格的限制,一般包含如下几种:添加全局方法或者属性。如: vue-custom-element添加全局资源:指令/过滤器/过渡/组件等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。一个库,提供自原创 2022-01-27 21:23:23 · 1490 阅读 · 0 评论 -
Vue响应式原理学习总结4:最终章
终于到了本系列的最后一篇文章了,这篇文章将会做一个简单的模板编译器,并结合上一篇文章的渲染watcher来实现一个小demo。由于observe,Observer,defineReactive三个文件会互相引用,因此我把他们整合到了一个文件中,便于使用,并且也符合了vue源码的结构项目地址:gitee系列文章地址:基本原理数组的处理渲染watcherMVVM类我们会像vue一样,建立一个类,叫做MVVM,接收一个配置参数:class MVVM { constructor(opt原创 2021-12-26 21:46:04 · 382 阅读 · 0 评论 -
Vue响应式原理学习总结3:渲染watcher
终于到了渲染watcher,看完这篇文章的内容后,大家就可以实现一个响应式系统了,并且能够在页面上有所体现。源码地址:gitee系列文章:1. 基本原理2. 数组的处理4. 最终章Vue项目总结系列文章:基础架构登录与权限控制持续更新中。。。什么是渲染Watchervue中有多种watcher,我们之前实现的watcher类似于Vue.$watch,当依赖变化时执行回调函数。而渲染watcher不需要回调函数,渲染watcher接收一个渲染函数而不是依赖的表达式,当依赖发生变化时,原创 2021-12-26 21:44:42 · 701 阅读 · 0 评论 -
Vue响应式原理学习总结2:数组的处理
项目地址:gitee系列地址:1:基本原理3:渲染watcher4:最终章1. 为什么要对数组特殊处理上一篇文章讲到了vue数据响应式的基本原理,结尾提到,我们要对数组进行一个单独的处理。很多人可能会有疑问了,为什么要对数组做特殊处理呢?数组不就是key为数值的对象吗?那我们不妨来尝试一下function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { get() { console.l原创 2021-12-26 21:43:06 · 447 阅读 · 0 评论 -
Vue响应式原理学习总结1:基本原理
同学们,你是否想学习Vue的数据响应式原理而无从下手呢?是否有过被复杂的源码教程劝退的经历呢?如果你和我一样,做过一个项目之后想深入原理的话,恭喜你,你来对地方了。这个系列文章将从纯粹的Vue响应式原理出发,没有其他因素的干扰,带领大家实现一个自己的响应式系统。友情提示:因为我们的代码会经过多个版本的修改,所以我希望大家在看文章的时候能够把涉及到的代码手敲一遍,这样能够帮助理解。项目地址:gitee系列地址:2:数组的处理3:渲染watcher4:最终章0.前言数据模型仅仅是普通的 J原创 2021-12-26 21:40:36 · 549 阅读 · 0 评论 -
Vue2.x-虚拟DOM和diff算法
Vue2.x-虚拟DOM和diff算法(笔记)源码链接https://github.com/wanghuan19961020/Vue2.x-Study-NotesVue2.x-虚拟DOM和diff算法(笔记)简述diff 算法 以装修房子为例,如果我们仅需要在客厅新添一座沙发或者将卧室的床换个位置。那么将整个房子重新翻修显然是不切实际的,我们通常的做法是在原先装修的基础上做微小的改动即可。 对于 DOM 树来讲,也是同样的道理,如果仅仅是新增了一个标签或者修改了某一个标签的属性或内原创 2021-12-25 22:46:14 · 106 阅读 · 0 评论 -
如何理解vue中的key
如何理解vue中的key?就目前所了解的情况,key的作用有以下这些。v-for遍历时,用id,uuid之类作为key,唯一标识节点加速虚拟DOM渲染响应式系统没有监听到的数据,用+new Date()生成的时间戳作为key,手动强制触发重新渲染场景一大同小异司空见惯,场景二是下面这样的:<div :key="rerender"> <span>Hello Vue.js !</span> <complexComponent :propOb原创 2021-12-25 17:06:32 · 373 阅读 · 0 评论 -
Vue笔记(天禹)
Vue学习笔记(尚硅谷天禹老师讲解)1. Vue核心1.1. Vue简介1.1.1. 官网英文官网中文官网1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者:尤雨溪1.1.3. Vue的特点遵循MVVM模式编码简洁,体积小,运行效率高,适合移动/PC端开发它本身只关注UI,可以引入其它第三方库开发项目1.1.4.与其他JS框架的关联借鉴 Angular 的模板和数据绑定技术借鉴 React 的组件化和虚拟DOM技术1.1.5. Vue原创 2021-11-08 16:48:04 · 2417 阅读 · 1 评论 -
vue--使用gzip压缩js和css
简书原创 2022-02-13 13:22:43 · 476 阅读 · 0 评论 -
Vue源码解析之Template转化为AST
Vue源码解析之Template转化为AST什么是AST在Vue的mount过程中,template会被编译成AST语法树,AST是指抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式。Virtual DomVue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路。Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为rende原创 2021-12-24 20:19:54 · 408 阅读 · 0 评论 -
devServer.publicPath、output.publicPath 和 output.path 的意义的阐述
devServer.publicPath、output.publicPath 和 output.path 的意义的阐述经过一番测试,终于猜出了这几个字段合乎我测试结果的意义,暂时解决了它们给我带来的困惑,我打算先从 devServer.publicPath 这个字段说起,这样我觉得比较好讲明白一点儿,然后再说 output.publicPath 这个牵扯部分稍微多一点的字段,最后以最简单的 output.path 收尾。devServer.publicPath我们知道 devServer 这个字段只在原创 2022-05-13 10:53:10 · 1124 阅读 · 0 评论 -
vue-cli中理不清的assetsSubDirectory 和 assetsPublicPath
背景一般情况下,我们借用 vue-cli之力安装好所有依赖后,我们就可以愉快的板砖了。但是也经常会遇到一写问题,比如assetsSubDirectory 和 assetsPublicPath两个兄弟有时候把我搞得死去活来的,下午刚好有点空,我就去好好修理了他俩一会儿(其实是被修理)。经过无数次的,config/index.js 里面的 build配置,然后无数次的 npm run build ,鄙人得出了以下之间,如有异议,还请多多指教。基本的意义index: path.resolve(__dir原创 2021-11-17 20:28:21 · 1966 阅读 · 0 评论 -
chainWebpack长用配置方式
chainWebpack长用配置方式//vue.config.jsmodule.exports={ chainWebpack:config=>{ }}1.输入输出设置module.exports = { chainWebpack: config => { // 清理所有默认入口配置 config.entryPoints.clear(); // 增加一个入口main config.entry("main").add("./src/main.原创 2021-11-15 18:08:30 · 9214 阅读 · 1 评论 -
vue配置之-dev-server.js
本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境由于这是一个系统的配置文件,将涉及很多的模块和插件,所以这部分内容我将分多个文章讲解,请关注我博客的其他文章关于注释当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看上代码// 导入check-versions.js文件,并且执行导入的函数,用来确定当前环境no原创 2021-10-03 20:55:16 · 869 阅读 · 0 评论 -
vue配置之-webpack.prod.conf.js
本文系统讲解vue-cli脚手架build目录中的webpack.prod.conf.js配置文件这个配置文件是webpack生产环境的核心配置文件由于这是一个系统的配置文件,将涉及很多的模块和插件,所以这部分内容我将分多个文章讲解,请关注我博客的其他文章关于注释当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看/ 下面是引入nodejs的路径模块var path = require('path')// 下面是utils工具配置文件,主要原创 2021-10-03 20:54:26 · 931 阅读 · 0 评论 -
vue配置之webpack.base.conf.js
webpack.base.conf.js的用处:1.此配置文件是vue开发环境的wepack相关配置文件,主要用来处理各种文件的配置2.关于注释当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看// 引入nodejs路径模块var path = require('path')// 引入utils工具模块,具体查看我的博客关于utils的解释,utils主要用来处理css-loader和vue-style-loader的var utils = require(原创 2021-10-03 20:53:43 · 5534 阅读 · 0 评论 -
vue配置文件之-build.js
//Webpack 2.x// webpack.config.jsvar ExtractTextPlugin = require("extract-text-webpack-plugin")module.exports = { // other options... module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: {原创 2021-10-03 20:52:53 · 1226 阅读 · 0 评论 -
vue配置文件之-utils.js
// 引入nodejs路径模块var path = require('path')// 引入config目录下的index.js配置文件var config = require('../config')// 引入extract-text-webpack-plugin插件,用来将css提取到单独的css文件中// 详情请看(1)var ExtractTextPlugin = require('extract-text-webpack-plugin')// exports其实就是一个对象,用来导出原创 2021-10-03 20:51:59 · 1430 阅读 · 0 评论 -
vue-cli的安装及版本查看更新
vue-cli的安装及版本查看更新vue-cli安装npm install vue-cli -gvue-cli的版本查看vue -V*vue-cli的3.0+以后使用的不是vue-cli了*,如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装3.0的话就需要使用新的npm install @vue/cli -g如果原来已经安装了vue-cli的话需要先卸载原来的安装npm uninstall vue-cli -gvue/cli4的安装与使用1:若你已安装过vue原创 2021-09-22 21:04:17 · 2187 阅读 · 0 评论