vue學習寫的demo

由於最近vue火熱，因此本身也自學了一下vue，看了下官網的api，也看了網上的教程，本身結合所學的，寫了個demo，如下是我學習時遇到的問題，和demo中涉及的知識點。

1.這個demo用的是官網的配置方法，基於node,webpack,vue-cli的腳手架。具體步驟你們能夠去官網教程查看，寫的很詳細。

2.下面是這個demo的顯示效果和目錄環境

 

這個demo中涉及的都是基礎的知識點，但願對於初學者能有幫助，首先咱們根據步驟一步一步看代碼。

首先運行完index.html以後，就會進入到main.js

這裏會從main.js進入到app.vue中

 

這個就是首頁，看結構能夠看出，咱們上面的兩個板塊，用到了vue-link組件，這個組件就至關於a連接，他會經過to後面的相對路徑找到對應的頁面。而後頁面的內容，會顯示在router-view中但首先你的vue項目要支持路由，而後看一下router文件夾下index.js中的代碼

 

咱們把要跳轉的兩個頁面路徑配置在index.js中，其中第一個配置的就是默認進來路徑展現是哪一個版塊。板塊中的數據是調用的mock假接口。這裏說說，怎麼在vue裏面使用假接口。

首先在index.html下新建一個data.json。裏面寫你要模擬的json數據。

 

而後在根目錄下找到build裏找到dev-server.js文件加入下面代碼

 

這裏面appData是引入你data.json的路徑。記得配置完dev-server.js以後要npm run dev一下，要不不會生效。而後咱們引入vue-resource，就能夠在頁面中使用假接口中的數據了。

下面咱們看下news.vue頁面爲例

 

這裏this.$http.get(url)相似於jq的ajax同樣了，直接res.data就得到接口中的數據了。

其中created就是一個生命週期鉤子函數，就是vue實例生成後調用的函數，通常咱們都在created函數中處理ajax數據。

而後咱們看一下下面的todolist。

 

咱們這裏的每條數據，都通過localstorage存儲，這樣刷新頁面咱們的數據也不會丟失。首先咱們監聽鍵盤的回車事件，而後觸發addNew方法，而後在下面methods中定義addNew方法。在addNew中定義咱們所須要的參數。例如當前時間，輸入框內容，是否顯示選中和刪除按鈕。

 

而後就是checkbox選中事件

 

當咱們都選中後，上面的title會變成今日畢。

當咱們選則刪除按鈕時，咱們就是把當前選中元素從items這個數組中刪除出去，而後 再渲染頁面時，天然就沒有這個dom了。

 

下面再說兩個項目中遇到的錯誤：

報錯：

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the 「name」 option. (found in root instance)

是由於new Vue寫在了component以前，要寫在註冊組件以後。

報錯：

 Cannot use v-for on stateful component root element because it renders multiple elements.

v-for不能用於根元素（root element）。由於v-for是個循環，它返回更多的元素。致使沒法渲染。