vue
文章平均质量分 50
不为霜停
学如逆水行舟,不进则退
展开
-
防抖和节流
防抖setTimeout 会返回一个随机值用来标识自己 , 用cbFun来接收 , 等settimeout完了之后再次设置为cbFun = null ,下次点击就会进入if分支再次开启settimeout let flag; el.addEventListener( "click", (event) => { console.log(flag); if (!flag) {原创 2022-05-21 15:32:32 · 115 阅读 · 0 评论 -
v-model
首先说明: vue是单项数据流咦 , 那么v-model的双向绑定又是什么呢? v-modle其实是一个语法糖作用在标签里面的时候v-model相当于v-bind和v-on的结合<template> <div class="home"> <!-- <input type="text" v-model="name123"> --> <!-- 等于 --> <input type="text" :value=原创 2022-05-19 20:14:33 · 156 阅读 · 0 评论 -
懒加载 , 滚动加载更多
懒加载(可以在里面写防抖)这个大佬写的很详细vue项目里实现懒加载要用到 v-infinite-scroll 插件npm i v-infinite-scroll -Dimport lazyLoad from 'v-infinite-scroll' Vue.use(lazyLoad)下面的v-infinite-scroll绑定的事件load()就会在滚动条距离页面底部300px的时候触发:infinite-scroll-disabled="disabled"随着disabled的值的变化,决定原创 2022-04-14 17:52:30 · 1090 阅读 · 0 评论 -
vue watch 中找不到this
watch中想要监听vuex中的数据//监听vuex中path的变化 "$store.state.path":function(value){ this.parentRoute = value }要想在监听的数据中获取到this指向vm在watch中如果想要获取到this指向vm , 就必须用function , 而不能使用箭头函数 , 因为箭头函数中的this 指向的是外层函数中的this , 虽然watch中this默认指向vm , 但是箭头函数并不能获取到this指原创 2022-04-13 13:03:05 · 5197 阅读 · 0 评论 -
项目中遇到的问题以及解决方法
超过字数省略单行省略overflow: hidden;white-space: nowrap;text-overflow: ellipsis;多行省略display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;原创 2022-03-08 12:53:12 · 739 阅读 · 0 评论 -
vue刷新当前页面的方法
第一个想到的方法是this.$router.push() , 但是会报错 , 不让自己页面跳转自己页面 , 就算解决了这个问题跳转了之后 , dom也不会渲染 , 页面的数据显示不出来 , 所以查询了一下方法来解决问题location.reload() 不推荐 : 页面出现一瞬间的空白这个方法相当于( ctrl + R )刷新当前页面 , 但是刷新过后vuex里面的值也会重新刷新 , 当我们要实现多个组件根据 vuex 里面的值做相应的判断时 , 这个功能不能实现 , 于是我们结合window.se原创 2022-03-22 21:07:29 · 1806 阅读 · 0 评论 -
前端实现跨域
在这里记录一下跨域成功的操作在vue.config.js中设置一下代码 , 里面的target就是你要配置代理的地方,这里面后端给我的地址是 : http://bautk.free.svipss.top/enterprise/query ,所以我们要代理的地址就是http://bautk.free.svipss.topmodule.exports = { devServer:{ proxy:{ '/api':{ ta原创 2022-03-16 15:16:39 · 1266 阅读 · 0 评论 -
数据持久化 , vuex中的值怎么永久保存
vuex中的值重置的原因在完成项目的时候 , 要根据 login 的状态来显示相应的组件 , 一开始很自然的想到把 login放在sessionStorage中 , 但是放在里面的数据不是响应式的 , 不能及时的更新一些数据 , 然后又想到了放在vuex中 , 但是又遇到了一刷新其中的值就重置了 , 因为vuex的数据是存储在浏览器的内存中的 , 页面刷新就会重置解决方式本地存储 + vuex初始化login里面的值的时候 , 从sessionStorage 里面拿state: {原创 2022-03-11 16:22:29 · 581 阅读 · 0 评论 -
vue项目怎么从头运行
vue项目开启之后: index.html -->main.js --> App.vue -->index.js(router中的)index.js这里面的< div id=“app”> </ div>会被App.vue完全取代main.jsmain.js 是vue项目的入口文件 , 它的作用是引入App.vue 文件 ,并且将其挂载到 index.html 中作为根组件 , 并且 mian.js 中还会创建 vm 实例import Vue from '原创 2022-03-06 22:17:38 · 868 阅读 · 0 评论 -
vue中的Class与v-bind绑定
v-bind用于class和style的不同情况一.对象语法active 这个 class 是否有效取决与 isActive 的值 , 且不影响普通class d1 的设置 , 并且这个div 的 class的取值一直动态的受isActive的影响<div v-bind:class="{ active: isActive }" class="d1"></div>如果isActive 为 true上面的表达式相当于<div class="d1 active">&转载 2022-03-06 20:15:19 · 419 阅读 · 1 评论 -
vue的生命周期
先放一张图上来下面开始介绍吧beforeCreate ___________vm中还没有数据created ________________vm中的数据都初始化完成beforeMount ____________Dom还没有挂载到页面上mounted _______________页面加载完成beforeUpdate ___________页面没有更新,数据已经改变,数据没有同步updated ________________页面数据和data中的数据再次同步beforeDestro原创 2022-03-06 17:50:11 · 101 阅读 · 0 评论 -
vue中插槽的使用
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件===>子组件分类: 默认插槽,具名插槽,作用域插槽使用方式:默认插槽父组件中: <category> <div>html结构1</div> </category>子组件中: <category> <div> <slot>插槽默认内容</..原创 2022-01-16 14:05:03 · 185 阅读 · 0 评论 -
vue中的vuex的使用
Vuex1.概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信2.何时使用? 多个组件需要共享数据时3.搭建vuex环境创建文件: src/store/index.js//该文件用于创建Vuex中最为核心的store//引入vueimport Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vu原创 2022-01-16 14:01:01 · 272 阅读 · 0 评论 -
vue路由的使用
路由1. 理解: 一个路由(router)就是一组映射关系(key-value),多个路由需要的路由器(router)进行管理2. 前端路由: key是路径,value是组件1.基本使用安装vue-router,命令: npm i vue-router引入vue-router之后应用插件: Vue.use(VueRouter)编写router配置项//该文件专门创建整个应用的路由器import VueRouter from 'vue-router'//引入组件import原创 2022-01-16 13:58:43 · 4127 阅读 · 0 评论 -
vue学习时的笔记
脚手架文件结构:node_modulespublic favicon.ico:页签图标- index.html:主页面src assets:·存放静态资源 component:存放非路由组件 views|pages:存放路由组件 —App.vue:·汇总所有组件 main.js:·入口文件gitignore: git版本管制忽略的配置babel.config.js: babel的配置文件package.json:·应用包配置文件REA原创 2022-01-16 13:54:16 · 354 阅读 · 0 评论 -
vue项目基础配置
0.项目一开始的基础配置src 文件简写方法,配置别名@(引入的时候不用…/…/,直接写@)在根目录创建 jsconfig.json【@代表 src 文件夹】{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } }, "exclude": [原创 2022-01-16 13:32:54 · 569 阅读 · 0 评论