[Vue] 跟著Vue 闖蕩前端世界 | vue語法
到目前為止真的只是利用vue-cli建立個前端開發環境,先前花了幾篇文章說明前端種種機制webpack,eslint,npm....等,接著我們就來一同了解Vue相關所需具備的基本知識吧!前言本篇文章會說明一些開發上最基本所需具備的相關知識,讓大家可以快速進入Vue的世界,但你我都知道的魔鬼往往都是藏在細節中,因此建議最好在入門後,直接掃過官方說明文件一輪,可以對細節瞭解地更全面。 主要Vue實體(Instance)開啟專案根目錄下index.html後,發現什麼東西都沒有,只有存在一個id= "app"的div元素。故事的開始就是從這個main vueinstance而來,...
到目前為止真的只是利用 vue-cli 建立個前端開發環境,先前花了幾篇文章說明前端種種機制 webpack, eslint, npm .... 等,接著我們就來一同了解 Vue 相關所需具備的基本知識吧!
前言本篇文章會說明一些開發上最基本所需具備的相關知識,讓大家可以快速進入 Vue 的世界,但你我都知道的魔鬼往往都是藏在細節中,因此建議最好在入門後,直接掃過官方說明文件一輪,可以對細節瞭解地更全面。
主要 Vue 實體 (Instance)
開啟專案根目錄下 index.html 後,發現什麼東西都沒有,只有存在一個 id = "app" 的 div 元素。
故事的開始就是從這個 main vue instance 而來,開啟 main.js 程式進入點可以看到被創建的主要 vue 實體。
el 表示這個 vue instance 創建後會掛載取代 id="app" 的元素 router 是傳入 vue-router 組件 (ES6 屬性簡寫語法糖) template 是表示將 el 定義的標籤取代為此 HTML 模板 components 表示此 vue instance 所使用到的子組件,在此為 App 組件;因此在載入此 instance 後,因 template 中存在有 <App/> 標籤,因此 <App/> 又會被 App 組件中的 template HTML 模板所取代。
App.vue 檔案結構為 vue 所建議的組件撰寫方式,就是在一份檔案中撰寫組件所需的 HTML、Javascript 及 CSS 代碼;上文有提到 main vue instance 子組件有包含 App 組件,因此 main vue instance 中 template 包含的 <App/> 標籤就會被 App.vue 中定義的 Template HTML 模板取代,因此...