Vue.js教程（一）：基本使用
阿新 • • 發佈：2018-12-21
vue.js是一套漸進式Javascript框架。是一個小巧好用的框架。
簡介
Vue既然是一個js框架，那麼基本上js能做的事情它都能做。Vue跟大多數js框架類似，都是優化js對DOM的操作。什麼是DOM操作呢？看下面：
<div id="app"></div>
如果想通過JS動態設定div的內容。純JS的操作如下：
document.getElementById("app").innerHTML='Hello JS！';
以上就是一段簡單的JS進行DOM操作的例子。Vue.js主要就是讓DOM操作變得更簡單和高效、靈活。
基本使用
如果Vue同樣要完成以上js的案例。配置和使用如下：
第一步：引用Vue.js框架
<head>
<meta charset="UTF-8">
<title>Vue入門</title>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
第二步：html準備
<body>
<div id="app">
{{ message }}
</div>
</body>
說明：以上{{ message }}就是vue語法，此處的{{ message }}可以理解為一個佔位變數，等待Vue給其賦值。
第三步：Vue啟用
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
說明：
el：表示待操作的標籤所對應的ID。
data：是Vue的變數定義區域。以上程式碼中Vue定義了一個變數名為message。此變數會自動注入到第二步中的佔位變數所在的位置。
完整程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入門</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> {{ message }} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html>