第一個Vue.js程序 · Vue從入門到實戰

[TOC] ---- ## 第一個Vue.js程序 ### 安裝我們可以在 Vue.js 的[官網](http://cn.vuejs.org/)上直接下載 vue.min.js 并用 `<script>` 標簽引入。Vue 會被注冊為一個全局變量。 >[danger] 重要提示：在開發時請用開發版本，遇到常見錯誤它會給出友好的警告。 [下載Vue.js生產版本](https://vuejs.org/js/vue.min.js) [下載Vue.js開發版本](https://vuejs.org/js/vue.js) ### 代碼示例 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>it研習社-第一個Hello Vue程序</title> </head> <body> <div id="app"> {{message}} </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'Hello Vue!' } }); </script> </body> </html> ~~~ >[success] 預覽：https://ityanxi.github.io/Vue-tutorial/chapter01/01hellovue.html 頁面輸出： ![](https://box.kancloud.cn/45b3c46335c858e0b07fe342f0719ced_115x35.png) ### 第一個Hello Vue代碼詳解 >[info] 1.將vue.js文件引入到當前頁面 ~~~ <script src="vue.js" type="text/javascript" charset="utf-8"></script> ~~~ 只要將vue.js文件引入頁面，在當前環境就會多出一個全局變量：Vue >[info] 2.通過全局構造函數：Vue ，實例化一個Vue應用程序接管的元素（包括所有的子元素） ~~~ <script type="text/javascript"> var app=new Vue({ el:'#app', //el:element 的簡寫，用來指定Vue應用程序接管的元素（包括所有的子元素） data:{ //data:data就是Vue實例應用程序中的數據成員 message:'Hello Vue!' } }); </script> ~~~ >[info]3.代碼執行流程解析 * 1.瀏覽器從上到下依次進行解析瀏覽器對于id=app 的div 內部的 {{message}}不認識，直接作為普通文本渲染到網頁上 * 2.瀏覽器繼續往后解析執行發現有一個js外鏈腳本，發起請求進行下載當當前頁面環境拿到js腳本之后，vue.js就會執行，執行結束，就向全局暴露出了一個對象：Vue * 3.當解析執行到咱們自己的Script的時候，開始解析執行咱們自己的代碼 - 3.1 創建Vue實例通過 el 屬性指定 Vue程序的接管范圍通過 data 向Vue 實例的應用程序中初始化了一個 message 成員 - 3.2 接下來 Vue 程序通過 el 屬性指定id為 #app 的div 開始解析執行 Vue 能識別的語法 {{message}} 在Vue 中被稱為雙花括號插值表達式在雙括號插值表達式中可以使用當前元素所屬Vue程序接管范圍的data中的數據