vue
晓明的日常操作
这个作者很懒,什么都没留下…
展开
-
js两种方法获取当天时间0点到24点的时间戳
https://segmentfault.com/a/1190000018057538转载 2021-11-01 14:10:14 · 1055 阅读 · 0 评论 -
element 中<el-date-picker></el-date-picker>限制时间为只能选7天内的日期用法全解
HTML部分 <el-form-item label="财务审时间:" class="item" prop="financialAuditTime" > <el-date-picker size="small" v-model="queryParams.financialAuditTime" type="datetimerange" format="yyyy-MM-dd HH:mm:ss"原创 2021-11-01 11:51:20 · 1570 阅读 · 0 评论 -
vuex的用法(含vue-cli的安装与使用)
1.什么是vuex?vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据。2.什么是vue-cli?脚手架:vue-cli :vue脚手架帮你提供好基本项目结构本身集成很多项目模板:simple 基本没用webpack 可以使用(大型项目)Eslint 检查代码规范,单元测试webpack-simp原创 2020-10-02 10:48:54 · 365 阅读 · 0 评论 -
vue中@click+router方法实现页面跳转
<template id="vip"> <h1> <button @click="back()">返回</button> 这是vip内容</h1></template><script> export default{ methods:{ back(){ // 返回到上一级原创 2020-10-01 10:54:27 · 7083 阅读 · 0 评论 -
vue中路由的用法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <bo原创 2020-10-01 09:30:36 · 280 阅读 · 0 评论 -
vue组件与动态组件
1.组件的思想,其实是前端模块化/工程化的基础。 把前端页面分成一个个模块基本步骤:定义组件 - 定义模板 - 将组件挂载到你要用的组件上面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-10-01 09:26:32 · 427 阅读 · 0 评论 -
vue中slot插槽的用法
1.什么是插槽?slot插槽:在模板中保留位置,使用的时候可以扩展slot取name值在占位符中 slot=“name值”<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-10-01 08:57:55 · 251 阅读 · 0 评论 -
vue中watch数据监听的用法 (简单易懂一学就废)
1.watch与data,methods同级2.watch放置的是所要监听的数据书写格式为:watch:{数据名(){数据发生变化的时候,触发}},比如监听数据num++ 与数据msg代码如下:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev原创 2020-10-01 08:03:18 · 1398 阅读 · 0 评论 -
vue中自定义全局指令和自定义局部指令
这两个指令的好处就是我事先定义好指令的内容,到用的时候直接调用这个指令就可以了咋用那?1.调用的方法两者的调用方法一样直接在你的标签中 加上v-指令名字:参数(常量)v-指令名字=“参数(变量)”比如v-color:bulev-color=“bule” //bule为变量<p v-color:blue @click="change()" v-if="show">文字{{msg}}</p>牢记书写的格式!!!例子1:比如我想定义字体的颜色,只要我给什么颜色原创 2020-10-01 08:05:04 · 1188 阅读 · 0 评论 -
vue中不用插件实现tab栏
用到的相关属性 v-for, :class="{current:num==index},v-show="num==index",@click="change(index)"代码如下;<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2020-09-29 12:26:10 · 259 阅读 · 0 评论 -
vue中如何解决冒泡和默认行为
1.什么是事件冒泡?事件冒泡的本质:当前div块以及父级div块,以及父级的父级,你懂的。都会被触发的事件。前提是,每个块级都有对应的事件触发方法。2.什么是默认行为?这个比如:<a href="https://www.baidu.com/" >百度</a>你点击之后会直接进入百度页面 那么我只想有链接却不想让他跳转该如何做那?解决办法如下:阻止冒泡:@事件类型.stop阻止默认行为 @click.prevent<!DOCTYPE html><htm原创 2020-09-29 12:12:31 · 1617 阅读 · 0 评论 -
vue中v-model的原理及应用讲解
v-model其实是一个语法糖背后包含两个操作v-bind动态绑定一个value属性v-on给当前元素绑定input事件也就是说以下两段代码等价<input type="text" v-model="message"><!--等同于下面--><input type="text" v-bind:value="message" v-on:input="message=$event.target.value">具体·例子如下:<!DO原创 2020-09-29 11:47:35 · 554 阅读 · 0 评论 -
vue中如何实现在页面手动增删数据
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <bo原创 2020-09-29 11:29:33 · 128 阅读 · 0 评论 -
vue中的v-for的使用方法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <bo原创 2020-09-29 10:51:00 · 1168 阅读 · 0 评论 -
vue中v-if和v-show的区别
v-if与v-showv-if与v-show虽然都可以控制标签的可见性,但是两者对标签的操作却大有不同,v-if控制的是标签是否存在 如果值为真,就是存在,如果值为假,标签不存在!-- v-show控制的是标签显示与隐藏。请看一下代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"原创 2020-09-29 10:46:59 · 84 阅读 · 0 评论 -
vue中动态控制标签属性
<body> <div id="app"> <!--动态控制属性: v-bind:属性='变量' --> <img v-bind:src="src" alt="" v-on:mouseenter="change()"> <div v-bind:class="msg" v-on:mouseenter="c()" v-on:mouseleave="l()"></div> </d.原创 2020-09-29 10:28:03 · 5730 阅读 · 0 评论 -
vue中如何用事件获取当前操作的标签
<div id="app"> <!-- 事件函数内部有一个实参$event代表事件相关参数--> <div v-on:mouseenter="c($event)"></div></div><script src="js/vue.js"></script> new Vue({ c(a){ console.log(a) // a.ta原创 2020-09-29 10:01:31 · 1346 阅读 · 0 评论 -
vue中v-html与v-text的区别
v-html与v-text的区别话不多说直接上代码------------------------------------------ <div id="app"> <!-- 如果变量作为属性值的话,不需要加{{}} --> <!-- html可以识别标签,有xss风险(可以通过html书写病毒,攻击网站) text识别不了标签,把标签当做字符串处理 --> <div v-html="msg"></div&原创 2020-09-29 09:49:16 · 475 阅读 · 0 评论 -
vue中mvvm的解释
1什么是mvvm?简单来说,mvvm是modal-view-viewmodel的缩写。View层View层是视图层,也就是用户界面。Model层Model是指数据模型,也就是后端进行业务处理和数据处理ViewModel层ViewModel是由前端开发人员组织生成和维护的视图数据层。在这里,前端可以对从后端获取的model数据进行转换处理,以便于前端的View层使用。...转载 2020-09-29 09:34:03 · 457 阅读 · 0 评论