![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
文章平均质量分 51
marsur
这个作者很懒,什么都没留下…
展开
-
使用Vue + vue-i18n搭建国际化网站
两个文件夹的对象名和key值需完全相同,value值根据语言来变动。调用this.$i18n.locale = 'xxx' 即可实现。3.langs文件夹下新建语言文件(zh.js、en.js等)2.i18n文件夹下新建i18n.js文件和langs文件夹。通过i18n 插件内置的 $t 语法编写文案。1.在src根目录下新建i18n文件夹。在VUE上挂载i18n实例。原创 2022-10-28 16:13:17 · 869 阅读 · 1 评论 -
VUE设置和清除定时器
keep-alive > 有缓存的作用,可以使被包裹的组件状态维持不变,当路由被 keep-alive 缓存时不走 beforeDestroy 生命周期。被包含在 < keep-alive > 中创建的组件,会多出两个生命周期钩子: activated 与 deactivated。在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样,但更有优势。原创 2022-10-26 17:36:53 · 16198 阅读 · 1 评论 -
VScode Vue项目使用html代码自动补全插件
打开文件方式:在VScode中同时按住Ctrl+Shift+P,搜索配置文件。(3)父子标签:输入父标签>子标签,按下tab键。(2)多个相同标签:输入标签名*5,按下tab键。(4)兄弟标签:输入兄标签+弟标签,按下tab键。(1)单个标签:输入标签名称,按下tab键。原创 2022-10-20 17:45:51 · 9178 阅读 · 0 评论 -
VUE局部封装axios接口
1.在src目录下新建api文件夹,新建js文件2.封装axios接口import axios from "axios";import router from "../router";import {Dialog} from "vant";//请求拦截器let instance = axios.create({ baseURL:"https://baby.xmn.top...原创 2019-11-23 16:08:53 · 496 阅读 · 0 评论 -
移动端VUE实现一周课程表
效果图点击课程弹出课程详情代码使用嵌套的v-for循环去实现<template> <div class="class-table"> <div class="table-wrapper"> <div class="tabel-container"> <table> ...原创 2019-11-13 15:14:34 · 4376 阅读 · 2 评论 -
VUE页面实现点击按钮删除某一条数据
弹出的对话框和轻提示使用的是Vant-UI框架中的组件<template> <div class="body"> <div v-for="(item,index) in data"> <van-cell-group class="panel"> <button class="delete" @cl...原创 2019-09-20 17:26:41 · 21777 阅读 · 0 评论 -
VUE+Vant实现下拉刷新和上拉加载
使用Vant的PullRefresh组件和List 组件<van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" @load="onLoad" :offset="10" ...原创 2019-09-18 20:27:19 · 9285 阅读 · 6 评论 -
VUE使用计算属性和filter筛选内容
搜索框<el-row style="text-align: left;margin-bottom: 20px"> <el-col :span="16"> <el-input v-model="mySearch" size="small" placeholder="请输入内容" class="input-with-select"/>...原创 2019-08-08 16:56:09 · 3020 阅读 · 0 评论 -
VUE根据滚动条与顶部的距离固定左侧导航栏
在有顶部导航栏的情况下,呈现左侧导航栏固定的效果不能简单地使用fixed来实现,因为当滚动条下拉时导航栏菜单也需要改变位置,而不是固定在页面的某一位置。页面效果1.滚动条处于顶部2.滚动条下拉到一定位置实现代码<template> <div> <div v-show="!isCollapse" id="left" cla...原创 2019-08-08 01:26:32 · 6238 阅读 · 0 评论 -
CSS定义或修改没有类名和id名的元素样式
在使用第三方ui库element ui时需要修改一个没有类名和id名的元素DIV的样式,可以采用在CSS中设置的方式。首先找到该元素的某一个带有id名或类名的父级元素,然后使用子元素选择器向下逐层选择直到获取到要修改的元素进行样式定义。选择器:nth-child(n)含义:选择父元素下的第n个子元素例:<div id="map"> <div>...原创 2019-08-03 19:51:25 · 1434 阅读 · 0 评论 -
vue-quill-editor富文本编辑器的使用
效果图步骤如下:1.在cmd中安装依赖npm install vue-quill-editor –save2.在main.js中引入import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'impor...原创 2019-06-15 22:32:44 · 356 阅读 · 0 评论 -
VUE根据路由跳转改变头部导航栏文字
效果图步骤如下:1.在router/index.js路由文件通过定义每个页面中name的值来定义顶部导航栏的文字{ name:"琴房管理系统", path:"/myHome", component:() => import("../page/common/myHome.vue")}2.父组件传值2.1.在父组件APP.vue...原创 2019-06-19 22:33:36 · 3715 阅读 · 0 评论 -
VUE用layer实现弹出提示框
效果图步骤如下:1.安装vue-layernpm install vue-layer2.引入layerimport Vant from 'vant';import layer from 'vue-layer'Vue.prototype.$layer = layer(Vue);3.在页面中使用layer实现弹出提示框html代码<li class="...原创 2019-06-19 20:01:34 · 12617 阅读 · 0 评论 -
使用Vue.set()方法实现响应式修改数组数据
在页面中显示数组数据时发现了一个问题,当在methods方法中修改数组数据后,虽然数组已经发生改变,但是改变后的数据并没有渲染到页面上。这是因为在VUE中,如果在实例创建之后添加新的属性或者改变属性到实例上,它将不会触发视图更新。而Vue.set()方法能够确保响应式对象被创建后仍然是响应式的,同时触发视图更新,动态响应数据的变化。用法如下:Vue.set(object,index,v...原创 2019-03-28 18:58:43 · 10743 阅读 · 2 评论 -
VUE实现token登录验证
实现这个登录功能的过程真是一波三折,中途出现了bug,整了两三天才解决了问题,心力交瘁,简直一个头两个大,感觉自己的毅力和耐心又提升了一个层次ORZ好在最终在同学的帮助下解决了bug,不过我又再次感受到了作为一个菜鸟的浅薄,大佬的问题屡次触及到我的知识盲区......现在详细地记录一下实现token登录验证的步骤,以防以后再犯错1.封装store对token的操作方法首先在src目录下...原创 2019-04-01 17:47:14 · 9805 阅读 · 8 评论 -
VUE用v-show指令控制导航栏的隐藏和显示
在一个网页项目中,为了界面的美观整洁有时候导航栏需要隐藏起来,而v-show指令可以动态控制dom元素的显示和隐藏。以下是用v-show指令实现这个功能的过程1.给需要隐藏的dom元素添加v-show指令isShow为一个变量,为true时该元素显示,为false时该元素隐藏<div class="bottom" v-show="isShow">2.在script...原创 2019-03-24 22:29:20 · 9101 阅读 · 0 评论 -
VUE实现底部导航栏
在做一个VUE网页项目时,需要实现底部导航栏的功能,点击相应的按钮进行页面的切换。由于第一次开发这种网页项目,对框架不太熟悉,于是去网上搜寻了一些资料,参考别人的做法,实现了这个底部导航栏。现在记录一下这个导航栏的实现过程。1.首先写好导航栏的样式和布局,做出静态效果。<template> <div class="bottom" v-show="isShow...原创 2019-03-24 18:17:03 · 14227 阅读 · 1 评论