Lemontree_fu的博客

一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue二、通信过程介绍1.父组件向子组件传值1.1在父组件中引入需要通信的子组件import Page1 from "./components/page1";1.2 在父组件的components中注册该子组件components: { Page1 }1.3 在父组件的template中使用子组件<page1></page1>1.4 将需

想要实现上面那种格式，然后又对input框中的值进行验证，要求都必须是数字。代码：<!-- 配置报警值弹出框 --> <el-dialog title="配置报警值" :visible.sync="peiVisible1" width="40%" class="dialoge_black"> <el-form ref="peiform1" :model="peiform1" :rules="rules" label-widt..

项目要求：ip不是必填项，但是对格式有要求（0.0.0.0格式）代码：ip:[{pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,message: 'ip格式不对！',trigger: 'blur'}]...

安装npm install v-viewer引用在main.js文件下全局引用import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)使用方法 <viewer :images="imgList"> <img class="imgsrc" v-for="src

(一) js原生实现方法css 代码段<style scoped lang="scss">.loading { width: 100%; display: flex; flex-wrap: wrap; .wrapper { width: 50%; img { width: 100%; height: 254px; } }}</style>html 代码段<template>

1、安装 cnpm install vue-touch@next --save2、引入 在main.js中 import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) v-touch可以是自定义名称3、使用: Vue.use注册的name名称，默认该标签为div <v-touch (1)替换标签 ...

创建一个axios.js文件import axios from 'axios';import baseUrl from '../utils/baseUrl';const config = { baseURL: baseUrl() || "", timeout: 60 * 1000, // Timeout withCredentials: true, // Check cross-site Access-Control }; const request = axi

在echarts中series属性中，有一个itemStyle的属性是用来设置每一项的样式的，在itemStyle中的color属性用于设置颜色，支持单色、线性渐变、径向渐变和纹理填充等，好像是每个样式（line、bar等）的都有这个属性，大家可以在官网查看。还是原来那个图，改变series中的第一个对象中的color，其中x，x2，y，y2分别表示四个不同的方向( 此处指1 ——> 0的方向 )：x : 从左向右1 ——> 0 x2：从右向左1 ——> 0 y：从上向..

官网入口：http://mockjs.com/安装：npm i mockjs --save-dev创建mock.js文件mock.js// 引入mockjsimport Mock from 'mockjs'// 图片大小定义let size = [ '300x250', '250x250', '240x400', '336x280', '180x150', '720x300', '468x60', '234x60', '88x31', '120x90',..

params传参(4种)1.给路由的规则中配置接收参数 { path: '/details/:yaxu', name: 'details', component: () => import( '../views/Details.vue') },2.发送数据（1）编程式导航发送数据2种写法 1.this.$router.push("/路径/数据") 示例:this.$router.push('/details/我是从one页面过来的')

Web App即是一种框架型APP开发模式(HTML5 APP 框架开发模式)，该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。原生APP又称Native App，该开发针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑

第一部分：axios的基础用法- get和 delete请求传递参数通过传统的url 以 ? 的形式传递参数 restful 形式传递参数 通过params 形式传递参数- post 和 put 请求传递参数- 通过选项传递参数 - 通过 URLSearchParams 传递参数第二部分(1)：发送get请求的三种方式 #1. 发送get 请求 axios.get('http://localhost:3000/adata').then(function(r...

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。全局守卫： beforeEach: 全局前置守卫 afterEach: 全局后置守卫 beforeResolve:全局解析守卫。 组件内部守卫...

1.to指定跳转的路由 <router-link to="/home">home</router-link>2.tag不想router-link渲染成＜a＞标签？很简单，只需要给<router-link>添加一个属性tag即可<router-link to="/home" tag="button">home</router-link><!--渲染成button--><router-link

keep-alive概念它是vue的一个内置组件，作用于组件切换时把状态保留在内存中，防止重复渲染DOM(在你的开发过程中，有一些组件没必要多次渲染)，在包裹组建动态时，它会把不活动的组件缓存下来，而不是销毁它们。使用可以直接当做标签，把要保存的内容放进去keep-alive props属性include : 字符串或正则表达式，只有匹配的组件会被缓存 exclude: 字符串或正则表达式，任何匹配的组件都不会被缓存实际运用需要知道组件的name，项目复杂的时候不是很好的选择

安装npm i vue-calendar-component --savecnpm i vue-calendar-component --save //国内镜像使用//vue文件中引入import Calendar from 'vue-calendar-component'; components: { Calendar } <Calendar v-on:choseDay="clickDay" v-on:changeMonth="

当我们创建3.0的项目时，用的是vue create vue4-demo,这个时候下载下来的vue还是2.0的版本，然后需要用一个插件升级一下，输入vue add vue-next,接下来就会出现报错错误原因：系统禁止运行脚本解决方案按住win + r键，在系统中找到程序PowerShell，然后以管理员身份运行输入如下命令set-ExecutionPolicy RemoteSigned // set-ExecutionPolicy 更新执行策略// RemoteSigned

一 安装及版本切换查看当前版本，如果是2开头说明当前使用的是vue-cli2，3开头的话就是vue-cli4vue --version如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装安装3.0版本:npm install -g vue-cli安装3.0版本：npm install -g @vue/cli版本切换，即卸载当前版本，安装另外的版本从2.0升级到3.0：npm uninstall -g vue-clinpm install

1 应不应该使用vuex当全局的变量不超过20,30个时，尽量不要使用vuex，会增加体积。那么有什么方案可以代替vuex呢？①bus在main.js全局挂载:Vue.prototype.bus=new Vue();发送事件:this.bus.$emit('事件名')接收事件:thia.bus.$on('事件名')②新建一个store.jsimport vue fro...

axios在企业级vue项目中的应用（附带axios正确打开方式)vue中axios的封装axios的二次封装

1结合router，缓存部分页面使用$route.meta的keepAlive属性：<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepA...

①先在我们的登录页面存储一个登录数据// 登录成功时保存一个登录状态；sessionStorage.setItem("flag", 1);② 添加路由守卫方法一： 直接在路由中添加const router = new VueRouter({ ... }) // 路由守卫 router.beforeEach((to, from, next) => { ...

最近产品经理说让把首页的数据都改成mock写的。学了一些，主要还是用的Mock.Random()1 先对axios进行简单封装在apiconfig下新建一个api.jsimport axios from 'axios'import vue from 'vue'// axios.defaults.baseURL='http://www.baibai.com';axios.de...

https://blog.csdn.net/xy19950125/article/details/83823112https://www.cnblogs.com/tongjiaojiao/p/11812194.html

1 vuex的基础vuex主要应用于vue中管理数据状态的一个库，通过创建一个集中的数据存储，供程序中所有组件访问。先创建一个项目叫做vuex-testnpm installnpm install install express -gnpm install -g vue-clivue init webpack-simple vuex-testcd vuex-testnpm...

1 webpack的基础知识webpack是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，并依据规则生成对应的静态资源。安装：先安装nodex.js，再安装npm install webpack -g 然后再npm install webpack-cli -g检查版本webpack -v2 打包一个js到另外一个jswebpack sh...

一、显示隐藏切换（v-show）二、组件之间的切换。三、路由切换。（对地址栏和数据请求）

最近需要做内容的编辑和上传，所以需要用到富文本编辑器。刚开始引用的百度的富文本，发现虽然功能比较多，但是还得跟后台配合，而且样式什么的也比较麻烦，所以还是用了vue-quill-editor这个编辑器，比较简单。1 安装npm install vue-quill-editor --save2 引入import 'quill/dist/quill.core.css'import...

项目当中有个安全帽管理，现在用到的是element，但是发现这个框架里边带的没有帽子的图标，所以就去阿里下载了一个。具体的使用方法如下1. 在阿里icon上创建一个给element扩展的项目按照上图中的步骤，创建一个element扩展icon项目，注意第4点2. 添加icon到项目中在图标库中找到你想要的icon后，加入购物车，然后点击右上角的购物车，把icon添加到你的ele...

最近写了两个页面，是跟百度地图有关的，本来以为是用的鹰眼的轨迹，才发现没那么麻烦，直接用的是百度地图自带的api。1 轨迹回放<template> <div class="map"> <!--面包屑--> <span class="content_span"> <el-breadcrumb sepa...

想要实现一个点击一行，改行的背景色改变，高亮，如下图所示1、先开启element的高亮选项<el-table :data="page_datas" border stripe highlight-current-row # 开启element table 行高亮选项 style="width: 100%"> <el-...

之前用element写页面都是写的一级表头，今天后台让写一个多级表头的页面，刚开始也很蒙。后来发现element官网中有教学，于是就做出了下面这样的效果其实思路很简单，只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。下面是代码 <el-table ...

以前在写渲染页面的时候，如果表格里需要对一个数据就可以用插槽和过滤器一起用，也可以用三元运算符。但是如果数据需要判断的特别多，而且后期还有可能更改的话，那过滤器里的东西就不能写死了。这个时候，后台给了一个字段的接口，可以通过这个接口查询需要用到的各个页面的数据，然后放到一个数组里，结合过滤器一起用。1 先定一个空数组arr:[]2 通过字典的接口获取到数据，并且放到数组里 ...

后台登录页面需要写角色和权限两个页面，这里要根据用户登录时，判断是否有权限显示左侧的信息。我用了vuex存储动态路由的信息，因为一个页面只能export default一个，所以存到了vuex里，好几个页面需要用到。然后我只想让admin和boss两个用户登录之后，显示出来管理的页面，其他的只能进入首页。1 vuex里的动态路由state:{ token:window.local...

用了element中的data-timer日期时间选择器。然后出来的value的格式跟我想要的格式不一样，所以需要转换，这个时候为了方便，可以用moment插件。1 先下载npm install moment2 引入const moment = require('moment');//在需要的页面引入就行3 使用dataTimeFrom:moment(_this.a...

大家都知道element中有个导航菜单，它有个属性default-active，用来设置默认激活的index。这个值原来我一直写的都是死的，后来发现当刷新页面之后，就会出现问题，所以这里给它变成活的。下面是我用的办法。第一，先给el-menu设置一个属性:default-active="activeIndex"第二，在数据里写上这个值data(){ activeInde...

上图为公司要求做的效果，做一个饼状图。这里记录一下第一次用的代码<template> <div id="echart_two"></div></template><script> var echarts = require('echarts'); export default { mounted(){ ...

1 验证手机号/*首先看template部分,v-model后面记得要加.number的修饰符*/<el-form-item label="手机号" prop="mobile" > <el-input v-model.number="addform.mobile" maxlength="11"></el-input></el-form-it...

当我们通过接口调取数据时，有那么一两秒的时间，是在动态的加载数据，有可能会出现一个 暂无数据 的尴尬场景，这个时候，我们可以用到loading了。我们可以以下面这种优雅的方式去使用它。先写一个 loading.js 文件：import { Loading } from 'element-ui';let loadingCount = 0;let loading;const sta...

刚开始存储token的时候，存到了local里。后期应领导的要求，存到cookie里，因为可以设置过期时间。这里对cookie记录一下简单的封装。首先建立一个cookie.js，可以跟main.js同级//cookie的设置var setCookie=function (name,value,day){ var strCookie=""; //判断name和value是否存在...