Vue.js初体验
2018-02-21 本文已影响33人
风行者1024
这篇文章的目的：通过一个简单的小例子，体验最近常看到的Vue.js基本用法。暂时不去理解那些前端的概念、设计思想等。就围绕我想实现的小功能，直奔主题去实践，体验一下。
1) 准备工作
- 开发环境：Win7、Chrome、WebStorm等
- 实现功能：在网页的input输入框里输入一段文字，点一个button按钮，然后叠加显示在textarea控件上。类似一个聊天窗口的样子。
2) 最原始的实现方法
界面
第一种
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>原始写法</title>
<script type="text/javascript">
function send() {
var msg = document.getElementById("msg").value;
var result = document.getElementById("msglist").value + "\r\n" + " " + msg;
document.getElementById("msglist").value = result;
}
</script>
</head>
<body>
<div id="app">
<input type="text" id="msg" placeholder="请输入聊天内容"/></br>
<button onclick="send()">发送</button></br>
<textarea id="msglist" rows="20" cols="60">聊天记录：</textarea>
</div>
</body>
</html>
-
使用原始的html和js代码，把用户输入的文本叠加显示在另一个控件textarea上
-
代码上需要每次手动把更新后的内容赋给控件的属性，触发控件显示新的内容
3) 依赖jquery和bootstrap样式的写法
界面
第二种
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>依赖jquery和bootstrap样式的写法</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnSend").click(function(){
var result = $("#msglist").val() + "\r\n" + " " + $("#msg").val();
$("#msglist").val(result);
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" id="msg" class="form-control" placeholder="请输入聊天内容"/>
</div>
<div class="form-group">
<button id="btnSend" class="btn btn-primary">发送</button>
</div>
<div class="form-group">
<textarea id="msglist" rows="6" cols="100" class="form-control">聊天记录：</textarea>
</div>
</div>
</div>
</div>
</body>
</html>
-
第二种写法和第一种没有本质区别，就当前页面而言，仅仅是控件外观变得稍微漂亮点，js代码写起来更加整齐、便捷吧
-
利用现成的库，能够提高写代码的效率，增强代码的可读性、维护性等等
4) 依赖vue.js和bootstrap样式的写法
界面
第三种
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>依赖vue.js和bootstrap样式的写法</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
<script type="text/javascript">
window.onload = function() {
var app = new Vue({
el:"#divApp",
data:{
btnText:"发送",
msg:"请输入聊天内容",
msglist:"聊天记录："
},
methods:{
send:function () {
//点击发送按钮后，只需要关注数据之间的处理，不用操心显示
this.msglist = this.msglist + "\r\n" + " " + this.msg;
}
}
});
}
</script>
</head>
<body>
<div id="divApp" class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="msg" class="form-control" placeholder="请输入聊天内容"/>
</div>
<div class="form-group">
<button v-on:click="send" class="btn btn-warning">{{btnText}}</button>
</div>
<div class="form-group">
<textarea v-model="msglist" rows="6" cols="100" class="form-control"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
-
与html的内容（DOM）结合起来，new出一个Vue的实例
-
v-model、v-on等代码，是vue.js的东西,
-
分别创建了绑定两个控件的变量msg、msglist
-
变量的值改变后会自动刷新控件的展示、用户从界面上改变了控件的值，绑定的变量也会自动被更新
-
所以，send方法只要聚焦两个变量之间的处理即可
5) 改进后的写法
界面
第三种改进
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>改进后的写法</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
<script type="text/javascript">
window.onload = function() {
var app = new Vue({
el:"#divApp",
data:{
msg:"输入聊天内容后按Enter键",
msglist:"聊天记录："
},
methods:{
send:function () {
this.msglist += "\r\n" + " " + this.msg;
}
}
});
}
</script>
</head>
<body>
<div id="divApp" class="container">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input v-model="msg" v-on:keyup.enter="send" class="form-control"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea rows="10" class="form-control">{{msglist}}</textarea>
</div>
</div>
</div>
</div>
</body>
</html>
-
v-on:keyup.enter的含义是监听该input控件上的回车键事件
6) 总结
vue.js给我最直观的体验就是：页面初始化时，控件（视图层）绑定数据变量（数据层）后，以后就专注处理数据上的事情就可以了，数据变化后的界面表现或者界面变化后的数据调整，vue.js框架已经都帮我们处理好了。
借用一个网上的图：
MVVM框架
