1. Vue基礎

• MVVM——HelloWorld
• 插值（內容）v-bind（屬性） v-model （表單） ——資料繫結
• v-on 事件處理
• computed（計算屬性） watch（監聽屬性）mounted（生命週期）

2. Vue元件

• 單檔案元件（template script style） data()

• 匯出元件（export default {name:'Search'}） 引入元件（import）

• 父子元件通訊（props/$emit）兄弟元件通訊（$emit/$on） Vuex（大型專案）

• Vuex 基本示例

  //該檔案用於建立Vuex中最為核心的store
  import Vue from 'vue'
  //引入Vuex
  import Vuex from 'vuex'
  //應用Vuex外掛
  Vue.use(Vuex)
  
  //準備actions——用於響應元件中的動作
  const actions = {	
  }
  //準備mutations——用於操作資料（state）
  const mutations = {	
  }
  //準備state——用於儲存資料
  const state = {	
  }
  //準備getters——用於將state中的資料加工
  const getters = {	
  }
  //建立並暴露store
  export default new Vuex.Store({
  	actions,
  	mutations,
  	state,
  })
   
  

3. Vue介面訪問

• axios.get('http://localhost:8080/demo/cars').then(
  					response => {
  						console.log('請求成功了',response.data)
  					},
  					error => {
  						console.log('請求失敗了',error.message)
  					}
  				)
  

• 跨域訪問

4. Vue路由

• // 該檔案專門用於建立整個應用的路由器
  import VueRouter from 'vue-router'
  //引入元件
  import About from '../components/About'
  import Home from '../components/Home'
  
  //建立並暴露一個路由器
  export default new VueRouter({
  	routes:[
  		{
  			path:'/about',
  			component:About
  		},
  		{
  			path:'/home',
  			component:Home
  		}
  	]
  })
  
  
  	<!-- 原始html中我們使用a標籤實現頁面的跳轉 -->
         <!-- <a class="list-group-item active" href="./about.html">About</a> -->
         <!-- <a class="list-group-item" href="./home.html">Home</a> -->
  
  	<!-- Vue中藉助router-link標籤實現路由的切換 -->
  	<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
      <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
   
  

5. Vue+Element UI

• npm i element-ui -S 安裝元件

• 引入元件

  import Vue from 'vue';
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import App from './App.vue';
  
  Vue.use(ElementUI);
  
  new Vue({
    el: '#app',
    render: h => h(App)
  });
  

• 參考Vue單檔案元件的使用