vuejs最簡單實現 html+js
阿新 • • 發佈：2018-12-23
vuejs是一種構建使用者介面的庫，具體可參考http://cn.vuejs.org/v2/guide/
本文使用vuejs實現一個最簡單的功能，即實現響應式的資料繫結，將前端的view和model繫結。
在vuetest資料夾下新建兩個檔案，app.html和app.js，app.html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuetest</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
<div>{{message}}</div>
<input type="text" v-model="message">
</div>
</div>
</div>
<script src='https://unpkg.com/ <script src="./app.js"></script>是在html中引入與之關聯的js檔案，app.js實現如下：
new Vue({
el:'#app',
data: {
message:'hello vue.js.'
}
});
修改文字框中的內容，可以看到文字框上方的內容也在相應改變。
