摘要:借我殺死庸碌的情懷,借我縱容的悲愴與哭喊謝知非上一節(jié)已經(jīng)把架子搭好了,接下來就要開始真正的使用進(jìn)行開發(fā)了。一啟動(dòng)原理打開我們的目錄,能看到這樣的結(jié)構(gòu)很簡單有木有,存放資源。一個(gè)字符串模板作為實(shí)例的標(biāo)識(shí)使用。模板將會(huì)替換掛載的元素。
借我殺死庸碌的情懷,借我縱容的悲愴與哭喊
- 謝知非
上一節(jié)已經(jīng)把架子搭好了,接下來就要開始真正的使用vue2.0進(jìn)行開發(fā)了。廢話不多說,先撈到幾句(^__^) 。
既然是SPA項(xiàng)目,先把路由搞定
既然是基于組件的開發(fā),那組件怎么寫,組件之間的通信是個(gè)大問題
肯定有一個(gè)主對象,來控制全局的公共參數(shù)、方法
websocket要怎么和vue完美結(jié)合
我沒有服務(wù)器,后端怎么辦?
以上是我羅列出來的關(guān)鍵,接下來的開發(fā)都是基于這些觀點(diǎn)的。
一、啟動(dòng)原理打開我們的src目錄,能看到這樣的結(jié)構(gòu):
很簡單有木有,assets存放資源。components存放組件,也就是說我們的.vue文件就存放在這里,App.vue是我們掛載的組件,main.js是入口文件。
.vue 文件是什么?
不得不說,.vue文件真的很像一個(gè)小盒子,它把一個(gè)組件的html,css,js都存放到了一起,就像一副撲克,非常的完整,拆開就能打斗地主,多拿兩幅撲克可以玩升級,雖然我不玩。
App.vue
", // 一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì) 替換 掛載的元素。掛載元素的內(nèi)容都將被忽略,除非模板的內(nèi)容有分發(fā) slot。 components: { App } // 包含 Vue 實(shí)例可用組件的哈希表,這里只有一個(gè)App組件,也就是指App.vue })上面的注釋其實(shí)都是從vue官網(wǎng)扒下來的...http://cn.vuejs.org/
關(guān)于更詳細(xì)的vue教程,請以官網(wǎng)為準(zhǔn)。根據(jù)上面的內(nèi)容,我們很容易就能得出這樣的啟動(dòng)原理:根據(jù)引入的vue模塊和APP.vue,創(chuàng)建一個(gè)掛載到id為app的元素上面的對象,并配置了tempate和components屬性。然后根據(jù)配置對document進(jìn)行渲染。
原理看似很簡單,但是vue做了大量的工作。
二、組件的使用還是看我們的App.vue
", components: { App } })新建的組件:
Apart.vue
我是Apart
點(diǎn)我切換Bpart.vue:
我是Bpart
點(diǎn)我切換然后修改我們的App.vue:
完成以上步驟之后,在cmd輸入:
npm run dev打開瀏覽器就可以看到如下效果了:
很完美,路由功能擼好了。還有嵌套路由又該怎么做呢?官網(wǎng)上有很詳細(xì)的例子,對著官網(wǎng)擼,絕對能搞得很完美。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/86702.html
相關(guān)文章
Vue 2.0 開發(fā)聊天程序(一): 初建項(xiàng)目
摘要:它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。安裝和使用在之后的實(shí)踐過程中講解。有一套良好的代碼規(guī)范,對于項(xiàng)目的開發(fā)和維護(hù)都很友好。 努力了,不一定能成功,但是不努力,感覺好舒服啊 ——努訓(xùn) 沒有了解過vue1.*,直接上手vue2.0;雖然有些吃力但還是很愉快了學(xué)下來了。 一丶環(huán)境配置 node.js...
前端文檔收集
摘要:系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
前端文檔收集
摘要:系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
node技術(shù)棧 - 收藏集 - 掘金
摘要:異步最佳實(shí)踐避免回調(diào)地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術(shù)和異步函數(shù)。 Nodejs 連接各種數(shù)據(jù)庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個(gè)最佳實(shí)踐 - 前端 - 掘金全文共 6953 字,讀完需 8 分鐘,速讀需 2 分鐘。翻譯自...
發(fā)表評論
0條評論
閱讀 2574·2021-09-06 15:02
閱讀 3204·2021-09-02 10:18
閱讀 2825·2019-08-30 15:44
閱讀 687·2019-08-30 15:43
閱讀 1952·2019-08-30 14:08
閱讀 2763·2019-08-30 13:16
閱讀 1400·2019-08-26 13:52
閱讀 934·2019-08-26 12:21