其他章節請看:
初步認識 vue
vue 是什么
Vue (讀音 /vjuː/,類似於 view) 是一套用於構建用戶界面的漸進式框架。
所謂漸進式,就是你可以一步一步、有階段的使用 vue,不必一開始就使用所有的東西。
命令式框架 vs 聲明式框架
jQuery 是命令式操作 DOM 的前端框架。比如點擊一個新增按鈕,需要出現一個錄入信息的彈框,在 jQuery 中,我們需要在新增按鈕被點擊的時候,發出一個命令,讓錄入信息的彈框顯示。隨着交互越來越復雜,代碼中會有相當一部分的代碼是在操作 DOM,不好維護的問題也就出現了。
現在主流的框架 vue、angular 和 react 都是聲明式操作 DOM 的框架。所謂聲明式,就是我們只需要描述狀態與 DOM 之間的映射關系,就可以將狀態渲染成視圖。狀態到視圖的轉換,框架會幫我們做,不需要我們手動去操作 DOM。我們只需要關注狀態的維護,而不用再關心 DOM 的操作。
hello-world
直接用 script 的方式引入 vue,開始我們的第一個例子。
// 新建 demo/1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 模板將會替換掛載的元素。最后顯示的是 section,而不是 div -->
<div id='app'></div>
<script type="text/x-template" id="tpl">
<section>
{{ message }}
<p v-if="seen">現在你看到我了</p>
</section>
</script>
<script>
var app = new Vue({
el: '#app',
// 模板。描述狀態與 DOM 之間的關系。
template: '#tpl',
// 狀態
data: {
message: 'Hello Vue!',
seen: true
}
})
</script>
</body>
</html>
Tip:筆者使用 anywhere 來啟動一個服務器。通過 npm install anywhere --global 即可安裝。在任意目錄下執行 anywhere 就能啟動一個服務,也可以指定端口啟動 anywhere -p 8090。
進入 demo 目錄,啟動服務:
$ anywhere
Running at http://169.254.53.24:8000/
Also running at https://169.254.53.24:8001/
通過瀏覽器請求 1.html 頁面:http://169.254.53.24:8000/demo/1.html
頁面顯示:
Hello Vue!
現在你看到我了
如果在瀏覽器控制台下執行 app.seen = false,你會發現頁面中的 現在你看到我了 不見了。
在這個例子中,明面上我們做的只有:在模板中描述狀態與 DOM 之間的關系。背地里,vue 幫我們把狀態渲染成視圖,如果我們更改了狀態(數據),視圖會自動更新,無需我們操作 DOM。
vue 的開發模式
vue 框架的開發模式是多樣化的。可以把 vue 當成 js 庫來使用;也可以使用 .vue 單文件形式配合 webpack 使用,必要時還可以使用 vuex 來管理狀態,vue-router 來管理路由。
其他章節請看:
