模板2——复合组件、引入bootstrap和jquery、向服务器发送http请求

list.vue

<template>
	<div>
		<my-header></my-header>
		<h1>列表页</h1>
		<ul>
			<li v-for="(tmp,index) in list">
				<button @click="jump(index)">{{tmp}}</button>
			</li>
		</ul>
		<myfooter></myfooter>
	</div>
</template>

<script>
	import MyFooter from '@/components/MyFooter'

	export default{
		data:function(){
			return {list:[100,200,300]}
		},
		methods:{
			jump(myIndex){
				this.$router.push('/myDetail/'+myIndex);
			}
		},
		components:{
			myfooter:MyFooter
		}
	}
</script>

<style>
	ul{
		color:#FF0000;
		list-style:none;
	}
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Test from '@/components/Test'  //别少了/
import List from '@/components/List'
import Detail from '@/components/Detail'

import MyHeader from '@/components/MyHeader'
Vue.component('my-header',MyHeader);

import ToDoItem from '@/components/ToDoItem'  //前后命名尽量相同 ToDoItem
Vue.component('to-do-item',ToDoItem);

import ToDoInput from '@/components/ToDoInput'
Vue.component('to-do-input',ToDoInput);

import ToDoList from '@/components/ToDoList'
Vue.component('to-do-list',ToDoList);

import ToDoBox from '@/components/ToDoBox'
Vue.component('to-do-box',ToDoBox);

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: ToDoBox
    },
    {
    	path:'/myList',
    	component:List
    },
    {
    	path:'/myDetail/:id',
    	component:Detail
    },
    {
      path:'/myBox',
      component:ToDoBox
    }
  ]
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/css/bootstrap.css'
import './assets/js/jquery.js'
import VueResource from 'vue-resource'
Vue.use(VueResource);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

ToDoInput.vue

<template>
	<div id="myDiv">
		<input type="text"/>
		<button class="btn btn-success">add</button>
	</div>
</template>

<script>
	export default{
		mounted:function(){
			$('#myDiv').css({backgroundColor:"red"})
		},
		created:function(){
			this.$http.get('http://localhost/admin/data/user_list.php').then((response)=>{
				console.log(response.data);
			})
		},
		data:function(){
			return {userInput:''}
		},
		methods:{
			handleClick(){

			}
		}
	}
</script>

MyHeader.vue

<template>
	<div>
		<h1>myHeader</h1>
	</div>
</template>

<script>
	export default{
		
	}
</script>

MyFooter.vue

<template>
	<div>
		<h1>这是页尾</h1>
	</div>
</template>

<script>
	export default{
		
	}
</script>