vue學習筆記（1）—— 組件化實現todoList

 1、環境搭建

　　1.npm

　　　　大型應用時推薦用npm安裝，npm能很好的和webpack等模塊打包器配合使用。具體安裝步驟請參考網上的諸多教程。完成後使用以下命令安裝vue。

     $ npm install vue

　　　　安裝完成後，命令行運行命令 vue ，看到以下效果表示vue安裝成功：

            

　　2.vue-cli

　　　　vue-cli是vue提供的一個官方命令行工具。可用於快速搭建大型的單頁應用。

   # 全局安裝 vue-cli
   $ npm install --global vue-cli

2、項目搭建

　　安裝完成以後咱們就能夠開始搭建咱們的項目了。本次項目是基於webpack模板來構建的。參考下圖：

　　

　　這樣咱們就建立了一個項目。能夠看到在todo文件夾下生成了以下文件：

       

　   接着使用npm install 安裝項目所需的依賴。這個過程可能有點慢。推薦使用淘寶鏡像。安裝完成使用npm run dev。瀏覽器中能夠看到以下圖。說明咱們的項目已經搭建完成。

2、todoList實現

　　1.首先介紹幾個重要的文件

　　　　index.html：這是項目的入口html文件。

　　　　

　　　　main.js：這是項目的入口js文件，在webpack.config.js能夠看到。

　　　　

　　　　main.js主要是初始化vue實例。"el"是將vue實例掛載到index.html中的id爲app的元素上。「render」在這裏是給綁定的節點渲染一個vue組件。

　　　　

　　　　App.vue：這是咱們的主組件。

　　2.如今開始項目的編寫。這個例子很簡單，適用於剛開始接觸vue的人羣。

　　　　在App.vue中代碼以下：

<template>
  <div id="app">
    <todoList :list="lists"></todoList>
  </div>
</template>

<script>
    import todoList from "./component/todoList.vue";
    export default{
        name:"app",
        data(){
            return {
                lists:[
                    {id:1,text:"吃飯"},
                    {id:2,text:"睡覺"},
                    {id:3,text:"打豆豆"}
                ]
            }
        },
        components:{
            "todoList":todoList
        }
    }
</script>

　　　　引入了一個新的組件todoList顯示列表項。使用自定義屬性list將父組件的值傳遞到子組件。

　　　　在todoList.vue中以下所示：

<template>
    <div>
        <ul>
            <li v-for="listItem in list">{{listItem.text}}</li>
        </ul>
    </div>
</template>

<script>
    export default{
        name:"todoList",
        props:{
            list:{
                type:Array
            }
        }
    }
</script>

 

　　　　props用於接收從父組件傳遞過來的值，試用v-for循環顯示列表項。頁面顯示：

　　　　

　　　　這樣一個簡單的todoList就作完了。用到了vue的組件化，以及父子組件間的值傳遞。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　————— 本文部分參考vue官方網站，如需轉載請聯繫做者