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管理思想与几十万 ...
随机推荐
- html中title属性换行实现
本文主要讲解titile属性换行的实现方式.<title> 元素可定义文档的标题,可以应用在img.a等标签上. 1.实现方式: <!DOCTYPE html> <htm ...
- linux安装JDK环境,JDK6.0即java 1.6.0
下载 (1)更改权限:# chmod 755 jdk-1.6.0_23-linux-i586.rpm.bin 执行安装:# ./ jdk-1.6.0_23-linux-i586.rpm.bin 此步完 ...
- ajax-原理分析
createTime--2016年9月19日13:59:11Author:Marydon参考链接 http://blog.csdn.net/csh624366188/article/details ...
- 【Oracle】迁移含有BLOG类型的字段的表
日常数据库迁移过程中,发现dmp文件中的表,如果表含有blog类型的字段,无法进行迁移. 以下是我迁移含有blog类型字段表的经验分享' 使用PLSQL Developer进行导出 接着选择需要导出的 ...
- Web应用的演变以及网络应用程序的架构的优缺点
(1)主机/终端 特点: 主机负责所有的计算(处理业务), 终端只负责输入输出(不做任何计算). 优点: 可靠,安全,i/o能力强. 缺点: 昂贵,扩展困 ...
- highstock使用案例(异步请求,懒加载)
jsp中导入:<script src="<c:url value="/resources/js/highstock.js"></c:url> ...
- java第四章编程题(初学篇)
代码: /* test.java */ package test; public class test { public static void main(String args[] ) { CPU ...
- HDUOJ--2079选课时间(题目已修改,注意读题)
选课时间(题目已修改,注意读题) Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- iOS高级教程:处理1000张图片的内存优化
一.项目需求 在实际项目中,用户在上传图片时,有时会一次性上传大量的图片.在上传图片前,我们要进行一系列操作,比如:旋转图片为正确方向,压缩图片等,这些操作需要将图片加载到内存中,下面对内存的使用做详 ...
- Android四款系统架构工具
开发者若想开发出一款高质量的应用,一款功能强大的开发工具想必是不可或缺的.开发工具简化了应用的开发流程,也能使开发者在应用开发本身投入更多的精力.本文就为大家带来4款实用的Android应用架构工具. ...