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管理思想与几十万 ...
随机推荐
- IDC 知识库
http://www.51idc.com/help/supportHelp.html Host key verification failed解决IIS错误信息--另一个程序正在使用此文件,进程无法访 ...
- h5 微场景
兔展: http://www.rabbitpre.com/ 易企秀: http://www.eqxiu.com/site/show 云来: http://www.liveapp.cn/
- Tomcat 签名认证配置简例
在项目的web.xml中增加 <security-constraint> <web-resource-collection> <web-resource-name> ...
- 金山PDF
金山是个很不错的软件公司,金山出PDF,纯粹是完善生态圈!毕竟没FoxitReader专业对PDF的处理上! 官网:芝麻开门 下载:http://wdl1.cache.wps.cn/wps/downl ...
- AsyncTask 异步任务基本使用-下载视频
概述 android 提供了一个异步任务类AsyncTask,使创建异步任务.更新UI变得更加简单,不再需要编写任务线程和Handler实例即可完成相同的任务.本例子将演示并实现,使用AsyncTas ...
- 【微信小程序】:客服消息教程
1.本教程完全链接W3Cschool的教程,已经讲的非常清晰和透彻. 2.链接:https://www.w3cschool.cn/weixinapp/weixinapp-api-custommsg-c ...
- 狄斯奎诺(dijkstra 模板)
/*狄斯奎诺算法(dijkstra)<邻接表> */ #include<stdio.h> #include<string.h> #include<stdlib ...
- NYOJ-------三角形
Problem A 三角形 时间限制:1000 ms | 内存限制:65535 KB 描述 在数学中,如果知道了三个点的坐标,我们就可以判断这三个点能否组成一个三角形:如果可以组成三角形,那么 ...
- 为Github 托管项目的访问添加SSH keys
为了便于访问远程仓库,各个协作者将自己的本地的项目内容推送到远程仓库中,使用 SSH keys 验证github的好处:不用每次提交代码时都输入用户名和密码. 如果SSH key没有添加到github ...
- 【LeetCode】42. Trapping Rain Water
Trapping Rain Water Given n non-negative integers representing an elevation map where the width of e ...