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编辑器中把项 ...
随机推荐
- vector 使用 c++11 Lambda 表达式 排序
struct SIndexDataNew { 1 optional short shtMarket; 2 optional string sCode; 3 optional int iDate; 4 ...
- (原)ffmpeg过滤器开发和理解
最近学习了ffmpeg关于filter过滤器的开发,关于中间的几个相关概念,我们先放在简单介绍一下: AVFilterGraph:几乎完全等同与directShow中的fitlerGraph,代表一串 ...
- Android 最流行的吸顶效果的实现及代码
开始逐渐领略到ItemDecoration的美~ 今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的Re ...
- git备忘 & ProGit笔记
git configgit config xxxxx xxxx可以是 --global(使用的是~/.gitconfig) --system(据说在linux下面使用的是/etc/gitcon ...
- linux shell下16进制 “\uxxxx” unicode to UTF-8中文
问题出现背景: 项目中有个通过ip获取归属地城市需求,我是直接通过新浪的ip归属查询接口来获取的.我使用的是shell脚本调用 RESULT=$(curl -s 'http://int.dpool.s ...
- maridb 10.3 主从复制,待机情况下从库 cpu 占用率高的处理方法
发现两台从库,一直都在CPU 占用率 60% 90% 中浮动, 但是写库却很正常.搜了一大把没找到答案,把参数测试了一下得出以下结论 slave my.cnf 添加如下参数 #只读模式 read_o ...
- Docker学习笔记之二：制作镜像并PUSH
Pull 如果是Public的(docker官方仓库和加速器) 直接 docker pull ubuntu:16.04 即可 若是私有的 首先登陆 docker login 仓库Host 之后 doc ...
- Linux Tomcat8 启动堆内存溢出
今天在部署一个开源项目的时候,Tomcat8启动异常,报错信息: Exception in thread "RMI TCP Connection(idle)" java.lang. ...
- C++ Addon Async 异步机制
线程队列: libuv,window 可在libuv官网下载相应版本 opencv: 编译的时候opencv的位数要和 node的bit 一致 兼容electron : node-gyp rebu ...
- ubuntu下搭建LAMP环境
本文参考:http://www.linuxdiyf.com/linux/21265.html 请支持原创. 步骤一:安装apache root@mrwang:~$ sudo apt install a ...