Vue系列之 => Watch监视路由地址改变
第一种方式实现监听
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<style>
html,
body {
margin: 0;
padding: 0;
} .header {
background-color: orange;
height: 80px;
} .container {
width: 100%;
display: flex;
height: 400px;
padding: 0;
margin: 0;
} .left {
background-color: pink;
flex: 2;
} .right {
background-color: bisque;
flex: 8;
}
/* 动画 */
.header-enter,.header-leave-to {
opacity: 0;
transform: translateY(50px);
}
.header-enter-active,.header-leave-active{
transition: all 0.5s ease;
} </style> <body>
<div id="app">
<!-- 分析 -->
<!-- 我们要监听到文本框数据的改变，这样才能知道，什么时候去拼接出一个fullname -->
<input type="text" v-model="firstname" @keyup="getFullName"> +
<input type="text" v-model="lastname" @keyup="getFullName"> +
<input type="text" v-model="fullname"> +
</div> <script> var vm = new Vue({
el: '#app',
data: {
firstname : '',
lastname : '',
fullname : ''
},
methods: {
getFullName(){
this.fullname = this.firstname + '-' + this.lastname;
}
},
});
</script>
</body> </html>
第二种方式实现监听watch
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<style>
html,
body {
margin: 0;
padding: 0;
} .header {
background-color: orange;
height: 80px;
} .container {
width: 100%;
display: flex;
height: 400px;
padding: 0;
margin: 0;
} .left {
background-color: pink;
flex: 2;
} .right {
background-color: bisque;
flex: 8;
}
/* 动画 */
.header-enter,.header-leave-to {
opacity: 0;
transform: translateY(50px);
}
.header-enter-active,.header-leave-active{
transition: all 0.5s ease;
} </style> <body>
<div id="app">
<!-- 分析 -->
<!-- 我们要监听到文本框数据的改变，这样才能知道，什么时候去拼接出一个fullname -->
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> +
<input type="text" v-model="fullname"> +
</div> <script> var vm = new Vue({
el: '#app',
data: {
firstname : '',
lastname : '',
fullname : ''
},
methods: { },
watch : { //监听data中指定数据的变化，然后触发watch中对应的function处理函数
firstname : function(){
this.fullname = this.firstname + '-' + this.lastname
console.log('firstname在变化');
},
// 提供了两个参数，一个是newVal,oldVal
lastname : function(newVal,oldVal){
this.fullname = this.firstname + newVal
console.log('lastname在变化');
console.log(newVal + ' ----- ' + oldVal);
}
}
});
</script>
</body> </html>
监视路由地址改变
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<style>
html,
body {
margin: 0;
padding: 0;
} .header {
background-color: orange;
height: 80px;
} .container {
width: 100%;
display: flex;
height: 400px;
padding: 0;
margin: 0;
} .left {
background-color: pink;
flex: 2;
} .right {
background-color: bisque;
flex: 8;
}
/* 动画 */
.header-enter,.header-leave-to {
opacity: 0;
transform: translateY(50px);
}
.header-enter-active,.header-leave-active{
transition: all 0.5s ease;
} </style> <body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<template id="login">
<div>
<h1>我是登录界面</h1>
</div>
</template>
<template id="register">
<div>
<h1>我是注册界面</h1>
</div>
</template> <script>
var login = {
template : '#login'
};
var register = {
template : '#register'
}; var routerObj = new VueRouter({
routes : [
{ path : '/' , component : login },
{ path : '/login' , component : login },
{ path : '/register' , component : register },
]
}) var vm = new Vue({
el: '#app',
data: {
firstname : '',
lastname : '',
fullname : ''
},
methods: { },
router : routerObj,
watch : {
'$route.path' : function(newVal,oldVal){
if(newVal === '/login'){
console.log('欢迎进入登录！');
}else if(newVal === '/register'){
console.log('欢迎注册');
};
}
}
});
</script>
</body> </html>
Vue系列之 => Watch监视路由地址改变的更多相关文章
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- VUE 路由参数改变重新刷新数据
VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...
- 关于VUE的路由地址问题
目前我们VUE的项目都是单页面应用,路由地址全都是#以不同的锚点去分发,根目录就是 http://localhost:8080/index#/ (至于为什么不是http://localhost:8 ...
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- 从后端到前端之Vue（五）小试路由
一开始我还以为vue的路由只能用在工程化的项目里面呢,然后研究了一下才发现,在脚本化里面也是可以用的.其实呢不管在哪里用,把原理研究明白就对了. 一. 官网demo 这里不得不吐槽一下官网,写的不清不 ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- vue（17）vue-route路由管理的安装与配置
介绍 Vue Router 是 Vue.js官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参 ...
- Vue系列-05-项目2
路飞学城项目 调整首页细节 固定头部 App.vue <style> body{ padding: 0; margin:0; margin-top: 80px; } </style& ...
- Vue系列-04-项目1
路飞学城项目 项目搭建 创建项目目录 # cd 项目目录 # vue init webpack luffy 效果 根据上面的提示,我们已经把vue项目构建好了,接下来我们可以在vscode编辑器中把项 ...
随机推荐
- Linux操作环境下配置MMIX环境
一.概述 MMIX用途:高德纳写的<计算机程序设计艺术>,使用 MMIXAL 来编写代码,解释算法. 环境:Ubuntu 桌面版18.04. 二.操作步骤 1,创建MMIX文件夹并切入该文 ...
- AES和RSA加解密的Python用法
AES AES 是一种对称加密算法,用key对一段text加密,则用同一个key对密文解密, from Crypto import Random from Crypto.Hash import SHA ...
- pyCharm最新激活码(2018激活码)
首先输入新的License sever address 首先尝试处理方法是,针对过期会弹出激活框: 选择 Activate new license with License server (用lice ...
- 【App】不通过App Store实现ios应用分发下载安装（转）
转自:https://www.cnblogs.com/star91/p/5018995.html 最近公司的项目准备着手宣传工作了,宣传手册上要印制App的下载地址二维码,但是客户端应用还未上线, ...
- browser-sync events.js:85 throw er; // Unhandled 'error' event
browser-sync运行的时候提示如下错误,这个是因为browser-sync 配置的端口被占用的原因. events.js:85 throw er; // Unhandled 'error' e ...
- linux下tar命令的常用实例
语法:tar [主选项+辅选项] 文件或者目录 使用该命令时,主选项是必须要有的,它告诉tar要做什么事情,辅选项是辅助使用的,可以选用. 主选项:c 创建新的档案文件.如果用户想备份一个目录或是一些 ...
- Spring AOP @AspectJ 入门基础
需要的类包: 1.一个简单的例子 Waiter接口: package com.yyq.annotation; public interface Waiter { void greetTo(String ...
- vscode添加vue格式化插件
1.安装Vetur插件 2.ctrl+,打开用户设置,找到"vetur.format.defaultFormatter.html": "none",
- python学习之旅（五）
Python基础知识(4):基础数据类型之字符串(Ⅰ) 字符串是 Python 中最常用的数据类型.可以使用引号“ ”来创建字符串,只要为变量分配一个值即可.例如: name=“Alice” 注:字符 ...
- pytorch入门与实践-2.2
Tensor 1--本质上可以理解为具有不同维度的数组 2--支持的基本运算 |---创建Tensor: x=t.tensor(x,y) x,y 表示数组的大小 , x=t.rand(x,y), x ...