电商网站的功能,手机广告设计与制作软件,网络营销课程总结范文,湛江建设局网站1.下载依赖#xff1a; npm install vue-router
在src目录下新建一个文件夹router#xff0c;在router文件夹下新建一个文件router.js文件,在component目录下新建增加删除和修改的组件#xff0c;引入router.js当中 此时的init组件为主页面#xff08;#xff08;二、三 npm install vue-router
在src目录下新建一个文件夹router在router文件夹下新建一个文件router.js文件,在component目录下新建增加删除和修改的组件引入router.js当中 此时的init组件为主页面二、三的app.vueapp.vue只用来写路由占位符 router.js
import Vue from vue
import Router from vue-router/dist/vue-router.js
import init from ../components/init.vue
import app from ../components/app.vue
import add from ../components/add.vue
import del from ../components/del.vue
import update from ../components/update.vue
//Vue对象挂载Router对象所有的vue组件都能使用router当中的内容
Vue.use(Router);export default new Router({routes: [{//访问根路径的时候重定向到init路径path: /,redirect:/init},{path: /init,component: init},{path: /add,name:add,component: add},{path: /del,name:del,component: del},{path: /update,name:update,component: update},]
})index.js
import Vue from vue
import App from ./components/App.vueimport router from ./router/router.jsconst vm new Vue({el:#app,render:hh(App),router:router
})app.vue
templatediv idapprouter-view/router-view/div
/templatescript/scriptstyle scopedscoped/styleinit.vue
templatediv classdiv1div classdiv2div classdiv21学号/divdiv classdiv21姓名/divdiv classdiv21性别/divdiv classdiv21班级/divdiv classdiv21/divdiv classdiv21/div/divdiv classdiv3 v-foritem in peoplediv classdiv31{{item.id}}/divdiv classdiv31{{item.name}}/divdiv classdiv31{{item.sex}}/divdiv classdiv31{{item.class}}/divdiv classdiv31router-link to/update更改/router-link/divdiv classdiv31button clickdel删除/button/div/divdiv classdiv4router-link to/add增加/router-link/div/div
/templatescriptexport default {data(){return{msg:66,people:[]}},mounted:function(){console.log(发送请求);var xhr new XMLHttpRequest();xhr.open(POST,http://localhost:3000/init);xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);xhr.send();var that this;xhr.onload function(){that.people JSON.parse(xhr.responseText);}},methods:{}}console.log(结束)/script
/scriptstyle scopedscoped.div1{width: 800px;margin: auto;border: 1px solid transparent;}.div2{width: 100%;height: 50px;display: flex;}.div21{text-align: center;line-height: 50px;border: 1px solid aqua;flex: 1;}.div3{width: 100%;height: 50px;display: flex;}.div31{border: 1px solid aqua;text-align: center;line-height: 50px;flex: 1;}/style页面效果 接下来完善一下增加、删除和更新的页面源代码就不展示了就是原生的HTML、css
