• Vue元件

概念：元件是為了拆分Vue例項的程式碼量，讓我們以不同的元件，來劃分不同的功能模組，
我們需要什麼樣的功能，就去呼叫對應的元件。

元件化和模組化的區別：
模組化：是從程式碼邏輯的角度進行劃分的，方便程式碼分層開發，保證每個功能模組的職能單一；
元件化：是從UI介面的角度進行劃分的，前端的元件化方便UI元件的重用。

• 全域性元件定義的三種方式

1.使用Vue.extend配合Vue.component方法：

var login = Vue.extend({
	template:'<h1>登入</h1>'
})
Vue.component('login',login)

2.直接使用Vue.component方法：

Vue.component('register',{
	template:'<h1>註冊</h1>'
})

3.將模板字串，定義到script標籤種：

<script id="tmpl" type="v-template">
	<div><a href="#">登入</a> | <a href="#">註冊</a></div>
</script>

同時，需要使用Vue.component來定義元件：

Vue.component('account',{
	template:"#tmp1"
})

注意：元件中DOM結構，有且只能有唯一的根元素來進行包裹！
 

• 元件中展示資料和響應事件

1.在元件中，data需要被定義為一個方法

Vue.component('account',{
	template:'#tmpl',
    data(){
    	return{
        	msg:'大家好！'
        }
    },
    methods:{
    	login(){
        	alert('點選登入按鈕')
        }
    }
})

2.子元件中，如果將模板字串，定義到了script標籤中，那麼
要訪問子元件身上的data屬性中的值，需要使用this來訪問。

• 父元件向子元件傳值

1.父向子傳值使用props

<script>
    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '這是父元件中的訊息'
      },
      components: {
        son: {
          template: '<h1>這是子元件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>
  
  2.使用v-bind或簡化指令，將資料傳遞到子元件中：
  
  <div id="app">    
  	<son :finfo="msg"></son>
  </div>
 

• 子元件向父元件傳值

子向父傳值使用$emit

<div id="app">
    <!-- 引用父元件 -->
    <son @func="getMsg"></son>

    <!-- 元件模板定義 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父元件傳值" @click="sendMsg" />
      </div>
    </script>
  </div>

  <script>
    // 子元件的定義方式
    Vue.component('son', {
      template: '#son', // 元件模板Id
      methods: {
        sendMsg() { // 按鈕的點選事件
          this.$emit('func', 'OK'); // 呼叫父元件傳遞過來的方法，同時把資料傳遞出去
        }
      }
    });

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子元件中，通過 this.$emit() 實際呼叫的方法，在此進行定義
          alert(val);
        }
      }
    });
  </script>
 

• Vue中的路由

什麼是路由？

1. 對於普通的網站，所有的超連結都是URL地址，所有的URL地址都對應伺服器上對應的資源；

2. 對於單頁面應用程式來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，
同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程式中的頁面跳轉主要用hash實現；

3. 在單頁面應用程式中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由）；

• 在Vue中使用vue-router(路由)

1.匯入vue-router元件類庫

<!-- 1. 匯入 vue-router 元件類庫 -->
  <script src="./lib/vue-router-2.7.0.js"></script>

2.使用 router-link 元件來導航

<!-- 2. 使用 router-link 元件來導航 -->
<router-link to="/login">登入</router-link>
<router-link to="/register">註冊</router-link>

3.使用 router-view 元件來顯示匹配到的元件

<!-- 3. 使用 router-view 元件來顯示匹配到的元件 -->
<router-view></router-view>

4.建立使用Vue.extend建立元件

  // 4.1 使用 Vue.extend 來建立登入元件
    var login = Vue.extend({
      template: '<h1>登入元件</h1>'
    });

    // 4.2 使用 Vue.extend 來建立註冊元件
    var register = Vue.extend({
      template: '<h1>註冊元件</h1>'
    });

5,建立一個路由 router 例項，通過 routers 屬性來定義路由匹配規則

// 5. 建立一個路由 router 例項，通過 routers 屬性來定義路由匹配規則
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

6.使用 router 屬性來使用路由規則

// 6. 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規則
    });

注意：在路由規則中定義引數

1.在規則中定義引數：
{ path: '/register/:id', component: register }

2.通過 this.$route.params來獲取路由中的引數：
var register = Vue.extend({
      template: '<h1>註冊元件 --- {{this.$route.params.id}}</h1>'
});

• watch、computed和methods之間的對比

1. computed屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用；
2. methods方法表示一個具體的操作，主要書寫業務邏輯；
3. watch一個物件，鍵是需要觀察的表示式，值是對應回撥函式。主要用來監聽某些特定資料的變化，
從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體；