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

缺乏、安全感 2022-06-01 01:19 47阅读 0赞

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>