![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 65
Vue2自学,同时也整理点开发过程中遇到的问题
如果时光可以倒流,我会选择在家陪伴家人
这个作者很懒,什么都没留下…
展开
-
v-for遍历Map分析
目录1.起因2.Map分析2.1.for (let key in Map)遍历Map2.2.for (let value ofMap)遍历Map2.3.难道Map里面就是数组?3.v-for遍历Map1.起因我想用Vue2的v-for去遍历Map,结果无法获取想要的数据,因此,正好趁这次机会记录下;2.Map分析2.1.for (let key in Map)遍历Mapfor (let key in Map):并没有在控制台发现console.log打印语句.原创 2021-10-13 17:41:51 · 3731 阅读 · 2 评论 -
import-from
1.import-from可以导入什么文件?通过import ... from ...导入时,from后的来源可以是js,vue,json,这个是在webpack.base.conf.js中extensions设置的,该属性值默认是js、vue、json;注意:1.js和vue是可以省略后缀的;2.json不可以省略后缀;3.当.vue与.js同时存在于同一个文件夹下,则import的导入优先级是:js > vue;2.当from后面是文件夹时第一步:查看该文件夹下面是否存原创 2021-09-03 14:53:42 · 540 阅读 · 0 评论 -
关于$refs知识点重读
目录2.重温Vue官网:组合式 API2.1.为什么会出现组合式 API?2.2.如何使用组合式 API?2.2.1.新增setup组件选项2.2.2.带ref的响应式变量2.2.3.在setup内注册生命周期钩子2.2.4.watch响应式更改2.2.5.独立的computed属性2.2.6.其他3.重温Vue官网:响应性3.1.什么是响应性3.2.Vue如何知道哪些代码在执行3.3.Vue如何跟踪变化3.4.声明响应式状态2.重温Vue官网原创 2021-08-25 14:25:33 · 225 阅读 · 0 评论 -
关于this.$refs.xxx为undefined的问题
1.问题描述2021年08月23日在开发的时候,遇见一个问题,我想获取<el-upload/>对象,然后把该对象的fileList属性置为空;当我用console.log分别去打印this.$refs、this.$refs.querForm、this.$refs.querForm.uploadfile、this.$refs.uploadfile时却打印不同的结果: this.$refs VueComponent,包含uploadfile原创 2021-08-25 14:24:17 · 1354 阅读 · 0 评论 -
Vue的data属性中自定义方法访问域问题
在这里,Vue的data属性中,我定义了checkForm属性,该属性有一个bgntime_end属性,该属性的validator属性值是一个函数,一开始的时候,我通过function来编写代码,但是,我在这个function无法访问$data属性中内容,里面的this指向了该function对象;后来我把function改成箭头函数之后,在箭头函数中通过this就可以访问到$data属性了;问题是,为什么会这样呢?官网解释地址:https://www.w3school.com.c...原创 2021-08-18 10:15:35 · 585 阅读 · 0 评论 -
NPM总结
基本概念NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:①允许用户从NPM服务器下载别人编写的第三方包到本地使用。②允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。③允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。全局安装与本地安装npm 的包安装分为本地安装(local)、全局安装(global)两种;本地安装①将安装包放在 ./node_modules 下(运行 npm 命令时原创 2021-08-14 10:34:35 · 89 阅读 · 0 评论 -
关于element-ui框架中rule的总结
成果个人总结在自定义validator的自定义函数中,无论是校验成功,还是失败,都必须调用callback函数,这样,通过回调callback函数,才能触发function(message,field)这个回调参数,进而才能触发callback;官网https://github.com/yiminghe/async-validator参考链接https://zhuanlan.zhihu.com/p/264788696可以看看这个博主的《async-valid...原创 2021-08-14 10:24:37 · 305 阅读 · 0 评论 -
Vue教程-10-Vue CLI重读官网
目录0.为什么要写这个文章?1.Webpack1.1.概念1.2.基本概念1.2.1.入口(entry)1.2.2.输出(output)1.2.3.loader1.2.4.插件(plugin)1.2.5.模式(mode)1.2.6.浏览器兼容性(browser compatibility)1.2.7.环境(environment)1.3.配置(Configuration)1.4.模块解析(Module Resolution)1.4.1.webpack原创 2021-03-11 10:18:02 · 551 阅读 · 0 评论 -
Vue教程-9-重读官网后的感悟
目录0.前言1.为什么要有计算属性computed?2.为什么是计算属性computed,而不是方法methods?3.计算属性computed与侦听器watch4.当v-bind绑定HTML Class属性时5.当v-bind绑定HTML Style属性时6.v-bind:style与浏览器引擎前缀6.1.CSS 前缀6.2.JS接口前缀6.3.JS属性和方法前缀6.4.v-bind:style与浏览器引擎前缀7.v-if与条件渲染8.v-for与列表渲原创 2021-03-04 10:40:25 · 296 阅读 · 1 评论 -
Vue教程-8-axios
目录简介安装返回效果代码演示全局配置Axios实例封装拦截器简介Axios支持:XMLHttpRequests、node.js发送请求、Promisse、拦截请求和响应、转换请求和响应数据,用法有:axios()axios.request()axios.get()axios.delete()axios.head()axios.post()axios.put()axios.patch()axios.all()安装npm .原创 2020-11-10 17:09:20 · 93 阅读 · 0 评论 -
Vue教程-7-Vuex
概念Vuex是一个专为Vue.js应用程序而开发的状态管理模式,其采用集中式存储管理应用的所有组件状态,并以相应的规则来保证状态以一种可预测的方式发生变化,同时Vuex也集成到Vue的官方测试工具devtools extension,提供了一系列对应的测试功能;通俗来讲,就是N个组件共享同一个变量,类似于多线程同步的场景,当这个变量发生变化后,凡是引用该变量的N个组件都会自动进行刷新操作,这里官网的一个图片比较形象:当State发生变化,然后Vuex刷新到View上,然后Vue监...原创 2020-11-07 18:16:18 · 156 阅读 · 0 评论 -
Vue教程-6-Promise
目录概念Promise的3种状态Promise链式调用Promise.all概念ES6自带一个非常重要和好用的特性,即Promise;Promise是异步编程的一种解决方案,比较完美的解决回调地狱的问题,从之前的“嵌套-嵌套-嵌套”改成了“链式调用”,下面通过一段代码来解释下变迁过程: call((){ doProcess(){ 发出网络请求 }, doSuccess(){ 网络请求成功 i...原创 2020-11-07 18:14:10 · 196 阅读 · 0 评论 -
Vue教程-5-路由vue-router
目录前端渲染/后端渲染/前端路由/后端路由后端渲染后端路由后端路由缺点前后端分离阶段前端渲染前端路由与SPA单页面富应用阶段页面刷新与前端路由①URL的hash模式②HTML5的history模式基于CLI2的vue-router安装与配置路由默认值修改路由模式详解通过代码跳转路由动态路由vue-router打包与懒加载vue-router嵌套路由vue-router传递参数vue-router全局导航守卫扩展keep-原创 2020-11-07 18:13:12 · 458 阅读 · 0 评论 -
Vue教程-4-Vue CLI快速入门
目录Webpack与脚手架Vue cli使用安装CLI3Vue-CLI2新建项目Vue-CLI2目录结构扩展如何关闭ESLint规范?Runtime + Compiler与Runtime-only区别template解析流程template工作流程结论Vue-CLI3与Vue-CLI2的区别Vue-CLI3新建项目Vue-CLI3目录结构查看CLI3项目配置文件UI配置:vue ui修改配置文件直接新建配置文件版本为何与packag原创 2020-10-29 21:01:32 · 859 阅读 · 0 评论 -
Vue教程-3-Webpack快速入门
目录WebpackWebpack安装Webpack基本使用webpack.config.jspackage.jsonloader案例less/scss/stylus样式文件加载图片ES6转ES5配置Vueel与template区别模块抽离过程1:template阶段模块抽离过程2:自定义组件阶段模块抽离过程3:自定义组件封装阶段模块抽离过程4:webpack封装阶段plugin使用BannerPlugin插件HtmlWebpackP原创 2020-10-29 20:57:06 · 225 阅读 · 0 评论 -
Vue教程-2-快速入门
父子组件通信-双向绑定官方推荐:修改父组件的data,来达到修改子组件props的效果,而不是直接通过v-model来修改子组件的props中的继承数据;解决方法如下:在子组件的data选项中,新定义数据,然后把props中数据赋值给data中新定义的变量,然后再在子组件的template中通过v-model来绑定data中新定义的变量,而不是props中的变量;data:{return {新变量=this.props中的变量}}event.target.v...原创 2020-10-26 21:27:46 · 140 阅读 · 0 评论 -
Vue教程-1-快速入门
MVVMMVVM全称是:Model-View-ViewModel;这里的View可以看做是HTML页面;这里的Model可以看做是js对象,里面有服务器返回的数据;这里的ViewMode可以看做是Vue,Vue因此主要有2个工作:DOM Listeners、Data Bindings,通过监听Model来实现数据驱动视图,通过监听DOM来实现HTML与数据同步变化;optionshttps://cn.vuejs.org/v2/api/官网自学,用到哪个,查哪个生命周期ht原创 2020-10-22 09:41:40 · 282 阅读 · 0 评论 -
Vue教程-0-Vue简介
基础Vue是一个渐进式的框架,可以理解为用Vue与jquery共存,然后慢慢用Vue从一个模块、一个模块的替换,直到全部替换完成;Vue官网:https://cn.vuejs.org/特点解耦视图和数据可复用组件前端路由技术状态管理虚拟DOM安装方式1:直接CDN服务器引入,可以选择引入开发/学习版本,还是生产版本 开发/学习: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"原创 2020-10-14 21:40:41 · 176 阅读 · 0 评论