![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 54
风筱默染
喜欢打游戏,打羽毛球,数码圈发烧友。爱好:学JavaScript和vue。
展开
-
vue的表单验证规则
<template><div> <el-input v-verify="data.name"></el-input> <el-input v-verify="data.idCard"></el-input></div></template><script> export default { data() { return { data:{原创 2022-04-27 16:17:01 · 1928 阅读 · 0 评论 -
vue切换菜单
示例图:代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> htm原创 2022-04-21 15:37:55 · 1865 阅读 · 0 评论 -
vue实现拖拽效果
效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>vue实现拖拽</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script> <script src="https://cdn.suoluomei原创 2022-04-20 13:48:56 · 520 阅读 · 0 评论 -
双击全屏事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</ti原创 2022-03-31 18:16:39 · 107 阅读 · 0 评论 -
防抖和节流
函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。//防抖debounce代码:function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeout(timeout); //.原创 2022-03-09 16:29:33 · 76 阅读 · 0 评论 -
vue的dialog点击屏幕空白处不关闭
代码如下:<el-dialog :close-on-click-modal="false" ></el-dialog>在dialog里面写 **:close-on-click-modal=“false”**即可。原创 2022-02-21 17:52:34 · 1495 阅读 · 0 评论 -
Vue自动点击功能
页面加载的时候,怎么实现自动点击功能<button @click="test" v-trigger></button>method(){},// directives是自定义指令directives:{ trigger:{ inserted(el,binging){ el.click() } }}// 页面加载的时候,button按钮会自动触发点击事件...原创 2022-02-17 13:58:11 · 1624 阅读 · 0 评论 -
vue怎么关闭eslint
在config.js文件里面写module.exports = {lintOnSave:false}原创 2022-02-11 15:41:44 · 428 阅读 · 0 评论 -
vue开发笔记
1. 项目开发准备项目描述技术选型API接口你能从此项目中学到什么?2. 开启项目开发使用脚手架创建项目安装所有依赖/指定依赖开发环境运行生产环境打包与发布3. 搭建项目整体界面结构stylus的理解和使用 结构化, 变量, 函数/minxin(混合)vue-router的理解和使用 router-view/router-link/keep-alive $router: 路由器对象, 包含一些操作路由的功能函数, 来实现编程式导航(跳转路由) $r原创 2021-10-29 17:08:38 · 84 阅读 · 0 评论 -
vue路由笔记
1.路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现,并完成资源的分发2).前端路由是依靠hash值(锚链接)的变化进行实现后端路由性能相对前端路由来说较低,所以,我们接下来主要学习的是前端路由前端路由的基本概念:根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系前端路原创 2021-10-29 17:04:50 · 82 阅读 · 0 评论 -
怎么创建vue项目
首先先打开cmd输入命令 vue ui此时,Chrome浏览器会弹出,1.4.进入功能面板,必须安装的(1.Babel,2.Router,3.Linter/Formatter,4.使用配置文件)注释:Linter/Formatter是代码规范,如果不喜欢那就自行去掉。6.希望保存,就填写,不保存就点击创建项目7.此时,项目已经创建完成。接下来就是安装一些要使用的插件和依赖。安装完成之后就要对其进行配置。9.配置axios库10.到这里,项目已原创 2021-10-27 15:43:47 · 81 阅读 · 0 评论 -
Vue路由跳转
1、跳转外部链接并覆盖当前页<el-button type="primary" @click="cimsInputClick">应用入口</el-button>cimsInputClick () { window.location.href = 'https:\\www.mscims.com' }2、跳转不覆盖当前页面,在新窗口打开<el-button type="primary" @click="cimsInputClick">应用入口<原创 2021-10-20 14:49:48 · 571 阅读 · 0 评论 -
Vueclass与style绑定
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aClass{ color: #FF0000; } .bClass{ color: #0000ff; } </style></head><body> <d原创 2021-10-19 16:25:13 · 40 阅读 · 0 评论 -
Vue计算和监视属性
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 1.计算属性: 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2.监视属性: 通过vm对象的¥watch()或watch配置来监视原创 2021-10-19 16:21:15 · 55 阅读 · 0 评论 -
Vue的轮播图和显示日期
<template> <div id="slider"> <!-- 显示当前时间日期 --> <h2>{{nowTime}}</h2> <div class="window" @mouseover="stop" @mouseleave="play"> <ul class="container" :style="containerStyle"><!-- 这是图片列表,排成一排 --原创 2021-10-12 15:51:13 · 368 阅读 · 0 评论 -
vue怎么升级最新的elementUI
第一步,卸载当前旧版本的elementUI打开终端,运行以下命令:npm uninstall element-ui等卸载完成之后,再运行以下命令:npm i element-ui -S这样,就可以了。原创 2021-09-27 14:38:04 · 854 阅读 · 0 评论 -
Vue-基础语法04
接口调用的方式有哪些原生ajax基于jQuery的ajaxFetchPromiseurl 地址格式有哪些传统的urlRestful形式的urljS中常见的异步调用定时任何 –ajax事件函数Promise解决了什么问题主要解决异步深层嵌套语法更加简洁如何定义一个promise实例我们使用new来构建一个Promise Promise的构造函数接收一个参数,是函数,并且传入两个参数: resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作原创 2021-09-11 10:50:09 · 50 阅读 · 0 评论 -
Vue-基础语法03
如何全局注册组件Vue.component(‘组件名称’, { })组件注意事项组件参数的data值必须是函数同时这个函数要求返回一个对象组件模板必须是单个根元素组件模板的内容可以是模板字符串如何定义局部组件在Vue 中 通过 components注意 全局的不带s 局部的带s父组件向子组件传值-props属性值类型可以传递静态值也可以传递动态值动态值可以是 字符串 数字 布尔值 数组 对象字组件如何 向父组件传递数据子组件用$emit()触发原创 2021-09-11 10:40:56 · 30 阅读 · 0 评论 -
Vue-基础语法02
单选框如何实现单选?两个单选框需要同时通过v-model 双向绑定 一个值每一个单选框必须要有value属性 且value 值不能一样当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据复选框如何实现复选复选框需要同时通过v-model 双向绑定 一个值每一个复选框必须要有value属性 且value 值不能一样当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据如何实现获取下拉框的选中状态原创 2021-09-11 10:30:31 · 102 阅读 · 0 评论 -
Vue-基础语法01
Vue是什么用于构建用户界面的渐进式框架声明式渲染组件系统客户端路由集中式状态管理项目构建vue 的核心库只关注视图层Vue有哪些优点?易用、灵活、高效简单易上手如何利用Vue将hello world 渲染到页面上1、需要提供标签用于填充数据 注意: 在标签中我们使用插值语法的形式 即 {{}} 进行填充数据2、引入vue.js库文件 注意:一定要先引入Vue文件 在使用Vue语法 因为存在作用域的问题3、使用vue的语法做功能 new Vue() 创建一个Vu原创 2021-09-11 10:20:03 · 218 阅读 · 0 评论 -
Vue项目的登录和注册界面
登录界面,Login.vue<template> <div class="login_container"> <div class="login_box"> <!--表单提交区域--> <el-form :rules="loginFormRules" ref="loginFormRef" label-width="0px" class="login_form" :model="loginForm">原创 2021-09-08 09:38:20 · 8636 阅读 · 6 评论