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管理思想与几十万 ...
随机推荐
- SVN mime-type 笔记
背景: 1.最近使用执行svn diff的时候发现有些文本文件无法显示: 2.浏览器会通过判断获取文件的 MIME 类型, 调用不同的客户端程序或使用不同的方式来执行.如果文件的 MIME 缺失或者有 ...
- git删除本地的资源,如何恢复?
1.$ git reset --hard HEAD 将提交重置 2.使用 $ git checkout TestTimer.java(文件名) 恢复过来了
- sonarqube 指定jdk
D:\sonarqube-6.3\conf\wrapper.conf wrapper.java.command=D:/other/jdk1.8.0_25/bin/java
- 〖Windows〗zigbee实验之cygwin编译TestSimpleMac出错的解决方法
1. 错误代码如下: ... C51 COMPILER V8. - SN: K1CMC-IEYCYC COPYRIGHT KEIL ELEKTRONIK GmbH - *** ERROR C141 I ...
- 9、java中static详解
一.static关键字的用途 在<Java编程思想>P86页有这样一段话: “static方法就是没有this的方法.在static方法内部不能调用非静态方法,反过来是可以的.而且可以在没 ...
- servlet 服务器HTTP响应头设置示例(response用法)
1,Location 用于重定向,和返回状态码302结合使用. 代码示例: response.setStatus(302); response.setHeader("location&quo ...
- Linux系统CentOS6.2版本下安装JDK7详细过程
Linux系统CentOS6.2版本下安装JDK7详细过程 分类: Linux 2014-08-25 09:17 1933人阅读 评论(0) 收藏 举报 前言: java 是一种可以撰写 ...
- 执行存储过程报错——ora-01031:权限不足
1. 执行DDL报错 在oracle存储过程中,默认是可以直接执行DML和DQL的,但是执行CREATE这种的DDL则需要借助EXECUTE IMMEDIATE ···了,如下备份表语句 --抄表表备 ...
- idea编辑区光标问题
本文转自:http://blog.csdn.net/shaoyezhangliwei/article/details/48735417 今天在用idea的情况下 ,莫名闪退了 ,重新打开的时候发现 光 ...
- Servlet乱码问题
数据像水流一样从一个地方流向另一个地方. 文本流是特殊的二进制流. 既然提到乱码问题,那就必然是用错误的编码去解释二进制流. 在传输过程中必然都是以二进制流传输的. 所以,我们需要考虑的是: 有几个数 ...