第一种方式实现监听
<!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>
