摘要：通过对vue.js课程的学习，对vue.js有了一定的了解和练习，对vue.js的MVVM设计模式有了进一步的认识，并通过简单的练习。通过vue.js实现了单向绑定数据、双向绑定数据、标签样式绑定、标签内容绑定、事件方法绑定、监听器实时监听数据，实现代码如下：<!DOCTYPE html> <html> <head>
通过对vue.js课程的学习，对vue.js有了一定的了解和练习，对vue.js的MVVM设计模式有了进一步的认识，并通过简单的练习。通过vue.js实现了单向绑定数据、双向绑定数据、标签样式绑定、标签内容绑定、事件方法绑定、监听器实时监听数据，实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js总结实战</title>
</head>
<body>
<div id="contents">
<!-- 数据绑定和样式绑定 方式1 -->
<h3 :style="warning">{{message}},双大括号绑定可以直接拼接内容。</h3>
<hr>
<!-- 数据绑定和样式绑定 方式2 -->
<h3 v-bind:style="warning" v-text="message">v-text的绑定内容会被覆盖</h3>
<hr>
<!-- 标签输出和点击事件 -->
<div v-html="divHTML" @click="changInnerHTML"></div>
<hr>
<!-- 双向绑定 -->
<input type="text" v-model="info">
<br>
<h3>当前输入的内容是：{{info}}</h3>
<hr>
<!-- 监听器 -->
用户名:<input type="text" v-model="username">
<h3 v-show="isErrorShow">用户名长度不足</h3>
<h3 v-show="isShow">用户名长度符号要求</h3>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#contents',
data: {
info:'',
username: '',
message: 'PHP中文网',
isErrorShow: false,
isShow: false,
warning: 'color:red',
divHTML:'<div style="color:blue;">我是新插入的div</div>'
},
methods:{
changInnerHTML:function(){
this.divHTML="<p>我是点击后切换的p标签</p>";
}
},
watch: {
username: function () {
//console.log(this.username.length);
if(this.username.length<6)
{
this.isErrorShow=true;
this.isShow=false;
}
else
{
this.isErrorShow=false;
this.isShow=true;
}
}
}
});
</script>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-14 16:49:06
老师总结：完成的不错，完成到这个阶段，就可以尝试一下大型网站布局啦！
