![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
MMNHD
这个作者很懒,什么都没留下…
展开
-
vue长按事件 touch
vue长按事件 touch原创 2022-10-13 19:40:57 · 565 阅读 · 0 评论 -
原生input上传图片
【代码】原生input上传图片。原创 2022-10-13 19:25:49 · 231 阅读 · 0 评论 -
安装nvm
NVM保姆级安装_Coca可口的博客-CSDN博客1.下载安装之前,如果已安装了node.js,请先卸载已经安装好的node.js如果没有安装过,移步第四步开始看打开控制面板,点击卸载找到并卸载Node.js2.删除环境变量3.在系统变量中找到NODE_HOME删除4.在官网下载Releases · coreybutler/nvm-windows · GitHub5.安装6.更改镜像地址。添加语句node_mirror: https://npm.taobao....原创 2022-09-18 22:05:11 · 146 阅读 · 0 评论 -
vue 实现锚点连接
不过并不能达到想要的效果,在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面。原文链接https//blog.csdn.net/GrootBaby/article/details/120859544。vue-router用的是hash模式,不能使用传统a标签的方式来做锚点定位。要实现一个锚点定位的效果,传统方法是用a标签的href属性和id属性来做。经过各种百度,发现好多用的是以下方式,但是经过实测并没有用,没有实现定位。...原创 2022-07-27 23:38:26 · 1428 阅读 · 0 评论 -
vue .sync修饰符
使用sync语法糖后,父组件不需要单独声明一个方法,只需要在回调时声明一个update绑定的回调函数(这个绑定值是传值自身)父传子的数据的时候子直接修改父传的数据会报错可以使用.sync修饰符子传父的时候父组件可以少写一个方法。打个比方,如下代码需要两部才能实现上述功能1.向子组件传值;2.接收子组件回调的值。这样在父组件中就不需要再次定义回调函数进行接收了。...原创 2022-07-26 22:34:10 · 218 阅读 · 0 评论 -
处理数据 给数据换名字
代码】处理数据给数据换名字。原创 2022-07-24 19:45:03 · 120 阅读 · 0 评论 -
vue上传图片
eletemthttp-request上传图片。原创 2022-07-23 15:12:25 · 177 阅读 · 0 评论 -
处理数据后端传来的对象 只要value值
代码】处理数据后端传来的对象只要value值。原创 2022-07-23 00:10:16 · 166 阅读 · 0 评论 -
上传图片base64
代码】上传图片base64。原创 2022-07-20 23:55:05 · 169 阅读 · 0 评论 -
vue 注册插件
代码】vue注册插件。原创 2022-07-20 23:51:58 · 544 阅读 · 0 评论 -
上传excel文件
代码】上传excel文件。原创 2022-07-20 22:49:50 · 333 阅读 · 0 评论 -
处理树形结构数据
/1.循环遍历数组以数组中每一项的id做为key,每一项本身作为value形成一个新的对象[方便查找父节点]//核心思想寻找父节点的过程通过pid去匹配id如果匹配上了就把当前项push到匹配项的chilren属性中。//push到chilren属性中如果匹配不到代表它自己就是最外层父节点直接push到最终产出的树形数组中。//2.遍历数组以数组中的每一项的pid去第一步形成的对象中匹配id如果匹配的上就代表是它的子节点。//封装树形数据处理。...原创 2022-07-17 21:55:06 · 244 阅读 · 0 评论 -
全局注册组件
代码】全局注册组件。原创 2022-07-14 23:52:54 · 353 阅读 · 0 评论 -
组件 上用v-model实现子父传参 父子传参
子组件 父组件原创 2022-06-15 23:53:28 · 111 阅读 · 0 评论 -
axios 封装 模块化
utils/reuqst.jsapi/login.jsimport { login } from '@/api/login.js'; 组件引入api/home.js get请求api/articleList.js get请求带参原创 2022-06-08 23:10:35 · 232 阅读 · 0 评论 -
【记录】【vue】自定义权限指令v-permission的简单创建及使用
directives/permission.js directive/index 全局注册v-permission xxx.jsjj.jskk.js组件中使用只显示添加按钮原创 2022-06-09 17:03:44 · 3149 阅读 · 2 评论 -
在Vue中v-model如何和Vuex结合起来
<input v-model="getVal" /> computed: { getVal: { get() { // 这里也是用了Vuex里的 modules 大家可以当成普通的变量来看 return this.$store.state.Root.value }, set(newVal) { this.$store.commit('handleVal...原创 2022-05-23 20:05:21 · 301 阅读 · 0 评论 -
解决100%全屏出现滚动条 页面有白边问题
在app.vue设置<style lang="scss" >html,body,#app { height: 100%; margin: 0; padding: 0;}</style>原创 2022-05-21 18:39:09 · 1424 阅读 · 0 评论 -
mixin 混入
export const mixins = { data () { return { msg: '我是小猪课堂', } }, computed: {}, created () { console.log('我是mixin中的created生命周期函数') }, mounted () { console.log('我是mixin中的mounted生命周期函数') }, methods: { clickMe () { ..原创 2022-04-07 17:04:13 · 1000 阅读 · 1 评论 -
vuex 模块化+namespace 命名空间
模块引入 在store原创 2022-03-20 20:12:15 · 256 阅读 · 0 评论 -
vuex 全局状态共享
``Vuex概述 Vuex的核心概念Vuex中的主要核心概念如下: State: State提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储```javascriptexport default new Vuex.Store({ state: { count:0 }})``` 组件中访问State中数据的第一种方式:```javascriptthis.$store.state.全局数据名称```..原创 2022-03-18 22:43:12 · 205 阅读 · 0 评论 -
控制节流防抖
防抖:高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间在触发,则重新计算时间(后面触发的事件执行,替代了前面的事件)全局this 修改为input的this<body> <input id="input1" type="text"> <script> const input1 = document.getElementById('input1') function debounce(..原创 2022-03-13 16:35:43 · 541 阅读 · 0 评论 -
min.js里 引入请求封装
Vue2中为页面/组件的原型添加公共属性: Vue.prototype.$xxx = .... Vue3中为页面/组件的原型添加公共属性: app.config.globalProperties.$xxx = .... 配置文件 config.js // 此文件保存着所有的项目配置数据// 列如:服务器端API的地址// 最终的使用方法: uni.request(this.$url.xxx)// 即为所有的页面和组...原创 2022-03-11 21:12:14 · 1180 阅读 · 0 评论 -
vue 路由传参 编程式路由导航
(2)路由传参①query传参this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})// html 取参 $route.query.id// script 取参 this.$route.query.id②params传参this.$router.push({name:'home',params: {id:'1'}}) ...原创 2022-03-09 23:43:15 · 548 阅读 · 0 评论 -
vue 上一页 下一页
html部分 <div class="pages"> <a @click="getData(data.pageNum - 1)" :class="{ default: data.pageNum == 1 }" >上一页</a > <a @click.prevent="getData(item)" :...原创 2022-03-08 23:32:22 · 3019 阅读 · 0 评论 -
插槽 slot 插槽 slot 插槽 slot
8748原创 2022-03-06 20:01:16 · 90 阅读 · 0 评论 -
filters 过滤器
<span>{{ item.pubTime | date }}</spanfilters: { date(value) { return new Date(value * 1).toLocaleDateString(); }, },原创 2022-03-06 19:58:45 · 89 阅读 · 0 评论 -
vue路由重复跳转
methods: { goic() { const path = "/ic/" + this.gname; if (this.$route.path == path || this.gname == "") { return; } this.$router.push(path); }, },原创 2022-03-02 09:19:45 · 364 阅读 · 0 评论 -
组件传参 组件传参 组件传参
子 传父 通过refVuecomponent构造函数全局事件总线消息订阅与发布原创 2022-02-28 19:40:12 · 285 阅读 · 0 评论 -
vuex 属性使用
Vuex概述Vuex的核心概念Vuex中的主要核心概念如下: State: State提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储export default new Vuex.Store({ state: { count:0 }}) 组件中访问State中数据的第一种方式:this.$store.state.全局数据名称 组件中访问State中数据的第二种方式://1.从vuex中按需导入mapState函数原创 2022-02-14 22:23:45 · 80 阅读 · 0 评论 -
Vuex概述(1)
Vuex概述Vuex的核心概念Vuex中的主要核心概念如下: State: State提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储export default new Vuex.Store({ state: { count:0 }}) 组件中访问State中数据的第一种方式:this.$store.state.全局数据名称 组件中访问State中数据的第二种方式://1.从vuex中按需导入mapState函数原创 2022-02-14 22:21:58 · 51 阅读 · 0 评论 -
如何持久化保存 vuex 中的数据 Storage.
vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { islogin: sessionStorage.getItem('islogin'), // 存储当前是否已登录 username: sessionStorage.getItem('username') // 存储当前登录用户名 }, ...原创 2022-02-14 20:58:28 · 204 阅读 · 0 评论 -
vuex 5个属性使用方式
Vuex概述 Vuex的核心概念Vuex中的主要核心概念如下: State: State提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储```javascriptexport default new Vuex.Store({ state: { count:0 }})``` 组件中访问State中数据的第一种方式:```javascriptthis.$store...原创 2022-02-14 20:24:44 · 758 阅读 · 0 评论 -
keepAlive 实现的保活
<div> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive"/> </div>route/index.js 路由里添加meta元数据 { path: '/about', name: 'Abo.原创 2022-02-11 21:47:14 · 724 阅读 · 0 评论 -
A页面跳转到B页面并且传参的方式
A页面跳转到B页面并且传参的方式第一种方式: A页面如下,通过?传参: <router-link :to="`/article?id=${item.id}&name=zs`"> .... </router-link>添加事件 @click="$router.push(`/article?id=${item.id}`)"B页面如下,接收 id 参数: mounted(){...原创 2022-02-11 21:20:04 · 1067 阅读 · 0 评论 -
异步业务方法的封装 回调 和 promise
实现思路:需要在 data中声明一个变量page,用于表示当前页码默认为1。 每当监听到触底事件(执行loadMore),this.page++,向列表地址发送请求,获取结果。 将结果列表追加到当前列表的默认。异步业务方法的封装至此发现触底加载下一页的请求,与切换选项卡、mounted发送的请求非类似(articles),只不过请求参数, 获取到结果后的处理方式不同。可以封装一个方法 loadArticles()封装获取文章列表的请求,返回文章列表数...原创 2022-02-11 20:52:27 · 411 阅读 · 0 评论 -
用户名 状态共享
store文件 export default new Vuex.Store({ state: { users: null, }, mutations: { changeName(state, users) { state.users = users } },登录页面 data() { return { uname: "", upwd: "", }; }, meth...原创 2022-02-11 09:04:20 · 51 阅读 · 0 评论 -
路由守卫 设置页面标题
路由里添加meta属性{ path: '/', name: 'Home', component: () => import('../views/Home.vue'),//元数据 meta: { title: '首页', }, },]const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes,})// 必原创 2022-02-10 19:38:54 · 603 阅读 · 0 评论 -
vue脚手架安装 axios 安装 配置 轮播图
1. 安装配置 axios 。 直接vscode安装cmdnpm install --save axios 2配置 main.js //引入axios模块import axios from 'axios'//默认基础路径axios.defaults.baseURL = 'http://localhost:3000'//原型添加axiosVue.prototype.axios = axios//第二中添加方式import axios from 'axios'..原创 2022-02-10 19:10:39 · 1335 阅读 · 0 评论 -
vue porxy 解决跨域
// 配置文件vue.config.js 是固定名// 必须放在项目根目录下,与src同级别module.exports = { //devServer:开发服务器配置项 devServer: { // 小写的 procy proxy: { // 自定义代理名,请求时使用 '/dy': { //target:代表要跨域到哪(dy 要映射到 trget 的域名) target: 'https://m.douyu.c...原创 2022-02-09 20:56:50 · 459 阅读 · 0 评论