vue从创建到完整的饿了么（7）点击事件与页面跳转

说明

1.上一章--登录注册页面及密码暗明文转换
2.苍渡大神项目源码--Github地址
3.UI框架--Mint ui
4.下一章--city.vue布局及vuex的state属性简单应用

开始

1.先看一下目前home.vue的效果图

首先我们先来改一段代码--刚开始写的时候我以为登录注册是两个页面，后来发现是一个，所以把登录注册的html代码改为

<mt-header fixed><span slot="left">elm</span><mt-button slot="right">登录|注册</mt-button>
</mt-header>

2.跳转函数
那我们先写点击后的跳转函数，在methods中写函数gologin（函数都写在methods中，计算函数写在computed中）

 methods:{//函数gologin:function(){}}

到这我有点挠头了，js的页面跳转用 location.href 来跳转，vue用什么？百度。结果修改函数如下

 methods:{//函数gologin:function(){this.$router.push('login');}}

还是要修改路由来控制页面。函数写好了怎么调用呢？

3.绑定事件
我们要点击登录注册的按钮跳转页面，那vue的点击事件怎么写呢？看官网用v-on（缩写为@）来绑定点击事件。

咱先用第一个最简单的，写到登录注册按钮上

<mt-button @click="gologin" slot="right">登录|注册</mt-button>

搞定，点击试试（还不会做动图）

ok！跳转成功！

4.注意

可能有细心地老铁的发现了一个问题，就是咱们的点击事件是加到Mint ui的组件上的，而mintui对原生事件有了处理，可是咱们没有加 .native 修饰符，为什么还可以跳转呢？

老铁别急，下面还有

切记，只有Button的原生事件不需要加.native 修饰符，其他的都要加.native 修饰符。

vue从创建到完整的饿了么（7）点击事件与页面跳转相关推荐

vue从创建到完整的饿了么（5）v-for，v-bind与计算属性
说明 1.上一章--Home.vue及vue-resource使用 2.cangdu大神的项目源码地址--Github地址 3.接口地址--Github地址 4.UI框架用的是--Mint UI 5. ...
vue从创建到完整的饿了么（12）miste.vue
说明 1.上一章--组件的使用(svg及watch的简单使用) 2.苍渡大神的项目源码--项目源码地址 3.UI框架--MintUI 4.数据接口地址--API地址 5.下一章--饿了么loading ...
vue通过点击事件实现页面跳转
前言页面跳转,我们一般都通过路由跳转实现,通常情况下可直接使用router-link标签实现页面跳转,但是如果我们想通过点击别的标签实现页面跳转,怎么办呢?这个时候我们就要用到this.$route ...
vue从创建到完整饿了么（16）watch监听子路由变化
说明 1.上一章--组件动画 2.苍渡大神源码--项目地址 3.数据接口--API接口地址 4.UI框架--Mint UI 5.下一章--本地缓存购物车开始目前的路由配置 import App f ...
vue项目引入容联七陌客服系统(qimoChatClick点击事件的使用)
前端接入客服步骤第一步.引入链接第二步.对客服按钮进行显示隐藏处理获取到元素再进行修改即可,若是原生按钮,按照如下代码设置即可. let qimoDom = document.getElemen ...
若依前后端分离版(vue)中配置页面跳转的路由
场景若依前后端分离版本地搭建开发环境并运行项目的教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在此基 ...
Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法
最近有一个登录界面的需求,感觉很简单,尝试各种方法每次都感觉快要成功了,但还是没能解决问题,果然没有系统学习就是很难立刻找到突破点,难以一语中的,好在历经千帆,在页面调用中就解决了这个问题. 需求描述 ...
vue 自动触发点击事件
需要,点击左边的菜单,顶部菜单相应改变,但是都需要点击事件,页面进来时,默认触发点击事件方法一,vue自定义指令 directives:{trigger:{inserted(el, binging) ...
vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...

vue从创建到完整的饿了么（7）点击事件与页面跳转

说明

开始

vue从创建到完整的饿了么（7）点击事件与页面跳转相关推荐

最新文章

热门文章