<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch监听</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<!-- 需求:在搜索框中输入123,自动向后台发送AJAX请求,把123提交给后台,然后后台返回一些数据给你 -->
<div id="app">
<input type="text" v-model = "serachInfo">
<div v-if = "showSeraching" >正在搜索。。。。</div> <!-- 用户正在输入的时候显示这句话.其余时刻不显示 -->
<ul>
<li v-for = "item in result">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
serachInfo : "",
showSeraching : false,
result : []
},
watch : {
serachInfo : function(query){
//query就是我们最新输入的值,可以打印一下进行验证
//console.log(query);
this.showSeraching = true;
console.log(this); //vue
//我们没有后台,可以用下面函数去模拟一下异步操作
setTimeout(function(){
//该函数里面的this指向在严格模式下什么都没有,在非严格模式下是window。看this指向就看谁调用它,在这个函数上,没有东西调用这个function
console.log(this); //window
this.result = ["html","css","js"]
},500)
}
}
})
</script>
</body>
</html>
第一个打印出来的是vue实例,第二个是window。
二者不一致,有两种解决办法:
第一种是 使用箭头函数。原因:箭头函数里面没有this指向,他的this指向借助于他父级的作用域。这里它的父级作用域是serachInfo : function(query)函数,这个函数指向的是vue实例,vue实例就获取出来了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch监听</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<!-- 需求:在搜索框中输入123,自动向后台发送AJAX请求,把123提交给后台,然后后台返回一些数据给你 -->
<div id="app">
<input type="text" v-model = "serachInfo">
<div v-if = "showSeraching" >正在搜索。。。。</div> <!-- 用户正在输入的时候显示这句话.其余时刻不显示 -->
<ul>
<li v-for = "item in result">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
serachInfo : "",
showSeraching : false,
result : []
},
watch : {
serachInfo : function(query){
//query就是我们最新输入的值,可以打印一下进行验证
//console.log(query);
this.showSeraching = true;
console.log(this); //vue
//我们没有后台,可以用下面函数去模拟一下异步操作
setTimeout(()=>{
//该函数里面的this指向在严格模式下什么都没有,在非严格模式下是window。看this指向就看谁调用它,在这个函数上,没有东西调用这个function
console.log(this); //vue
this.result = ["html","css","js"]
},500)
}
}
})
</script>
</body>
</html>
第二种方法:把this保存成一个变量
var vm = this;//在这里我们把this实例(vue实例)保存成vm变量了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch监听</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<!-- 需求:在搜索框中输入123,自动向后台发送AJAX请求,把123提交给后台,然后后台返回一些数据给你 -->
<div id="app">
<input type="text" v-model = "serachInfo">
<div v-if = "showSeraching" >正在搜索。。。。</div> <!-- 用户正在输入的时候显示这句话.其余时刻不显示 -->
<ul>
<li v-for = "item in result">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
serachInfo : "",
showSeraching : false,
result : []
},
watch : {
serachInfo : function(query){
//query就是我们最新输入的值,可以打印一下进行验证
//console.log(query);
this.showSeraching = true;
var vm = this;//在这里我们把this实例(vue实例)保存成vm变量了
//我们没有后台,可以用下面函数去模拟一下异步操作
setTimeout(function(){
//该函数里面的this指向在严格模式下什么都没有,在非严格模式下是window。看this指向就看谁调用它,在这个函数上,没有东西调用这个function
console.log(vm); //vue
this.result = ["html","css","js"]
},500)
}
}
})
</script>
</body>
</html>
最终代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch监听</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
<!-- 需求:在搜索框中输入123,自动向后台发送AJAX请求,把123提交给后台,然后后台返回一些数据给你 -->
<div id="app">
<input type="text" v-model = "serachInfo">
<div v-if = "showSeraching" >正在搜索。。。。</div> <!-- 用户正在输入的时候显示这句话.其余时刻不显示 -->
<ul>
<li v-for = "item in result">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
serachInfo : "",
showSeraching : false,
result : []
},
watch : {
serachInfo : function(query){
//query就是我们最新输入的值,可以打印一下进行验证
//console.log(query);
this.showSeraching = true;
var vm = this;
//我们没有后台,可以用下面函数去模拟一下异步操作
setTimeout(function(){
//该函数里面的this指向在严格模式下什么都没有,在非严格模式下是window。看this指向就看谁调用它,在这个函数上,没有东西调用这个function
vm.result = ["html","css","js"];
vm.showSeraching = false;
},500)
}
}
})
</script>
<!-- 、
为什么会有watch和computed的两个属性?
computed会有一个返回值,一个return值,vue会读取这个return值。假如说我们的逻辑操作没有return值,就像上述操作,就得给他一个watch监听操作,而且computed里面必须是一个同步代码,不能写异步代码,因为他会去监听里面的一个变化,去监听需要把computed值变成什么。这是一个同步操作。
而watch可以写一个异步操作。可以没有return返回值。
-->
</body>
</html>