一、環境搭建
1.npm
大型應用時推薦用npm安裝，npm能很好的和webpack等模塊打包器配合使用。具體安裝步驟請參考網上的諸多教程。完成后使用如下命令安裝vue。
$ npm install vue
安裝完成后，命令行運行命令 vue ，看到如下效果表示vue安裝成功：
2.vue-cli
vue-cli是vue提供的一個官方命令行工具。可用於快速搭建大型的單頁應用。
# 全局安裝 vue-cli $ npm install --global vue-cli
二、項目搭建
安裝完成之后我們就可以開始搭建我們的項目了。本次項目是基於webpack模板來構建的。參考下圖：
這樣我們就創建了一個項目。可以看到在todo文件夾下生成了如下文件：
接着使用npm install 安裝項目所需的依賴。這個過程可能有點慢。推薦使用淘寶鏡像。安裝完成使用npm run dev。瀏覽器中可以看到如下圖。說明我們的項目已經搭建完成。
二、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官方網站，如需轉載請聯系作者