上一篇文章所意，介紹了如何通過vue.js實(shí)現(xiàn)頁面輸出hello vue.js坎吻，這篇文章將介紹如何通過其實(shí)現(xiàn)數(shù)據(jù)雙向綁定
我們有這樣一個需求距贷，文本框中輸入什么內(nèi)容穗慕，文本框中的內(nèi)容就顯示在頁面上蝙寨。
你會說计技，這個很簡單喜德，我只要監(jiān)聽文本框內(nèi)容改變事件就可以實(shí)現(xiàn)了。
但是這里的需求只是修改一處垮媒，如果文本框內(nèi)容改變后需要同時修改20個地方的顯示呢舍悯？
那得執(zhí)行大量的DOM操作。
vue.js是MVVM結(jié)構(gòu)的睡雇，同類的還有AngularJs萌衬；至于MVC、MVP它抱、MVVM的比較網(wǎng)上已經(jīng)有很多了秕豫，這樣不再重復(fù)，我介紹肯定也沒網(wǎng)上大神們介紹的詳細(xì)观蓄，大家可以自行百度混移，谷歌。
什么侮穿？在墻內(nèi)谷歌不了歌径，那我推薦你一個軟件，不需要任何配置亲茅，只需要雙擊運(yùn)行回铛，支持MAC狗准、Windows、Unbuntu茵肃、Android腔长，真的很好用，狠戳這里 免姿。
廢話不多說饼酿，來看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>demo01</title>
<link rel="stylesheet" href="../css/base/bootstrap.min.css">
<link rel="stylesheet" href="../css/base/common.css">
</head>
<body>
<div class="container mt15">
<fieldset class="form-group" id="unameGroup">
<label for="userName">名字：</label> <span id="title">{{ uname }}</h1>
<input type="text" class="form-control" id="userName" placeholder="請輸入名字" v-model="uname">
</fieldset>
</div>
<script src="../js/base/vue.js"></script>
<script src="../js/base/jquery.min.js"></script>
<script src="../js/base/bootstrap.min.js"></script>
<script>
new Vue({
el: '#unameGroup',
data: {
uname: ''
}
});
</script>
</body>
</html>
頁面初始化效果：
頁面初始效果.png
修改文本框內(nèi)容：
改變文本框內(nèi)容1.png
改變文本框內(nèi)容2.png
注意點(diǎn)：
- 這里的span標(biāo)簽以及文本框必須包含在id為unameGroup的容器中榕酒，俗話說就是得在這個“作用域內(nèi)”胚膊，不然沒有效果。
- input上不是value={{uname}}想鹰，而是v-model="uname"
下一篇文章將學(xué)習(xí)如何渲染列表紊婉。
