Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web界面的庫。它的目標(biāo)是通過盡可能簡單的API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
1.實(shí)現(xiàn)在文本框輸入文字，在上方顯示。
Paste_Image.png
2.新建vue.js、vue1.js、vue1.html，目錄如下。
Paste_Image.png
3.vue1.html的代碼如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue1</title>
<script type="text/javascript" src="../src/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="text" name="message" v-model="message" />
</div>
<script type="text/javascript" src="../src/js/vue1.js"></script>
</body>
</html>
vue1.js的引入在頁面代碼的后面，否則在某些瀏覽器上會(huì)出現(xiàn)找不到#app的元素的錯(cuò)誤。
4.vue1.js代碼
var app = new Vue({ el: '#app', data: { message: "hello world" }});
