摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>观察者/侦听器/监听器</title> </head> <body> <div id="box">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>观察者/侦听器/监听器</title>
</head>
<body>
<div id="box">
用户名:<input type="text" v-model="username">
<h3>{{length}}</h3>
<!-- v-show指令，true显示，false不显示 -->
<h3 v-show="isShow" style="warning">{{messages}}</h3>
</div>
<script type="text/javascript" src="static/Vue.js"></script>
<script type="text/javascript">
new Vue({
//绑定一个挂载点
el:'#box',
//创建一个数据模型
data:{
username:'',
length:0,
messages:'用户名太短了',
isShow:false,
warning:'color:red'
},
//watch侦听器属性，监听是页面中变量值的变化
watch:{
username:function(){
this.length++;
if(this.length<6){
this.isShow = true;
}else{
this.isShow = false;
}
}
}
})
</script>
</body>
</html>首先引用Vue.js，new Vue()创键Vue对象字面量，在内部{}中写入规定好的属性和自己需要的属性值，el：是绑定挂载点，data:创建一个数据模型，watch侦听器属性，监听是页面中变量值的变化，本节课中是通过watch
监听username的变化，根据不同的变化，决定messages是否显示。
批改老师：韦小宝批改时间：2019-01-03 09:14:29
老师总结：写的很不错！vuejs中好多功能都是很强大的！课后可以没事看看相关的手册，那样你可以收获更多哦！
