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