---router資料夾中的index.js檔案---
export default new VueRouter({
    mode:'history',  // 改成history模式
    routes:[
        {
            name:'首頁',//元件呈現名稱
            path:'/index', //對應虛擬的路徑
            component:Home , //它所對應的原件
        },
        {
            //name:'分頁',//元件呈現名稱
            path:'/page', //對應虛擬的路徑
            //component:Page , //它所對應的原件
            components:{
                default: Page,
                menu: Menu,
            },
            children:[
                {
                    name:'child1',//元件呈現名稱
                    path:'', //對應虛擬的路徑
                    component:child_1 , //它所對應的原件    
                },
                {
                    name:'child2',//元件呈現名稱
                    path:'child2', //對應虛擬的路徑
                    component:child_2 , //它所對應的原件      
                },
                {
                    name:'child3',//元件呈現名稱
                    path:'child3', //對應虛擬的路徑
                    component:child_3 , //它所對應的原件      
                }
            ]
        }     
    ]
});

import Vue from 'vue'
import VueRouter from 'vue-router'

// 以上為官方提供的元件
import Home from '@/component/HelloWorld'

Vue.use(VueRouter)  // 啟用指令

---HTML---
<a href="http://www.google.com.tw" class="close>按鈕</a>

---JavaScript---
$(document).ready(function(){
	$('.close').click(function(e){
		e.preventDefault();
	})
})

<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.0aad2172a75b8ed4f46c.js></script>
<script type=text/javascript src=/static/js/app.2f2e5edd9af2c59aa514.js></script>

<script type=text/javascript src=static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=static/js/vendor.0aad2172a75b8ed4f46c.js></script>
<script type=text/javascript src=static/js/app.2f2e5edd9af2c59aa514.js></script>

---HTML---
<div class="header">
	<h1>標題一</h1>
</div>

<div id="app">
	<h2>標題二</h2>
</div>

---JavaScript---
<script>
$(document).ready(function(e){
    $('.header h1').hide();
    
    $('#app h2').fadeIn(1000);
})
</script>

---HTML---
	<div>
        <a href="#" class="btn btn-danger">按鈕</a>
    </div>
	
	<div class="header">
		<h1>標題</h1>
	<div>
---JavaScript---
<script>
	$('a').hide();
	$('.header').hide();
	$('a').attr('href', 'http,://www.kimo.com.tw'); // 更改a標籤的href屬性
</script>

---HTML---
<div id="app">
  <table class="table">
    <tbody>
      <tr is="row-component-one" v-for="(item, key) in data" 
        v-if="key % 2"
        :item="item" :key="key"></tr>
      <tr is="row-component-two" v-for="(item, key) in data" 
        v-if="(key - 1) % 2"
        :item="item" :key="key"></tr>
    </tbody>
  </table>
</div>

---JavaScript---
<script type="text/x-template" id="row-component">
  <tr>
    <td>{{ item.name }}</td>
    <td>{{ item.cash | currency | dollarSign }}</td>
    <td>{{ item.icash | currency | dollarSign }}</td>
  </tr>
</script>

<script type="text/x-template" id="row-component-two">
  <tr class="bg-primary text-white">
    <td>{{ item.name }}</td>
    <td>{{ item.cash | currency | dollarSign }}</td>
    <td>{{ item.icash | currency | dollarSign }}</td>
  </tr>
</script>

<script>
	var childOne = {
  props: ['item'],
  data: function() {
    return {
      data: {},
      extendData: '這段文字是 extend 得到'
    }
  },
  template: '#row-component',
  filters: {
    dollarSign: function (n) {
      return `$ ${n}`
    },
    currency: function(n) {
      return n.toFixed(2).replace(/./g, function(c, i, a) {
          return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;
      });
    }
  },
  mounted: function() {
    console.log('Extend:', this)
  }
}

var childTwo = {
  props: ['item'],
  data: function() {
    return {
      data: {},
      extendData: '這段文字是 extend 得到'
    }
  },
  template: '#row-component-two',
  filters: {
    dollarSign: function (n) {
      return `$ ${n}`
    },
    currency: function(n) {
      return n.toFixed(2).replace(/./g, function(c, i, a) {
          return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;
      });
    }
  },
  mounted: function() {
    console.log('Extend:', this)
  }
}
var app = new Vue({
  el: '#app',
  data: {
    data: [
      {
        name: '小明',
        cash: 100,
        icash: 500,
      },
      {
        name: '杰倫',
        cash: 10000,
        icash: 5000,
      },
      {
        name: '漂亮阿姨',
        cash: 500,
        icash: 500,
      },
      {
        name: '老媽',
        cash: 10000,
        icash: 100,
      },
    ]
  },
  components: {
    "row-component-one": childOne,
    "row-component-two": childTwo,
  },
  mounted: function() {
    console.log('Vue init:', this)
  }
});
</script>

---HTML---
<div id="app">
  <input type="text" v-focus>
</div>


---Javascript---
Vue.directive('focus', {
  // 當綁定元素插入父元素後，會觸發 inserted hook 內的內容
  inserted: function (el) {
    el.focus()  // 聚焦元素
  }
})

var app = new Vue({
  el:'#app',
  data:{}
})