1：html头文件的内容在<head>中引入了一个js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src=‘lib/vue.js‘></script>
</head>
2:这段代码是<div>标签有一个全选的checkbox和三个checkbox还有一个button和一个text
<body>
<div id="app">
<input type="checkbox" v-model="allChecked">全选</input>
<p v-for="item in list" :key="item.id">
<input type="checkbox" v-model="item.isChecked">
{{item.userName}}
</p>
<button @click="clickMe">增加</button>
<input type="text" v-model="user.userName">
</div>
:这段代码是放在<script>中的Vue代码
<script>
var vm=new Vue({
el:"#app",
data:{
list:[
{id:1,userName:"a",isChecked:false},
{id:2,userName:"b",isChecked:false},
{id:3,userName:"c",isChecked:false}
],
allChecked:false,
user:{id:1,userName:"abc"}
},
methods:{
clickMe(){
this.list.push( {id:4,userName:"d",isChecked:false});
}
},
watch:{
//注意！监听的方法名必须和变量名保持一致
allChecked(newvalue,oldvalue){
console.log(newvalue);
console.log(oldvalue);s
},
//深度监听
list:{
handler:function(newval,oldval){
console.log(newval);
console.log(oldval);
},
deep:true
},
user: {
handler: function (newVal, oldVal) {
console.log(newVal);
console.log(oldVal);
},
deep: true
}
//普通监听
// "user.userName": {
// handler: function (newVal, oldVal) {
// console.log(newVal);
// console.log(oldVal);
// }
// },
}
});
</script>
4:HTML结尾
</body> </html>
原文：https://www.cnblogs.com/csb1985-304918132/p/12832853.html