摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>侦听器/观察者/监听器</t
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侦听器/观察者/监听器</title>
</head>
<body>
<div id="box">
用户名:<input type="text" v-model="username"><br>
<h3>{{length}}</h3>
<!--v-show指令：true显示，false不显示-->
<h3 v-show="isShow" :style="warning">{{message}}</h3>
</div>
<script src="js/Vue.js"></script>
<script>
new Vue({
el:'#box',
data:{
username: '',
length: 0,
message:'用户名太短',
isShow:false,
warning:'color:red'
},
//watch侦听器属性，监听是页面中的变量值的变化
watch:{
username:function(){
this.length=this.username.length;
if(this.length<6){
this.isShow=true;
}else{
this.isShow=false;
}
}
}
})
</script>
</body>
</html>总结：通过这几节课的学习，对vue有了一个初步的了解，学会了引用vue.js,挂载点和变量的创建，属性和事件的绑定，数据的当单双向绑定，以及侦听器的使用等。学到的模板指令有:v-text,v-html,v-bind,v-on,v-model,v-show.能够实现数据的双向绑定，这个功能好强大呢。对于vue.js的使用，还需要多看文档，多进行练习。
批改老师：灭绝师太批改时间：2018-12-01 11:05:21
老师总结：完成的不错，功能确实强大文档还需要细细研究，继续加油呀！
