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编辑器中把项 ...
随机推荐
- 框架源码系列五：学习源码的方法（学习源码的目的、 学习源码的方法、Eclipse里面查看源码的常用快捷键和方法）
一. 学习源码的目的 1. 为了扩展和调优:掌握框架的工作流程和原理 2. 为了提升自己的编程技能:学习他人的设计思想.编程技巧 二. 学习源码的方法 方法一: 1)掌握研究的对象和研究对象的核心概念 ...
- “Java是编译执行的语言”这句话对吗？
现在让你谈谈对Java平台的理解,你是否会感觉内容过于庞大?这个问题是比较宽泛的,Java发展到现在已经不仅仅是语言这么简单了,Java平台涉及的,包括但不仅限于下面提到的这些内容: Java语言本身 ...
- cocos2dx添加新的类后出现错误undefined reference to的解决办法
使用cocos compile -p android编译cocos2dx项目的时候出现如下错误(新建了TestScene.h,TestScene.cpp): jni/../../Classes/App ...
- Qt编写自定义控件10-云台仪表盘
前言 做过安防视频监控的同学都清楚,在视频监控系统软件上都可以看到一个云台控制区域,可以对球机进行下下左右等八个方位的运动控制,还可以进行复位,一般都是美工作图好,然后贴图的形式加入到软件中,好处是程 ...
- apache 2.4.23 只能本地访问，其他用户不能访问，提示You don't have permission to access
这个版本的httpd.conf的配置方法跟原版本的设置不一样了. 需要在目录安全配置中 修改为 Require all granted 比如 把Require local 修改为Require al ...
- C# 递归省市区三级树结构
省市区结构 实体 /// <summary> /// 行政区 /// </summary> public class AreaEntity { public int Id { ...
- poj3335
半平面交&多边形内核.因为没注意了点的情况自闭了. https://blog.csdn.net/qq_40861916/article/details/83541403 这个说的贼好. 多边形 ...
- TestNG 框架的运用
TestNG这个测试框架可以很好的和基于Selenium的web自动化测试结合在一起,实现把我们写好的自动化测试用例以自定义顺序执行.下面分为十二步来对TestNG测试框架进行总结,包括环境的部署,从 ...
- ubuntu下搭建LAMP环境
本文参考:http://www.linuxdiyf.com/linux/21265.html 请支持原创. 步骤一:安装apache root@mrwang:~$ sudo apt install a ...
- bypass safedog upload
这里附上两个payload: Content-Disposition: form-data; name=”up_picture”; filename=”[回车]1.php” Content-Dispo ...