Vue.js
文章平均质量分 52
Pop–
熬夜不打代码
展开
-
使用axios封装一个函数,用来向服务器发送请求,获取数据
这里我们封装了一个request 函数,并将其导出,之后只需导入request 就可使用该函数例如 home.vue 面向 home.js 开发, home.js 面向 request.js开发request.jsimport axios from "axios";export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: "http://152...原创 2021-09-25 16:25:53 · 489 阅读 · 0 评论 -
Vue3 响应式实现 雏形
实现原理:1.通过Proxy(代理):拦截对象中任意属性的变化:包括属性值得读写,属性的添加,属性的删除等2.通过Reflect (反射) :对被源对象的属性进行操作 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name.原创 2021-09-17 22:34:17 · 147 阅读 · 0 评论 -
Vue 项目开发小技巧
项目开发小技巧组件必须有一个根 div (.vue文件)如果你想要给插槽设置样式,则需使用一个div将其包裹起来,然后给div 设置样式line-height 要有内容才能撑起来,无法自动撑起设计模式: 首页组件面向home.js开发,home.js 面向request.js开发;在home.js中写着首页所有请求的 url 和参数,到时候home.vue调用对应的函数就行home.vue —> home.js ---->request.jsjustify-con原创 2021-09-17 08:49:38 · 304 阅读 · 0 评论 -
如何使用 Vuex 中的mapGetters 辅助函数
使用场景:假如你想在某个组件里使用Vuex store 中存储的state的某个属性值,一般的话,我们可以通过计算属性computed: 写一个方法来获取 $store.state.xxx.属性,然后在页面中显示,但是这样有时候会有点麻烦,我们想着可不可以直接使用,不需要再写计算属性,这个时候我们就可以用到mapGetters, 将数据的某些属性放在getters中(比如长度length)将其封装并导出首先 在组件中 导入 mapGetters : import { mapGetters} fr.原创 2021-09-16 21:32:02 · 1075 阅读 · 1 评论 -
Vue 将服务器返回的时间戳 转化为字符串 (封装成一个函数)
创建一个utils.js 封装一个 formatDate函数export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace( RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length) ); } let o = { "M+": date.getMonth() + 1, .原创 2021-09-15 17:02:17 · 583 阅读 · 0 评论 -
$bus 事件总线-------处理非父子间的通信
bus ->总线Vue.prototype.$bus = new Vue() main.js 设置this.$bus.$emit(‘事件名称’, 参数)this.$bus.$on(‘事件名称’, 回调函数(参数))如何将GoodsListItem.vue中的事件传入到Home.vue中?非父子间的通信使用事件总线在GoodListItem.vue methods中发射事件this.$bus.$emit(‘事件名称’, 参数)在Home.vue created 周期函数中监听.原创 2021-09-08 15:41:50 · 149 阅读 · 0 评论 -
Vuex 学习
安装指令 : npm install vuex --save每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)Vuex 文档:https://vuex.vuejs.org/zh/一、Vuex 是做什么的?官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式通俗解释:把需要多个组件共享的变量全部存储在一个对象里面。然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。为了保证.原创 2021-08-26 21:14:45 · 461 阅读 · 5 评论 -
什么是前端路由?什么是SPA 单页面富应用? 前端路由的核心是什么?
前后端分离阶段随着Ajax的出现, 有了前后端分离的开发模式.后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可.目前很多的网站依然采用这种模式开发.单页面富应用阶段其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.也就..转载 2021-08-18 15:28:19 · 280 阅读 · 0 评论 -
$router $routes 的区别
$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法例如:点击或者修改路由后跳到相应的组件 itemClick(){ //监听item的点击,通过this.$router.replace()替换路由路径 // 谁点击了就跳到该路径 this.$router.replace(this.path) }$route为当前router跳转对象里面可以获取name、path、query、params等...原创 2021-08-18 15:21:10 · 406 阅读 · 0 评论 -
Vue-router 学习(动态路由,参数传递,路由嵌套,路由懒加载,导航守卫,keep-alive)
.vue 文件大写 Home.vuename: ‘Home’ 与之对应懒加载也大写 const Homecomponent : Home 也大写只有path:’/home’ 小写运行指令为 : npm run dev一、前端路由的核心改变URL,但是页面不进行整体的刷新vue-router 基于路由和组件的vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用二、前端路由的基本使用使用vue-router的步骤:第一步: .原创 2021-08-17 18:18:53 · 531 阅读 · 0 评论 -
Vue CLI2,Vue CLI3 目录结构详解和区别,以及vue cli3 迁移至 vue cli2
Vue CLI2脚手架2的安装方式 :cnmp install -g vue-cliVue CLI2初始化项目: vue init webpack my-project查看版本号:vue -V卸载脚手架:npm uninstall -g vue-cliVue CLI3脚手架3安装指令:cnpm install -g @vue/cli初始化:vue create myApp查看版本: vue -versionVue CLI2 与 Vue CLI3 的区别vue-cli 3 ..原创 2021-08-14 20:10:57 · 495 阅读 · 0 评论 -
runtime-compiler 和 runtime-only 的区别,.vue 文件中的 template 是谁处理的
runtime-compiler 的执行过程:template —> ast —> render —> vdom —> UIruntime-only 的执行过程:render —> vdom —> UI从上面可以看出:runtime-only 性能高,代码少使用 runtime-only 时,.vue文件中的 template 是由谁处理的?是由 vue-template-compiler 处理的,将.vue里面的 template 编译成 r..原创 2021-08-14 17:06:44 · 224 阅读 · 0 评论 -
学习 webpack,踩过的坑
最终的目的都是简化入口main.js里面的代码,能分离就分离,把那些有依赖的文件(css, js ,less , .vue)都导入到这里总之在html页面上只有 bundle.js 一个文件引入目的:实现前端的模块化css处理时 安装了 css loader@2.0.2 和 style loader0.28.0 报错网友说是 现在2.0.2 css的loader 的版本需要webpack 4.0.0 的版本弹幕发了一个解决依赖冲突的办法:npm install --legacy-pee.原创 2021-08-06 15:35:59 · 893 阅读 · 0 评论 -
报错{ parser: “babylon“ } is deprecated; we now treat it as { parser: “babel“ }使用v-loader15以下版本未装插件
发现问题:当降低 vue-loader 的版本到15以下,就可以不用安装插件成功了,但是出现问题:<h3 data-v-5e019a2f="" class="title">徐霞山</h3> 会有这个生成: data-v-5e019a2f问题出处:{ parser: “babylon” } is deprecated; we now treat it as { parser: “babel” }.解决方法:这个不是报错,而是需要将 babylon 换成 babe..原创 2021-08-06 11:37:14 · 244 阅读 · 0 评论 -
Vue-loader 14 ----迁移 Vue-loader 15
安装指令 cnpm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-devvue官网–(导航栏)生态系统–工具–vue loader–(导航栏)–如何从V14迁移–Vue Loader v15Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用:按照图片提示分别添加const VueLoaderPlugin = require('vue-loader/lib/plugin') 和 ..原创 2021-08-06 11:30:40 · 506 阅读 · 0 评论 -
Vue-webpack3.6.0配置相关指令(b站coderwhy)
一、 安装前的准备首先需要安装node.js node-v 检查版本号初始化 npm init安装 node_modulesnpm install安装淘宝镜像(加快下载速度)npm install -g cnpm --registry=https://registry.npm.taobao.org 把npm 改成 cnpm二、 文件夹准备新建一个文件:例如 webpack的loader在该文件夹下: 创建一个 dist 文件夹 该文件夹以后用于上传原创 2021-08-06 11:20:59 · 461 阅读 · 0 评论 -
<style lang=‘stylus‘ scoped></style> 还有Vscode配置vue.json自定义模板
一个现在还没有接触的东西<style lang='stylus' scoped></style>现在只知道 lang: 普通的style标签只支持普通的样式,如果想启用scss或者less,需要为style元素设置lang属性还有scoped属性:scoped是指定样式的局部作用域,样式只在当前.vue页面使用,不在其他页面使用至于stylus:富于表现力、动态的、健壮的 CSSstylus是一个强大的css预编译语言,stylus支持省略花括号,支持省略分号,代码整洁,支.原创 2021-08-04 20:27:45 · 1157 阅读 · 0 评论 -
Vue 组件化学习(组件的基本使用,组件之间的数据传递,插槽slot)
什么是组件?组件是一个单独功能模块的封装,有属于自己的HTML模板,也应该有属于自己的数据data ,还有methods;组件模板必须有一个根(常用div)组件的基本使用:(含语法糖,含模板抽离,含对象抽离)这里是局部组件注册方式基本步骤就是: 先创建一个组件mycpn,在里面写一个模板 template ,template通过 id 分离到页面上,之后将组件mycpn 放到 vue实例对象里面的components 属性里面 进行注册,这样就可以在页面中直接使用mycpn这个组件了 ..原创 2021-07-26 19:49:00 · 501 阅读 · 6 评论 -
for in ,for of (es 6 新增方法)的特点与区别
总结: 用 for in 来遍历对象 ,for of(ES6 新增方法)来遍历数组 为什么呢? 举几个例子看一下例1: 用 for in 和 for of 遍历一个对象const obj = { a: 1, b: 2, c: 3 } for (let i in obj) { console.log(i) // a // b // c } for (let .转载 2021-07-15 16:11:10 · 368 阅读 · 0 评论 -
Vue.js 实现简易购物车(商品的增加删除,价格的小计和总计)
使用方法 :toFixed(2) 保留俩位小数splice(index,howmany) 删除商品 index 规定添加删除的位置 ,howmany 删除几个border-collapse: collapse; 边界折叠: 折叠border-spacing: 0; 边框间距 0html 代码<div id="app"> <div v-if='books.length'> <table> <thead>.原创 2021-07-13 20:16:44 · 3322 阅读 · 1 评论