vue
lockloke
记录学习心得
有很多问题,对那些高手来说太简单,所以就没人去解释该怎么处理。然而这才是新手最需要的,毕竟新手嘛,什么问题都可能出现,搜又不知道该搜什么关键字。
希望我的文章能帮到其他人
待我稍微整理下思路后再记录下新人入职后如何快速上手吧
展开
-
vue的双向数据绑定原理
网上一堆所谓的面试题说的vue的双向数据绑定是Object.defineProperty实现的,啊对对对,说的没错,然后呢?没了????我丢,老子还以为真的就这么一句话可以了。遇到这个问题,我当时的回答是通过Object.defineProperty()去监听对象的某个属性,当其被读取或者写入新数据的时候就会触发Object.defineProperty()的get和set方法,然后面试官就问了一句,还有吗。还有吗,我不知道啊,我所看过的教程啥的都只讲到这最近才刚看到另外的教程,还没看完,先写一原创 2021-11-06 21:17:13 · 225 阅读 · 0 评论 -
vue源码部分解析--双向数据绑定(vue2--Object.defineProperty)--基础解析篇
vue2的数据绑定(即v-model这些)是通过Object.defineProperty()的方式来实现的,听起来有点麻烦,那先看简单的示例再看后面的解析。原生js的双向绑定示例 <input type="text" name="" id="input" value="" /> <div id="app"></div> <script type="text/javascript"> var $=name=>document.getE原创 2021-09-30 23:41:28 · 205 阅读 · 0 评论 -
vue声明式导航和编程式导航
一、路由导航的几种定义方法示例路由:const routes = [ { path: '/home', name:"home", component: () => import("../home/index.vue"), }1、声明式<router-link to="/home">home</router-link>2、编程式$router.push('/home')二、使用方式在路由中有多个跳转方式1、声明式第一种、直原创 2021-09-15 00:04:26 · 819 阅读 · 1 评论 -
vue项目打包
直接贴代码吧vue.config.js中let CompressionWebpackPlugin = require("compression-webpack-plugin")module.exports = { // publicPath: './', // 打包到子域下面 http://www.baidu.com/sub // publicPath: '/sub/', // outputDir: "dist/sub", //输出目录 /原创 2021-09-09 17:09:43 · 87 阅读 · 0 评论 -
token值的保存以及在header中传入使用
一般登录的时候系统后台会返回一个token值,我们可以新建一个utils工具类文件夹,放置例如token.js之类的处理文件exportfunctionsetToken(token){returnsessionStorage.setItem(tokenkey,token)}exportfunctiongetToken(){returnsessionStorage.getItem(tokenkey)}exportfunctionremoveToken(){...原创 2021-08-08 12:47:38 · 4171 阅读 · 0 评论 -
axios封装
将axios请求处理放在单独文件夹中我们可以在vue项目src目录中新建一个api文件夹,专门用于存放axios请求处理在api文件中新建两个文件,一个是index.js,一个是request.js,index.js用于写axios的配置相关信息,request.js则是将http请求集合起来。api目录中的index.js如下:import axios from 'axios'axios.defaults.baseURL = `你的请求地址`;// 添加请求拦截器// 在发..原创 2021-07-13 01:52:29 · 104 阅读 · 0 评论 -
全局组件导入方式
这次写的主要是webpack方面的,首先是组件方面的导出假如我在components文件夹中定义了一个global文件夹用来存放公共组件,这个global文件夹下的index.js就是用来将所有公共组件进行导出的看一下my-button文件夹中的示例吧,在my-button文件夹中只有两个文件,一个就是组件,另一个是用来将其导出的js文件,示例my-button文件夹中的main.vue如下<template> <div>我的按钮</.原创 2021-07-13 01:20:30 · 645 阅读 · 1 评论 -
vue组件导入的方式
第一种第一种自然是直接import xxx from "组件的路径",然后再到components中引用,例如vue自带的helloworld.vue示例:<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div>&原创 2021-07-11 23:55:32 · 14088 阅读 · 3 评论 -
vuex学习
其实也没啥难度,安装vuex后使用而已一、通过this.$store.state.属性名操作数据第一种方式(this.$store.state.属性名)写法第一种就是在store/index.js中把数据写在newVuex.Store(){}中,然后去各个组件中使用this.$store.state.属性名 就行了//store.js页面(这个其实就是Vuex了)export default new Vuex.Store{ state:{ count:0 } }在组.原创 2021-07-01 17:12:35 · 196 阅读 · 1 评论 -
vue图片懒加载
图片懒加载其实就是在用户还未浏览到某些位置的时候就暂时不加载图片信息,以此节省带宽,减轻服务器压力以及优化用户体验,因为图片不是一次性全部加载完,故网页的加载速度会提升很多(前提是数据量比较大)。图片懒加载实际上就是使用html5的自定义属性data-xx,将图片src路径存储在该属性中,需要加载的时候再将数据替换到src路径中。在vue项目中有一个依赖可以轻松实现图片懒加载,vue-lazyload,Gitee仓库链接在这1、安装关于这个依赖在vue项目中的使用,首先自然是安装,我使用脚手原创 2021-07-01 02:05:29 · 841 阅读 · 0 评论 -
vue组件之间共享数据的方式--Vuex篇
小范围内实现组件间数据共享的话用下面这几种就可以了,但是如果要大范围去实现的话,那就得用vuex了。1、组件之间共享数据的方式父向子传值:v-bind属性绑定子向父传值:v-on事件绑定兄弟组件之间共享数据:EventBus$on 接收数据的那个组件$emit 发送数据的那个组件正文简介:Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享...原创 2021-05-19 14:16:05 · 371 阅读 · 0 评论 -
axios使用
简单用法:<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.js"></script><script> axios.get('接口地址') .then(res => console.log(res.data)) .catch(err => console.log(err))</script>上面这种用法还是有点原创 2021-04-23 17:49:17 · 133 阅读 · 0 评论 -
Vue-组件间的几种传参方式简单讲解之-----父子组件间传参
一、传参方式:自定义动态属性+props传参示例1.1下面这个是父组件//html部分<Banner :imgData="img"></Banner>//js部分data(){ return{ img:[需要传递的数据] }}下面是被调用的子组件//jsprops:['imgData']//也可换成这样的写法---- props:{....}解析:父组件使用自定义动态属性传参给子组件,如 父组件中使用了 :im原创 2021-04-23 17:06:59 · 227 阅读 · 0 评论 -
vue组件间传值
一、父子组件传值父组件向子组件传值最简单,直接使用自定义的属性便可以向子组件传值,子组件可以通过data接收//父组件html部分,假设这btn便是我们所引用的子组件名称<子组件名 :data="sendData"></子组件名>//父组件js部分new Vue({ data(){ return{ sendData:需要发送的数据 } }})--------------------------原创 2021-04-22 13:31:17 · 103 阅读 · 0 评论 -
学做vue电商后台管理系统时遇到的一点问题
登陆页post请求失败照着B站vue电商项目视频敲代码,到了登陆页前后端交互的时候,明明在postman那里测试的后台接口没问题,但是总是显示下面的问题Post http://localhost:8080/login 404 xhr.js?b50d:178Uncaught (in promise) Error: Request failed with status code 404查看了一遍感觉都没问题啊,后台没问题的话那就是前端的问题,绕了一圈才看到原来是这里代码的顺序问题我把原创 2020-12-26 22:21:05 · 586 阅读 · 0 评论