3 上海_彭彭

尚未进行身份认证

暂无相关描述

等级
TA的排名 2w+

前端应用_Vue_计算案例-computed监听文本框数据的变化

总结:computed实际是个方法,但是用的时候把他当作一个属性,不需要在后边加()一直监听数据的变化,如果有变化立即返回一个值computed还有一个功能就是缓存的共功能,就是当数据不变化的时候就一直保存之前的值,不管你使用多少次代码如下:<!DOCTYPEhtml><html><head><metacha...

2019-08-18 13:17:16

前端应用_Vue_计算案例-使用watch和keyup监听文本框数据的变化

我们想达到效果就是,当我在一个文本框输入1,在另一个文本框输入2,这个时候不需要点击任何button,第三个文本框要显示3,没有出发事件,就像达到两个值相加,关键点要用到的是监听文本框的数据。下边我介绍两个方法,第一个是keyup事件触发,当我抬起鼠标的时候就自动触发一个相加事件第二个就是神奇的watch监听,他可以监听到新的值变化,推荐这个,比较灵活...

2019-08-18 12:09:48

前端应用_Vue_使用router 设计经典布局

使用经典布局的关键是这个,在根目录配置三个组建,让他同时显示如下:varrouterObj=newVueRouter({routes:[{path:'/',components:{default:tmp1,left:tmp2,main:tmp3,}}],...

2019-08-17 19:15:01

前端应用_Vue_路由-路由的嵌套

总结:如果想嵌套组建,在组建的routes里使用children关键字再套一个路由配置如下:varrouterObj=newVueRouter({routes:[//{path:'/',redirect:'/login'},{path:'/login',component:tmp1,children:[...

2019-08-17 18:02:10

前端应用_Vue_路由传参-使用query方式传递参数

总结:目的获取URL里的参数,例如/login?user=xiaowang,如何把这个参数传递到组建里设置router-linkURL,让它含有参数通过$route.query.name格式获取应用参数到组建去、代码如下:<!DOCTYPEhtml><html><head><metacharset='...

2019-08-17 15:02:59

前端应用_Vue_设置router 切换路由动画

<!DOCTYPEhtml><html><head><metacharset='utf-8'><metahttp-equiv='X-UA-Compatible'content='IE=edge'><title>PageTitle</title><metaname='vi...

2019-08-17 14:33:52

前端应用_Vue_两种方法 设置 router-link 样式.

当我们点击展示相应组建,标签会加个class属性,如图,如果想高亮就需要重写这个样式<style>.router-link-active{background-color:green;font-size:larger;color:aliceblue}</style>我们也可以自定义一下,在rou...

2019-08-17 14:06:42

前端应用_Vue_vue-router 用router-link代替a 标签,设置默认的路由

之前用a标签,每次都需要在href里面添加#,用router-link可以避免。<router-linkto='/login'tag="span">登录</router-link><router-linkto='/registe'tag="span">注册</router-link>我们想设置默认路由显示指定的...

2019-08-17 12:40:19

前端应用_Vue_vue-router应用过程

总结:导入vue-router创建router实例对象,并配置path和需要匹配的组建创建组建模板对象让router实例对象和vue实例对象进行绑定,监控URL的变化,并展示路由使用占位符router-view标签,用于展示用的<!DOCTYPEhtml><html><head><metachars...

2019-08-17 11:38:22

前端应用_vue_利用子组件添加测试用例,然后让组建自动刷新展示

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkhref="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap...

2019-08-17 11:25:04

前端应用_Vue_通过emit事件调用向父组件传值

子组件如果想修改父组件的属性是不可能的,也不推荐,不能直接改难道就没有办法呢难不了,优秀的vue同学,先看张图吧从这张图可以看出两个问题1.父传值给子需要用props,2.子传值给父需要emit事件.看下边实例吧,我自己学的:<!DOCTYPEhtml><htmllang="en"><head><m...

2019-08-15 18:26:09

前端应用_Vue_父组件传递值给子组件

父组件把data的值想传递给子组件,通过一个关键词props步骤如下:首先在适用组件的地方进行数值绑定,v-bind:parentMsg=‘msg’这个步骤就是把父组件的msg值绑到parentMsg上面在子组件创建props,这里保存都是父组件传递的值比如parentMsg,然后再使用,注意要用props里面的,用的时候直接用插值表达式就...

2019-08-15 15:59:05

前端应用_Vue_ 组件切换动画

通过mode属性,设置组件切换时候的模式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><m...

2019-08-14 23:55:51

前端应用_Vue_ 用component标签控制组件切换

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Com...

2019-08-14 23:51:39

前端应用_Vue_ 用v-if和v-else控制组件切换

我们用组件想达到的效果如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkhref="http://cdn.bootcss.com/bootstrap/3.2...

2019-08-14 18:46:52

前端应用_Vue_实现列表删除和删除时候的动画效果

下边实现删除的效果,代码如下:<tdstyle="color:#0e9aef"><ahref=""@click.prevent="del(item.id)">删除</a></td>del(id){varlist=this.list.filter(item=>{if(item....

2019-08-12 19:32:58

前端应用_Vue_(一行代码解决)transition-group在table表格中失效的问题(一行代码解决)

这个问题卡了我一下午,一直找不到答案,然后用谷歌浏览器,解决一分钟就解决了,就用tabletransition-group搜索里面前三都是答案,我本人立帖为证以后查问题,不在百度直接去谷歌浏览.如若违反判定跑步4公里.在看的朋友如有我的毛病,请及时改正.我之前是这么写的:<tableclass="tabletable-borderedtable-hov...

2019-08-12 18:16:25

前端应用_Vue_使用transition-group实现列表动画.

前面实现的只是一个元素的动画,下边咱们实现一组,用到的transition-group思路如下:创建一个自动生成列表的ulli组合,然后点击添加button能添加列表记录用trasition-group包裹起来需要动画的content定义style样式,v-enter,v-enter-to,v-enter-active,v-leave,v-leav...

2019-08-12 18:00:52

前端应用_Vue_钩子函数实现小球半场动画

前面我介绍的都是有enter还有leave,但是有的场景就只是enter,没有leave动画,我所认识的场景有这些:1.大家玩游戏都知道,当我们充值元宝或者砖石的时候,充值完成了,有个慢动作,就是金币或者元宝进入一个咱们储存的袋子,并且还有配音。2.我们购物的时候,当点击加入购物车的时候,有个动画就是从开始点的地方直接跑到购物车的图标里3.当我们玩游戏的时候,...

2019-08-12 15:46:08

前端应用_Vue_使用第三方 animate.css 实现动

前面是vue自带的,需要定义style非常的烦,怎么解决呢,用第三方库就行了,他已经定义好了css样式,拿来直接用就行了。例子如下:<transitionenter-active-class="bounceIn"leave-active-class="bounceOut":duratio="300"><h3...

2019-08-11 19:18:34

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周上午根据用户上周周三的博文发布情况由系统自动颁发。