父元件向子元件傳值：

v-bind:content="father-components-data"
子元件利用props：[…] 接收每一個父元件傳過來的值

子元件向父元件傳值：

this.$emit()
通過事件觸發向上一層觸發事件，父元件監聽此事件，獲取子元件帶出的資料內容

以一個todolist為例：

var todoItem = {
  props:['content','index'],
  //子元件利用props：[...] 接收每一個父元件傳過來的值
  template:"<li @click='deleteItem'>{ {content} }</li>"
 
,
  methods:{
    deleteItem:function(){
      this.$emit("delete",this.index)
      //子元件向父元件傳值: this.$emit()
      //通過事件觸發向上一層觸發事件，父元件監聽此事件，獲取子元件帶出的資料內容
    }
  }
}
var app = new Vue({
  el:'#app',
  data:{
    list:[],
    inputValue:""
  },
  components:{
    todoItem: todoItem
  },
  methods:{
    buttonClick:
 
function(){
      this.list.push(this.inputValue);
      this.inputValue = '';
    },
    deleteItem: function(index){
      this.list.splice(index,1);
    }
  }
})

<div id='app'>
  <input type="text" v-model="inputValue">
  <button @click="buttonClick" value="">提交</button>
 

  <ul>
    <todo-item :content="item"
               :index="index"
               v-for="(item,index) in list"
               @delete="deleteItem">
    </todo-item>
    <!--
      :content="item"和:index="index"為父元件向子元件傳值，這些值都要通過props接收
      @delete為父元件通過父元件中的deleteItem函式，監聽子元件中額delete事件。
    -->
  </ul>
</div>

Vue.js的生命週期函式

生命週期函式：Vue例項在某一時間點會自動執行的函式

路由

路由就是根據網址的不同，返回不同的內容給使用者

vue-router是Vue.js官方的路由外掛，它和vue.js是深度整合的，適合用於構建單頁面應用。
vue的單頁面應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來。
傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。
在vue-router單頁面應用中，則是路徑之間的切換，也就是元件的切換。

在一個vue工程專案資料夾中:

• .vue是一個單檔案元件.
• 路由的配置都放在router這個資料夾下index.js裡
• APP是整個應用的根元件
• <router-view/>這個標籤顯示的內容就是當前路由地址對應的路由內容(即index.js裡對應的配置項)