最近在入門學習vue,網上強調的好處是vue的資料雙向綁定，如果要做一個監聽html的文本框輸入變化的例子，網上給出的實際代碼示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
</head>
<body>
<!--view層
{{}}表示文本插值，運作{{message}}會被資料對象的message屬性替換。
-->
<div id="app">
<p>{{message1}}<input type="text" v-model="message1" /></p>
<p>{{message2}}<textarea v-model="message2"></textarea></p>
<input type="radio" v-model="radio1" />aa
<input type="radio" v-model="radio1" />bb
</div>
<script>
/* Model層 */
var exampleData = {
message1 : 'hello World!',
message2 : 'AAAA',
radio1 : false
}
/* ViewModel層,連接配接view和model層
vue執行個體需要傳入一個選項對象
選項對象包括挂載對象，資料，方法，模生命周期鈎子（？）
el屬性指向view,表示把vue執行個體綁定某個dom元素
*/
new Vue({
el : '#app',
data : exampleData
})
</script>
</body>
</html>
但是同樣，用jquery實作這個在文本框裡，輸入了内容，其它div區域跟着便文字的功能，也很簡單哦！也沒見得vue強大到那裡去！
<html>
<head>
<title>hangge.com</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function(){
$('#comment').on('input propertychange', function() {
$('#tip').html($(this).val());
});
});
</script>
</head>
<body>
<textarea id="comment" rows="5" cols="50"></textarea>
<br>
<div id="tip"></div>
</body>
</html>
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)