Hello，我是 Alex 007，一個熱愛計算機編程和硬件設計的小白，爲啥是007呢？因爲叫 Alex 的人太多了，再加上每天007的生活，Alex 007就誕生了。
這篇文章我將帶領大家創建第一個Vue應用，並且講解一下什麼是聲明式渲染。
預備知識：
- HTML基礎知識。HTML的編程水平要達到中級水平，熟悉基本的標籤並且自己製作過簡單的頁面；
- CSS基礎知識。CSS的水平也要達到中級，最好有半年以上的切圖和佈局經驗；
- JavaScript基礎知識。要求對基本的語法有了解；
- Node.js基礎知識。不做要求，最好了解npm的基本使用。
那我接下來呢，我們看這個 Vue.js 的起步和聲明式渲染，Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統，它的應用可以分爲兩個重要部分，一個是視圖，另一個是腳本。
我們還是來寫寫代碼吧，新建一個index.html文件，在body中創建一個id爲app的div標籤：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
然後我們要通過script標籤引入Vue.js：
<script type="text/javascript" src="vue.js"></script>
當我們引入Vue.js的時候呢，會聲明一個全局變量，它的名字就叫作Vue，通過new Vue的方式可以獲得一個Vue對象，這個對象被我們稱之爲應用對象或者是Vue.js對象。
在new Vue的時候呢，需要注意傳遞一個對象作爲參數，這個對象有兩個非常重要的屬性，第一個是el(element)，利用id選擇器的方式綁定一個div，第二個重要的屬性是data，data是一個用於保存數據的對象，我們在視圖中使用了哪些變量就需要在data裏面聲明這些變量。
我們可以聲明一個message1變量，值爲Hello World，然後在綁定的div中通過h3以雙大括號的形式渲染它，就可以就可以看到頁面中已經渲染出來了。
<div id="app">
<h3>{{ message1 }}</h3>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
message1:'Hello World',
},
})
</script>
到這裏之後你可能會有點懵，我們來做一個類比，id爲app的div就好像一塊地，通過Vue被我們工作室承包了，然後我們想在這塊地上種點瓜果蔬菜，這個雙大括號就類似於刨的一個個坑，然後把data中準備好的數據一個一個插進入，這就叫插值表達式。
雙大括號中除了可以插入data中的數據，還可以直接插入數字、字符串、對象（注意括號）、表達式、函數返回值等等。
<div id="app">
<h3>{{ message1 }}</h3>
<h3>{{ 123 }}</h3>
<h3>{{ "Alex" }}</h3>
<h3>{{ {name: 'Alex',age: 18} }}</h3>
<h3>{{ 1 != 2 ? 'Nice' : 'Fuck' }}</h3>
<h3>{{ getName(0) }}</h3>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
message1: 'Hello World',
},
methods: {
getName(userId) {
return 'Alex';
},
}
})
</script>
現在我們已經創建了第一個Vue應用，看起來這就是渲染一個字符串模板，但是Vue在背後做了大量的工作。
在Vue中數據和DOM已經被建立了關聯，所有的東西都是響應式的，這也正是Vue的魅力所在。
好了，這篇文章的內容就講到這裏，我們創建了一個Vue應用，然後用了插值表達式，下一篇文章我們講講如何在Vue中使用條件判斷和循環。