随笔分类 -  VUE2

vue.config.js配置了哪些东西
摘要：vue.config.js是基于vue-cli系统下的。所以先了解一下vue-cli。 1. vue-cli是什么？ 开发vue项目时必须要安装的一个插件就是@vue/cli了。vue-cli是一个基于vue.js进行开发的完整系统。它的作用主要有： 快速创建一个vue.js脚手架项目 并提供针对该 阅读全文
posted @ 2022-07-13 09:38 俄罗斯方块 阅读(1279) 评论(0) 推荐(0)
vue的v-model指令基本原理及如何在自定义组件上使用v-model指令绑定值
摘要：1.v-model的用法 v-model的用法都知道，表单控件使用v-model绑定一个data中的值即可实现双向绑定： <input type="text" v-model="val" /> data(){ return { val: 0 } } 2.v-model是什么 它其实就是一个语法糖，这 阅读全文
posted @ 2022-06-29 09:37 俄罗斯方块 阅读(477) 评论(0) 推荐(0)
VUE项目中的asset文件夹和public文件夹的区别
摘要：vue项目中有时候在纠结静态资源应该放在static文件夹或者public文件夹中。 都知道，vue项目build以后会生成一个dist文件夹，打包后的文件都放那这里。 区别： 1.public public文件夹中的文件会原封不动的放到dist文件夹中。比如我现在有个test文件夹，里面有个tes 阅读全文
posted @ 2021-03-01 09:52 俄罗斯方块 阅读(3982) 评论(0) 推荐(0)
vscode之代码格式化的prettier、eslint、vetur以及VSCODE的settings.json配置文件
摘要：1.作用 项目中常用eslint来约定代码的规范，但是格式化代码又需要用到prettier和vetur，很长一段时间都不太懂这三个的作用的相互之间的关系是什么，只知道开发vue项目需要安装vetur插件，格式化代码要用到prettier插件。所以花了一段时间专门来弄懂这三者的关系。 首先要知道这三个 阅读全文
posted @ 2021-02-23 09:38 俄罗斯方块 阅读(3219) 评论(1) 推荐(2)
vue2的生命周期
摘要：0.生命周期图示： 1.生命周期： 从Vue实例创建、运行、到销毁期间，伴随着的各种事件，这些事件统称为生命周期 2.生命周期函数分类： 创建期间的生命周期函数： beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好data和methods属性 created：实例已经在内存中创建 阅读全文
posted @ 2020-12-10 16:18 俄罗斯方块 阅读(1669) 评论(0) 推荐(0)
vue使用路由元信息实现指定页面的权限访问
摘要：实际开发中肯定会有需要用户登录才能查看固定页面的需求。在vue中可以通过vue的全局守卫与路由的元信息实现访问权限的控制 1.添加元信息 在某个需要登录才能查看的页面路由添加自定义元信息： routes: [ { path: '/create', name: 'create', component: 阅读全文
posted @ 2020-11-15 20:30 俄罗斯方块 阅读(359) 评论(0) 推荐(0)
VUE3响应式
摘要：1.vue2的响应式 3和2的响应式原理不同，既然3修改了实现响应式的方法，那2的响应式的肯定是有缺陷的。所以需要先了解一下2的响应式： Vue2官方网站对响应式的解释 主要的思想在于： 2的响应式主要实现由Object.defineProperty实现，当你把一个普通的 JavaScript 对象 阅读全文
posted @ 2020-11-04 11:43 俄罗斯方块 阅读(291) 评论(0) 推荐(0)
vue踩坑之路由跳转了，但是页面没有跳转。且报错Cannot read property '__ob__' of undefined
摘要：项目测试的时候发现从某一个特定的页面跳转到登录页面后，再点击登录时。后台数据返回显示登录成功，且当前页面的路由也改变了。用户信息也成功获取到了。但是就是需要重新刷新一下才能进入对应页面。 且每次从该页面跳出的时候总会报这个错： 各路搜索后才发现是因为data里面没有写return{ }。 阅读全文
posted @ 2020-07-02 15:30 俄罗斯方块 阅读(2125) 评论(0) 推荐(0)
vue中的.env | .env.development | .env.product
摘要：.env——全局默认配置文件，无论什么环境都会加载合并 .env.development——开发环境下的配置文件 .env.production——生产环境下的配置文件 注意：属性名必须以VUE_APP_开头，比如VUE_APP_xxx = "变量" 文件是如何加载的？ 执行启动命令后会自动加载对应 阅读全文
posted @ 2020-05-30 11:31 俄罗斯方块 阅读(7180) 评论(0) 推荐(1)
vue之插槽slot
摘要：一、插槽内容 父组件： <navigation-link> Your Profile </navigation-link> 子组件： <a v-bind:href="url" class="nav-link" > <slot>这是子组件slot，当父组件的子组件标签内没有写内容时显示</slot> 阅读全文
posted @ 2020-05-18 23:21 俄罗斯方块 阅读(411) 评论(0) 推荐(0)
vue之 ref 和$refs的使用
摘要：在vue中一般很少直接操作DOM，如果需要操作DOM，我们可以通过ref 和$ref来实现。 1 ref ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。 阅读全文
posted @ 2020-04-15 23:51 俄罗斯方块 阅读(869) 评论(0) 推荐(0)
vue中ref的作用
摘要：1.基本用法，本页面获取dom元素: <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div> </template> <script> exp 阅读全文
posted @ 2020-03-24 21:37 俄罗斯方块 阅读(2122) 评论(0) 推荐(0)
vue中使用swiper
摘要：1.安装swiper，执行npm install vue-awesome-swiper --save命令 2.在main.js中添加下面三行 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) 3.在 阅读全文
posted @ 2020-03-15 22:46 俄罗斯方块 阅读(6235) 评论(0) 推荐(0)
Vue keep-alive&路由守卫
摘要：一 keep-alive 缓存组件内容，避免组件反复加载，影响效率 （1）在路由中配置： 添加meta:{keepAlive:true} { path: '/', name: 'home', component: Home, meta:{ keepAlive:true } } 其中：keepAliv 阅读全文
posted @ 2020-03-15 13:14 俄罗斯方块 阅读(1354) 评论(0) 推荐(0)
VUE路由懒加载
摘要：webpack会把所有的js文件都打包成一个js文件，影响页面加载速度。 （1）router/index.js中配置懒加载的路由地址： component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') （2）脚 阅读全文
posted @ 2020-03-15 10:29 俄罗斯方块 阅读(435) 评论(0) 推荐(0)
Vue路由模式
摘要：vue-router中默认的路由模式是hash模式，即：#/路由地址 当启用history路由模式，就不会看到#，只剩：/路由地址 由此可能出现问题：客户端和服务端都有路由地址，并且有可能重名。如服务端：/index（服务器端查询） VUE中：/index（Vue脚手架路由器查询）且，浏览器只要看到 阅读全文
posted @ 2020-03-15 09:42 俄罗斯方块 阅读(1726) 评论(0) 推荐(0)