vue.js 2.0開發(4)

使用vue-cli，首先安裝：

npm install -g vue-cli

安裝完了執行vue命令，會出現

vue init <template-name> <project-name>

project-name就是咱們項目目錄的名字，vue init webpack my-project,這裏的webpack就是咱們的構建工具，下面咱們運行：

vue init webpack vuejs-2.0-cli

下面就是一些  項目名 啊 項目描述啊  做者啊 巴拉巴拉的

而後就彈出一個選項  讓你選擇，這裏咱們選擇第一個Runtime+Compiler模式

 接下來詢問是否使用ESLint語法，咱們這裏不使用，由於ESLint語法要求比較嚴謹，初學者可能會出現不少莫名的問題，詢問使用unit test咱們都選擇no

進入到咱們的項目當中cd vuejs-2.0-cli，執行上面提示的步驟

cd vuejs-2.0-cli
     npm install
     npm run dev

在下載過程當中若是出現報錯的話建議升級咱們的nodejs，執行咱們的npm run dev 後會直接打開這個頁面。在編輯器中打開咱們的項目的話應該就能夠看到

打開裏面的vue文件你就能夠看到其實就是相似咱們webpack和vue的組件寫法，那麼咱們把以前的todos組件放到這裏來，能夠先在components中新建一個todo-items.vue

<template>
    <ul class="list-group">
      <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
        {{todo.title}} 
        <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
        <button class="btn btn-xs pull-right margin-right-10" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
      </li>
    </ul>
</template>

<script>
export default {
  props:['todos'],
  data(){
    return {
      newTodo:{id:null,title:"",completed:false}
    }//定義一個obj;
  },
  props:['todos'],
  methods:{
    deleteTodo(index){
      this.todos.splice(index,1);//刪除下標爲index的元素
    },
    toggleCompletion(todo){
      todo.completed = !todo.completed;
    }
  }
}
</script>

<style>
  .completed{
    color: green;
    font-style: italic;
  }
  .margin-right-10{
    margin-right: 10px;
  }
</style>

其實就是咱們以前的代碼，只是把html放到了template裏面，以前是放到script裏面，在建立一個todo-form.vue

<template>
    <form v-on:submit.prevent="addTodo(newTodo)">
      <div class="form-group">
        <input type="text" name="" class="form-gcontrol" placeholder="add a new todo" v-model="newTodo.title">
      </div>
      <div class="from-group">
        <button class="btn btn-success" type="submit">add todo</button>
      </div>
    </form>
</template>

<script>
export default {
    props:['todos'],
    data(){
      return {
        newTodo:{id:null,title:"",completed:false}
      }//定義一個obj;
    },
    methods:{
      addTodo(newTodo){//es6
        this.todos.push(newTodo);//把新的obj添加在數組中，
        this.newTodo = {  id:null,title:"",completed:false}//初始化newTodo
      },
    }
}
</script>

<style>
  
</style>

而後在咱們的App.vue中引用：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <hello></hello> -->
    <todo-item :todos="todos"></todo-item>
    <todo-form :todos="todos"></todo-form>
  </div>
</template>

<script>
import Hello from './components/Hello'
import todoForm from './components/todo-form'
import todoItem from './components/Todo-items'

export default {
  name: 'app',
  data(){
    return{
        message:'this is todos',
        todos:[
          {id:1,title:"learn vuejs",completed:false},
        ],
    }
  },
  computed:{
    todoCount(){
      return this.todos.length;
    }
  },
  components: {
    Hello,todoForm,todoItem
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px; 
}
</style>

這裏咱們要注意的幾個地方就是：

1.咱們的兩個vue組件雖然一個叫todo-items一個叫todo-form，可是咱們在定義咱們的標籤名的時候必定要用駝峯命名，這裏還要注意一個小細節，vue1.0親測傳遞到子頁面的數據名不能大小寫混合好比‘todoForm’。

import todoForm from './components/todo-form'
import todoItem from './components/Todo-items'

components: {
    Hello,todoForm,todoItem
  }

可是在template中引用的時候卻用

<todo-item :todos="todos"></todo-item>
<todo-form :todos="todos"></todo-form>

或者

<todoItem :todos="todos"></todoItem>
<todoForm :todos="todos"></todoForm>

都是能夠的可是todo-item更標準一些，還有就是要記得聲明:todos="todos",樣式的話能夠在index.html中引入

<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

還以在模板中只能有一個根元素，像這樣就是不行的

<template>

   <h1>{{message}} ({{todos.length}})</h1>
    <ul class="list-group">
      <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
        {{todo.title}} 
        <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
        <button class="btn btn-xs pull-right margin-right-10" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
      </li>
    </ul>
</template>  

你能夠再在外面包裹一層

<template>
<div>
   <h1>{{message}} ({{todos.length}})</h1>
    <ul class="list-group">
      <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
        {{todo.title}} 
        <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
        <button class="btn btn-xs pull-right margin-right-10" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
      </li>
    </ul>
</div>    
</template>

還有就在咱們APP.vue中的數據要用函數的形式

data(){
    return{
        todos:[
          {id:1,title:"learn vuejs",completed:false},
        ],
    }
  },

在咱們的main.js中定義咱們的

components: { App }

App組件，咱們能夠把咱們App組件理解爲咱們的一個根組件，根組件中咱們又能夠定義一些咱們的子組件

components: {
    Hello,todoForm,todoItem
  }