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编辑器中把项 ...
随机推荐
- fiddler使用指南
fiddler使用指南 fiddler 设置 如果要手机抓包的话,需要设置fiddler, 允许远程设备连接 tools/fiddler options/connection/allow remote ...
- Maven项目错误解决小结
http://blog.csdn.net/typa01_kk/article/details/49185759 Maven项目错误解决小结 注:整理错误,不喜欢为了一个小问题,占篇幅,所以请Ctrl+ ...
- 基于【CentOS-7+ Ambari 2.7.0 + HDP 3.0】搭建HAWQ数据仓库01 —— 准备环境，搭建本地仓库，安装ambari
一.集群软硬件环境准备: 操作系统: centos 7 x86_64.1804 Ambari版本:2.7.0 HDP版本:3.0.0 HAWQ版本:2.3.05台PC作为工作站: ep-bd01 e ...
- TCP连接的状态与关闭方式，及其对Server与Client的影响
1. TCP连接的状态 首先介绍一下TCP连接建立与关闭过程中的状态.TCP连接过程是状态的转换,促使状态发生转换的因素包括用户调用.特定数据包以及超时等,具体状态如下所示: CLOSED:初始状态, ...
- [原]获取openstack-pike安装包
linux version: CentOS 7.5.1804 #进入仓库配置目录 cd /etc/yum.repo.d/ #批量重命名所有文件 for files in `ls *`; do mv $ ...
- centos 7 mysql启动失败--学会看错误日志
一.现象 mysql客户端连接时: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql ...
- GO语言-基础语法：条件判断
1. IF判断(aa.txt内容:asdfgh.bb.txt内容:12345) package main import ( "io/ioutil" "fmt" ...
- rabbitmq - java client lib一二事
由于不可抗因素, 需要给对接方撸一个client的demo.基于比较老的jdk. 所幸找到了这里:http://www.rabbitmq.com/releases/rabbitmq-java-clie ...
- PentestBox在win10里打不开工具
PentestBox详细安装过程:http://www.cnblogs.com/ESHLkangi/p/8336398.html 在使用PentestBox的时候出现了打不开工具的问题,最后看到一个老 ...
- java的方法重载
1丶java的方法重载特性 满足以下条件的两个或多个方法构成“重载”关系:(1)方法名相同 (2)参数类型不同,参数个数不同或者参数类型的顺序不同 像System.out.println一样,就是重载 ...