![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js
上海_彭彭
这个作者很懒,什么都没留下…
展开
-
Vue中使用element-ui中的el-table时修改列的字体颜色
<el-table-column prop="isPass" label="是否通过"> <template scope="scope"> <span v-if="scope.row.isPass==='审核通过'" style="color: green">审核通过</span> <span v-else-if="scope.row.isPass==='待审核'">待审核</span>原创 2022-01-05 23:19:50 · 818 阅读 · 0 评论 -
【前端】element 改变icon图标大小,颜色
<i class="el-icon-s-data" style="color:blue;font-size:100%"></i>color 可以动态取值,改变颜色,font-size 可以改变图表的大小原创 2022-01-05 16:22:19 · 4515 阅读 · 0 评论 -
Vue-Promise 异步操作 总结
1. Promise 是一个构造函数, 我们可以用new Promise() 获取一个Promise 实例2. Promise 有两个函数,分别是 resolve 成功之后的回调函数, reject 失败后的回调函数。3. Promise 可以访问.then() 方法4. Promise 表示一个异步操作,每当我们new 一个Promise 的实例, 这个实例 就表示一个具体的异步操作。5...原创 2019-10-23 16:24:09 · 1895 阅读 · 0 评论 -
前端应用_Vue_vue-router 用router-link代替a 标签,设置默认的路由
之前 用 a标签 ,每次都需要在href 里面添加 #, 用router-link 可以避免。 <router-link to='/login' tag="span">登录</router-link> <router-link to='/registe' tag="span">注册</router-link>我们想设置默认路由显示指定的...原创 2019-08-17 12:40:19 · 3745 阅读 · 0 评论 -
前端应用_Vue_(一行代码解决)transition-group在table表格中失效的问题(一行代码解决)
这个问题卡了我一下午, 一直找不到答案, 然后用谷歌浏览器,解决一分钟就解决了,就用 table transition-group 搜索 里面前三都是答案,我本人立帖为证 以后查问题,不在百度 直接去谷歌浏览 . 如若违反判定跑步4公里.在看的朋友如有我的毛病,请及时改正.我之前是这么写的: <table class="table table-bordered table-hov...原创 2019-08-12 18:16:25 · 1930 阅读 · 1 评论 -
前端应用_Vue_使用transition-group实现列表动画.
前面实现的只是 一个元素的动画,下边咱们实现一组,用到的 transition-group思路如下:创建一个自动生成列表的ul li 组合 , 然后点击添加 button 能添加列表记录用trasition-group 包裹起来 需要动画的content定义 style 样式, v-enter , v-enter-to ,v-enter-active , v-leave,v-leav...原创 2019-08-12 18:00:52 · 468 阅读 · 0 评论 -
前端应用_Vue_钩子函数实现小球半场动画
前面我介绍的都是 有enter 还有leave ,但是有的场景就只是enter , 没有leave动画,我所认识的场景有这些 :1.大家玩游戏都知道,当我们充值元宝或者砖石的时候, 充值完成了, 有个慢动作,就是金币或者元宝 进入一个咱们储存的袋子,并且还有配音 。2.我们购物的时候,当点击加入购物车的时候, 有个动画 就是 从开始点的地方 直接跑到购物车的图标里3. 当我们玩游戏的时候,...原创 2019-08-12 15:46:08 · 370 阅读 · 1 评论 -
前端应用_Vue_通过emit事件调用向父组件传值
子组件如果想修改父组件的属性是不可能的, 也不推荐, 不能直接改难道就没有办法呢难不了,优秀的vue 同学 ,先看张图吧从这张图 可以看出两个问题1.父传值给子 需要用 props ,2. 子传值给父 需要 emit 事件.看下边实例吧,我自己学的 :<!DOCTYPE html><html lang="en"><head> <m...原创 2019-08-15 18:26:09 · 523 阅读 · 0 评论 -
前端应用_Vue_父组件传递值给子组件
父组件 把 data的值想传递给子组件, 通过一个关键词 props步骤如下:首先在适用组件的地方 进行 数值绑定, v-bind:parentMsg=‘msg’ 这个步骤就是 把父组件的msg值绑到parentMsg上面在子组件创建 props ,这里保存都是 父组件传递的值 比如 parentMsg ,然后再使用, 注意 要用props里面的 ,用的时候 直接用插值表达式就...原创 2019-08-15 15:59:05 · 181 阅读 · 0 评论 -
前端应用_Vue_使用第三方 animate.css 实现动
前面是vue 自带的, 需要定义style 非常的烦, 怎么解决呢, 用第三方库就行了, 他已经定义好了css 样式,拿来直接用就行了 。例子如下: <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duratio="300"> <h3...原创 2019-08-11 19:18:34 · 158 阅读 · 0 评论 -
前端应用_Vue_使用过度类名实现动画
为什么 要使用动画,目的就一个提高用户体验,我们一般 用在 位移 和 淡进淡出的情况。下边我们举个例子, 用v-if 控制元素的显示和不显示,显示和不显示之间 用动画效果,思路如下:创建一个h3标签, 并插值 ,设置v-if=“flag” , 并创建vue 对象, 在data里添加flag 为false创建一个button ,然后绑定一个click 时间, @click=”flag=...原创 2019-08-11 18:54:51 · 142 阅读 · 0 评论 -
前端应用_Vue_ 组件切换动画
通过 mode 属性,设置组件切换时候的 模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2019-08-14 23:55:51 · 152 阅读 · 0 评论 -
前端应用_Vue_实现列表删除和删除时候的动画效果
下边实现 删除的效果,代码如下:<td style="color: #0e9aef" ><a href="" @click.prevent="del(item.id)">删除</a></td>del(id){ var list=this.list.filter(item => {if(item....原创 2019-08-12 19:32:58 · 1834 阅读 · 0 评论 -
前端应用_vue_利用子组件添加测试用例,然后让组建自动刷新展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap...原创 2019-08-17 11:25:04 · 247 阅读 · 0 评论 -
前端应用_Vue_计算案例-computed监听文本框数据的变化
总结:computed 实际是个方法, 但是用的时候 把他当作一个属性, 不需要在后边加()一直监听数据的变化, 如果有变化立即返回一个值computed 还有一个功能就是 缓存的共功能, 就是 当数据不变化的时候就一直保存之前的值, 不管你使用多少次代码如下:<!DOCTYPE html><html><head> <meta cha...原创 2019-08-18 13:17:16 · 1353 阅读 · 0 评论 -
前端应用_Vue_计算案例-使用watch和keyup监听文本框数据的变化
我们想达到效果就是, 当我在一个文本框输入1 ,在另一个文本框输入2 , 这个时候不需要点击任何button ,第三个文本框要显示3 ,没有出发事件 ,就像达到 两个值相加, 关键点要用到的是监听文本框的数据。下边我介绍两个方法,第一个是 keyup 事件触发, 当我抬起鼠标的时候就自动触发一个相加事件第二个 就是 神奇的 watch 监听,他可以监听到 新的值变化,推荐这个, 比较灵活...原创 2019-08-18 12:09:48 · 726 阅读 · 0 评论 -
前端应用_Vue_使用router 设计经典布局
使用经典布局的关键是这个, 在根目录配置三个组建 ,让他同时显示如下:var routerObj=new VueRouter({ routes:[ {path:'/',components:{ default: tmp1, left:tmp2, main:tmp3, }}], ...原创 2019-08-17 19:15:01 · 501 阅读 · 0 评论 -
前端应用_Vue_路由-路由的嵌套
总结:如果想嵌套 组建,在组建的routes 里使用children 关键字 再套一个路由配置如下: var routerObj=new VueRouter({ routes:[ // {path:'/',redirect:'/login'}, {path:'/login',component:tmp1, children:[...原创 2019-08-17 18:02:10 · 239 阅读 · 0 评论 -
前端应用_Vue_路由传参-使用query方式传递参数
总结:目的 获取 URL 里的参数 ,例如 /login?user=xiaowang ,如何把这个参数传递到组建里设置router-link URL ,让它含有参数通过 $route.query.name 格式获取应用参数 到组建去 、代码如下:<!DOCTYPE html><html><head> <meta charset='...原创 2019-08-17 15:02:59 · 1216 阅读 · 0 评论 -
前端应用_Vue_设置router 切换路由动画
<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='vi...原创 2019-08-17 14:33:52 · 299 阅读 · 0 评论 -
前端应用_Vue_两种方法 设置 router-link 样式.
当我们点击 展示相应组建, 标签会加个class 属性,如图,如果想高亮就需要 重写这个样式 <style> .router-link-active{ background-color: green; font-size: larger; color: aliceblue } </style>我们也可以自定义一下, 在 rou...原创 2019-08-17 14:06:42 · 11084 阅读 · 1 评论 -
前端应用_Vue_vue-router应用过程
总结:导入 vue-router创建router 实例对象,并配置 path 和 需要匹配的组建创建组建模板对象让 router 实例对象 和vue 实例对象进行绑定 , 监控URL的变化,并展示路由使用占位符 router-view 标签 ,用于展示用的<!DOCTYPE html><html><head> <meta chars...原创 2019-08-17 11:38:22 · 142 阅读 · 0 评论 -
前端应用_Vue_ 用component标签控制组件切换
<!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-Com...原创 2019-08-14 23:51:39 · 336 阅读 · 0 评论 -
前端应用_Vue_ 用v-if和v-else控制组件切换
我们用组件想达到的效果如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="http://cdn.bootcss.com/bootstrap/3.2...原创 2019-08-14 18:46:52 · 804 阅读 · 0 评论 -
前端应用_Vue_通过属性绑定为元素设置class类样式(介绍四种方法,用哪个随你)
属性绑定 用 v-bind , 如果想引用 class 样式, 如果没有这节知识,恐怕你要抓头挠腮 了.这个节不用介绍多就介绍四种方法,实际原理差不多,如果不用属性绑定 我们取值 是这样的,示例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2019-08-06 17:43:08 · 1271 阅读 · 0 评论 -
前端应用_Vue_利用v-model达到表单双向数据绑定
v-model 指令是vue 指令中最常用的, 前面的章节 我讲过 v-bind , 只能达到利用里面的值,如果想修改后,再保存是实现不了的, 有一个方法 就是额外的写方法 。v-model 就是为了解决这个问题 应运而生。举个例子吧代码如下:<!DOCTYPE html><html lang="en"><head> <meta ...原创 2019-08-06 16:18:38 · 297 阅读 · 0 评论 -
前端应用_Vue_利用indexOf 和forEach , filter 两种方法r进行搜索条件的过滤
indexOf() 返回某个指定的字符在某个字符串中首次出现的位置。如果没有找到就返回-1;一般可以用作查询。indexOf() 方法对大小写敏感!所以之前你要把所有查询到内容变为小写。var str=str.trim().toLowerCase()var str=“Hello World!”str.indexOf(“Hello”) —0str.indexOf(“world”) ...原创 2019-08-08 19:04:25 · 7789 阅读 · 0 评论 -
前端应用_Vue_ 介绍三种方法删除商品列表里记录
上一节 我们只是能添加 记录, 那如何删除呢, 一共有两个方法一个是利用 数组的 some() 方法, 一个是 findIndex 方法。总结下思路 ,然后写代码 ,第一 先确认 ,删除记录的id第二 在删除记录的 button, 绑定一个删除的方法,并把id 当作参数进去。第三 写删除方法, 删除方法 首先根据 传入的id 找到数组对象的 index第四 找到index之后 调...原创 2019-08-08 17:07:58 · 1263 阅读 · 0 评论 -
前端应用_Vue_用示例代码 解释五大>>事件修饰符(.stop,.prevent,.capture,.self,.once)
概况如下.stop 阻止冒泡.prevent 阻止默认事件.capture 添加事件侦听器时使用事件捕获模式.self 只当事件在该元素本身触发时触发回调.once 事件只能触发一次示例代码表现如下:当点击 save button 的时候, 会冒烟弹出三句话 ,依次为button > small_box > big_box<!DOCTYPE html&...原创 2019-08-06 15:49:48 · 1011 阅读 · 0 评论 -
前端应用_Vue_经典案例用vue实现跑马灯
跑马灯 就是文字 不停的 循环显示, 显示效果如下:思路如下:创建 两个button ,一个显示文字的标签让标签的文字 取自 vue 对象 data 里的msg写个方法放到vue 对象 methods 里, 让第一个字符 拼接到 后边button 绑定上边的方法把上边的方法用 setInterval 方法进行迭代 ,并把返回值保存在data 里(status)取到data 里...原创 2019-08-05 23:37:16 · 556 阅读 · 0 评论 -
前端应用_Vue_Vue常见的指令v-on事件绑定机制
上一节 v-bind 是属性绑定, 如果是方法 就需要用v-on 。如果咱们想触发一个 alert(“hello”)事件,如果不用vue 写, 就需要以下的操作:先找到 domvar btn=document.getElementById(“btn”)然后写一个触发函数如下btn.οnclick=function(){alert(“hello”)}小伙伴该说了, 那如何才能屏蔽操作...原创 2019-08-05 18:43:07 · 643 阅读 · 0 评论 -
前端应用_Vue_Vue常见的指令v-bind使用场景
问题是:如下的代码片 title和value , 我想用 vue对象 data 里的值,如何实现呢?<input type="button" value="" title=""><script> var vue=new Vue( { el:'#pp', data:...原创 2019-08-05 17:59:27 · 990 阅读 · 0 评论 -
前端应用_Vue_Vue常见的指令v-cloak v-text v-html 优缺点以及使用场景分析
所有的Vue指令有个共同的特点就是 开头是v-, 有了指令能实现适合我们的场景, 下边我们看下这几个指令吧以下边的实例讲解:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <...原创 2019-08-05 17:00:43 · 1336 阅读 · 0 评论 -
前端应用_Vue_全局过滤器基本使用
这个是重点一定要记住,过滤器有两个地方可以使用第一 在插值表达式内, 例如 {{id}} ,使用方法为 {{ id | idpe}}通过管道进行处理第二 在v- bind 属性知道了在哪使用, 下边介绍如何定义一个过滤器Vue.filter('过滤器的名称',functon(data){})过滤器的第一个参数已经写死了,就是管道前边的值,下边写个实例,当p标签的 文字 爱情...原创 2019-08-09 00:10:22 · 542 阅读 · 0 评论 -
前端应用_Vue_ v-for 指令的四种使用方式(已经齐全了,不要再找了)
V-for 指令 取数组的值<div id="pp" > <p v-for="item,index in list">每一项的值为:{{item}}-----索引值为:{{index}}</p></div><div> <script> var vue=new Vue( ...原创 2019-08-06 19:32:36 · 2965 阅读 · 0 评论 -
前端应用_Vue_-v-if 和 v-show 优缺点(分析性能消耗)
请看下边的示例代码:<div id="pp" > <p v-if="flag">我是由 v-if 控制的</p> <p v-show="flag">我是由 v-show控制的</p> <input type="button" value="click" @click="trigger"><...原创 2019-08-06 20:05:57 · 3442 阅读 · 0 评论 -
前端应用_Vue_解释生命周期图
组建的生命周期 一直都在围绕了 三个部分页面元素展示内存模版 , 内存也可以渲染dom树,此时只是渲染了模版并没有真正挂载到页面。vue 的mode 也就是 vue 的数据层。比如 数据层的数据 改变了,就意味着 页面渲染了吗, 答案绝对不可能的, 也需要重新渲染一份内存dom树,然后再挂载到页面去渲染。流程图为如下:beforeCreate 阶段此阶段只是初始化vue对象,获取...原创 2019-08-10 12:35:26 · 687 阅读 · 0 评论 -
前端应用_Vue_钩子函数的练习之私有指令的写法
上节 我们用的是全局的,全局指令我们改写成私有如下:<div id='p' v-mystyle="'red'">突然好想你,你会在那里,过的好不好</div>var vue=new Vue( { el: '#p', directives: { ...原创 2019-08-10 00:18:26 · 173 阅读 · 0 评论 -
前端应用_Vue_钩子函数的练习之使用binding 取传递的值
前面写 focus 方法, 也说了 必须用 inserted ,因为你bind 只是创建的过程,但是你没有 insert dom页面, 还是没有生成页面效果, 下边我们创建自定义的的样式 就不需要插入了, 因为他直接可以读取并显示。总结: 自定义行为 要用inserted ,自定义样式 要用 bind 就行了我们想创建一个color 样式如下: <input ty...原创 2019-08-09 23:48:19 · 1578 阅读 · 0 评论 -
前端应用_Vue_ 利用vue的 v-model 和v-for 在商品列表里添加商品
我们的预期结果为,当输入 id 和 name 然后点击 添加button, 在table 里添加 一条记录这是我自己写的代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> ...原创 2019-08-07 18:32:21 · 566 阅读 · 0 评论