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

本文主要是介绍模板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>

这篇关于模板2——复合组件、引入bootstrap和jquery、向服务器发送http请求的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---