![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Sparks550
世界上只有一种真正的英雄主义,那就是看清生活的真相之后,依然热爱生活。
展开
-
Vue修改密码功能的实现
样式基本需求输入框不能为空旧密码表单提交时必须正确两次输入新密码一致限定新密码的复杂度,这里是长度在 6 到 20 个字符代码<template> <el-form ref="form" :model="user" :rules="rules" label-width="80px"> <el-form-item label="旧密码" prop="oldPassword"> <el-input v-model="user.原创 2022-01-13 18:45:20 · 4720 阅读 · 2 评论 -
Vue,三级联动全局组件(1408)
由于三级联动,在Home、Search、Detail等页面都有使用,因此把三级联动注册为全局组件。好处:只需要注册一次,就可以在项目任意地方使用原创 2022-01-07 10:25:10 · 1398 阅读 · 0 评论 -
Vuex--状态管理库、模块式开发
Vuex是什么vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据切记:并不是全部的项目都需要Vuex。如果项目小,完全不需要Vuex;如果项目很大,组件很多、数据很多,数据维护很费劲,建议使用vuex.安装cnpm install --save vuex核心概念state:仓库存储数据的地方mutations:修改state的唯一手段actions:处理action,可以书写自己的业务逻辑,也可以处理异步getters:理解为计算属性,用于简化仓库数据,让组件获原创 2022-01-06 16:58:31 · 366 阅读 · 0 评论 -
Vue nprogress插件进度条的使用
安装cnpm install --save nprogress去package.json文件查看是否安装成功使用项目中只要有请求,即可使用。在请求拦截器中使用///对于axios进行二次封装import axios from "axios";//引入进度条import nProgress from "nprogress";//start:进度条开始;done:进度条结束//引入进度条的样式import "nprogress/nprogress.css"//1:利用axios对原创 2022-01-06 15:26:31 · 402 阅读 · 0 评论 -
Vue,跨域问题
什么是跨域协议、域名、端口号不同请求,称之为跨域。其他解释: 首先狭义的同源就是指,域名、协议、端口均为相同。 跨域,是指浏览器不能执行其他网站的脚本如何解决JSONP、CROS、代理(webpack)等配置代理-webpackvue项目中,实际放在vue.config.js中module.exports = { //关闭eslint lintOnSave: false, //代理跨域 devServer: { proxy: {原创 2022-01-06 15:04:10 · 121 阅读 · 0 评论 -
vue路由跳转、传参
1.路由跳转有几种方式比如:A->B声明式导航:router-link(务必有to属性),可以实现路由的跳转 <p> <span>请</span> <!-- 声明式导航:务必要有to属性 --> <router-link to="/login">登录</router-link> </p>编程式导航:利用的是组件实例的$router.push|replace方法,可以试想路由的条状2.路由原创 2022-01-05 16:09:38 · 119 阅读 · 0 评论 -
v-if、v-show、v-for、:key、:class与:style、:value
v-ifv-if:是vue 的一个内部指令,指令用在我们的html中。v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称 <div id="app"> <div v-if="isLogin">你好:</div> <div v-else>请登录后操作</div> </div> <script type="text/javascrip原创 2021-12-31 16:00:05 · 431 阅读 · 0 评论 -
Vue代码实例解析,inline、model、v-on
<template> <div class="app-container role"> <el-card class="el-card"> <div class="roleTitle">{{ $t("message.Role_management") }}</div>//$t,引用中文语言包,把中文字符的数量拉至最低 <el-form :model="queryParams" ref="queryForm" :inline="t原创 2021-12-30 10:50:50 · 4236 阅读 · 1 评论 -
Vue组件分类、路由的跳转
路由组件和非路由组件的区别路由组件文件一般放在view|page文件夹呢;非路由组件一般放在components。路由组件需要在router文件夹中注册(使用的即为组件的名称),非路由组件在使用的时候,一般都是以标签的形式使用。路由的跳转路由跳转有两种形式声明式导航router-link,可以进行路由的跳转编程式导航push|replace,可以进行路由的跳转说明:声明式导航能做的,编程式导航都能做;但是编程式导航除了可以进行路由跳转还可以做一下其他的业务逻辑.//声明式导航:仅进行原创 2021-12-29 16:06:59 · 487 阅读 · 0 评论 -
Element-UI安装使用教程
是什么Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI官方介绍:Element-Ul是一个网站快速成型工具,一套为开发者,设计师和产品经理准备的基于Vue 2.0的桌面端组件库安装方法一 npm安装进入你已经创建好的Vue项目,然后输入下面命令npm i element-ui -S注意:如果安装进程一直没变在,像停在某个界面,可以试试更换成淘宝的源,输入下面npm config set registry http原创 2021-12-27 12:11:11 · 1292 阅读 · 0 评论 -
Vue,router路由使用详情
没有需要安装如图,假如package.json中没有vue-router(图红框部分),需要再终端安装命令:npm install vue-router使用需要在main.js引用自己创建的router文件夹,然后new一下原创 2021-12-22 19:36:28 · 412 阅读 · 0 评论 -
mvvm设计模式
理解为主Vue的编程设计模式应该叫mvvm的设计模式。Vue是面向数据编程,程序中定义了数据,然后定义了模板,Vue就可以把数据和模板自动进行关联,然后挂载到真实的DOM上,展示给用户。mvvm解释:第一个m代表model数据,第一个v代表view视图,最后两个字幕代表viewModel视图数据连接层。<script> const app = Vue.createApp({ data() { return {原创 2021-11-22 11:33:54 · 557 阅读 · 0 评论 -
Vue小知识,实时更新(常用)
写在最前面:layui的作者贤心,去拥抱vue。之前用过vue,即使是基础,也要继续学习,更系统的了解ta,才能更宏观的使用它,更是为了让自己学有所思。1.createApp()和mount()方法讲解<body> <div id="app"></div></body><script> const app = Vue.createApp({}) app.mount("#app")</script>原创 2021-11-22 11:23:22 · 743 阅读 · 0 评论