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/ [email protected]/dist/vue.js'></script>
<script src="./app.js"></script>
</body>
</html>
其中<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>用於引入vue.js,也可以下載到本地,通過本地路徑引入;
<script src="./app.js"></script>是在html中引入與之關聯的js檔案,app.js實現如下:
new Vue({
el:'#app',
data: {
message:'hello vue.js.'
}
});
需要注意的是,只有先引入vue.js才能在js中new Vue物件並繫結app,這樣直接瀏覽器開啟app.html就可以看到效果:
修改文字框中的內容,可以看到文字框上方的內容也在相應改變。