<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div class="bg">
hello world!! </br>
{{msg}}
</div>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "勇士西部总冠军",
count: 0,
},
watch: {
//监听函数值改变它所监听的值,其他的值它不会去做处理
// todo 异步场景
msg: function (newVal,oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
}

},
//计算属性,会在app的值改变的时候触发
// todo 数据联动
computed: {
msg1: function () {
return 'computed' + this.msg; //这里的值,指最后app里面的data的msg的值,指app这个实例的值

}
}
})
</script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div id="app">

<div class="bg">

hello world!! </br>

{{msg}}

</div></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

var app = new Vue({

el: '#app',

data: {

msg: "勇士西部总冠军",

count: 0,

},

watch: {

//监听函数值改变它所监听的值,其他的值它不会去做处理

// todo 异步场景

msg: function (newVal,oldVal) {

console.log('newVal', newVal);

console.log('oldVal', oldVal);

}
    },
//计算属性,会在app的值改变的时候触发
// todo 数据联动
computed: {
msg1: function () {
return 'computed' + this.msg; //这里的值,指最后app里面的data的msg的值,指app这个实例的值

}
}
})
</script>

</body>

</html>//这里的值,指最后app里面的data的msg的值,指app这个实例的值

//这里的值,指最后app里面的data的msg的值,指app这个实例的值