vue2.0的常用功能简介
路由跳转
当我们想要实现点击链接跳转时,可以使用$router来进行跳转
语法如下:
this.$router.push({path:"/www",query:{id:''}})这里path是要跳转的路径,query里面是路径跳转时要携带的参数,以对象的形式存在
- 2
获取路由参数
跳转路由过后,我们可能想要获取路由上的参数,这里我们可以使用
this.$route.query.id (id为想要获取的参数)
- 3
获取当前页面的路径
想要获取当前文件的路径名称,除了原声的location.href之外,也可以利用$route来获取
this.$route.path
- 4
离开页面时弹窗
在有时候我们开发时可能为某个页面添加这样的功能就是在用户离开某个页面时进行弹窗,用来提示用户一些信息。这时候可以用到路由的导航钩子
beforeRouteLeave beforeRouteLeave(to,from,next){ //do something }, - 5
操作dom
虽然vue提倡我们尽量以数据为驱动,但是有时候我们不得不触及要操作dom,
这个使用除了原生js之外,操作dom可以使用ref直接绑定一个元素节点或者使用this.$el来操作具体的属性值。
vue2.0的常用功能简介的更多相关文章
- Beginning SDL 2.0(1) SDL功能简介
原文链接为 http://wiki.libsdl.org/Introduction. 由于近期整理音视频可视化的技术,发现好久不更新的SDL发布了2.0版本,以前也没有过于关注,这里准备尝试下.了解S ...
- vue2.0实现购物车功能
购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...
- vue2.0 事件处理常用修饰符-----------------记录,加强记忆。
1,<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> stop修饰符对应的是阻止冒泡的e ...
- vue2.0 练习项目-外卖APP(1)
前言 vue这个框架现在挺流行的,作为一个专注前端100年的代码爱好者,学习下路径流行的框架是必须的!在网上搜索vue的项目是比较少的,在官网进行了入门学后,没有一个项目练习巩固下,学了就等于没学,所 ...
- 完善慕课网Vue2.0购物车功能
vue一个Made in China创造出来的框架真的很66666~ 如果你是刚入门还不太懂也没有看慕课网上这门视频的,请先看一遍或许你会收获满满~ 使用vue2.0实现购物车和地址选配功能这门课程, ...
- Vue2.0实现1.0的搜索过滤器功能
Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下. <bod ...
- 关于慕课网《使用vue2.0实现购物车和地址选配功能》的总结
视频学习网址:http://www.imooc.com/learn/796 源码打包:https://codeload.github.com/fachaoshao/Vue-ShoppingCart/z ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- 管家婆软件工贸版(标准财务+进销存+生产管理)V18.0功能简介
管家婆软件工贸版(标准财务+进销存+生产管理)V18.0功能简介 管家婆 工贸版(标准财务+进销存+生产管理) 1.整体介绍 管家婆工贸版系列软件是针对国内中小型生产加工企业,将ERP管理思想与几十万 ...
随机推荐
- 关于linux的添加永久静态路由的static-routes方法
一:使用 route 命令添加 使用route 命令添加的路由,机器重启或者网卡重启后路由就失效了,方法: //添加到主机的路由 # route add –host 192.168.1.11 dev ...
- SoapUI 测试接口演示
SoapUI 测试接口演示 CreateTime--2018年4月2日15:54:05 Author:Marydon 以webservice为例 1.安装: SoapUI-x64-5.4.0-E ...
- java装箱拆箱
基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象的时候,我们会这样: Class a = new Class(p ...
- 基于.net 的加载自定义配置-误操作
有时候 需要 将程序加载自定义的配置文件,除了自己写解析xml文件.内置的ConfigutionManager对象 是个不错的选项. 按照 app.config 的方式,做一个副本.然后从你的配置文件 ...
- lenovo thinkpad L460 安装Win7阐述
lenovo thinkpad L460 系统自带Win10切GPT分区,如果想安装Win7 01.需要改bios 02.清空硬盘全盘数据,调整分区类型MBR分区引导(需要全盘格式化,调整引导类型) ...
- Persona——Web人物角色介绍
一.什么是人物角色? 人物角色,即persona([pə:’səunə]),这里讨论的主要是web persona,是指针对网站目标群体真实特征的勾勒,是真实用户的综合原型.我们对产品使用者的目标.行 ...
- (原+转)ubuntu16中安装opencv2.4.11(2.4.13)
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5638117.html 参考网址: http://www.cnblogs.com/jeakon/arch ...
- 使用Promise
Promise所要解决的问题:回调地狱 asyncTask1(data, function (data1){ asyncTask2(data1, function (data2){ asyncTask ...
- 【LeetCode】45. Jump Game II
Jump Game II Given an array of non-negative integers, you are initially positioned at the first inde ...
- Eclipse 选中变量高亮显示设置