Vue_js前端开发实战（慕课版）全套PPT课件.ppt

常用插件应用vue-router实现路由应用axios实现Ajax请求应用vue-router实现路由引入插件01基本用法02路由动态匹配03嵌套路由04命名路由05应用push()方法定义导航06命名视图07重定向08引入插件直接下载并使用script标签引入/zh/installation.html下载地址scripttype=text/javascriptsrc=JS/vue-router.js/script引入插件使用CDN方法scriptsrc=/vue-router/dist/vue-router.js/script使用NPM方法npminstallvue-routerimportVuefromvueimportVueRouterfromvue-routerVue.use(VueRouter)安装命令引用方式基本用法路径1组件1路径2组件2路径3组件3router-link组件router-link组件router-link组件to属性to属性to属性路由动态匹配scripttype=text/javascriptvarUser={template:divUser/div}varrouter=newVueRouter({routes:[{path:/user/:id,component:User}]})/scriptscripttype=text/javascriptvarUser={template:div用户ID：{{$route.params.id}}/div}varrouter=newVueRouter({routes:[{path:/user/:id,component:User}]})/script嵌套路由varUser={template:`divspan用户{{$route.params.id}}/spanrouter-view/router-view/div`}varrouter=newVueRouter({routes:[{path:/user/:id,component:User,children:[{path:sex,component:UserSex},{path:age,component:UserAge}]}]})基础用法divid=examplemy-component/my-component/divscripttype=text/javascriptvarmyMixin={created:function(){this.show();},methods:{show:function(){document.write(Vue.js中的混入)}}}Vponent(my-component,{mixins:[myMixin],template:h3HelloVue.js/h3});varvm=newVue({el:#example});/script选项合并name:周星星,sex:男组件sex:女,age:25混入对象name:周星星,sex:男,age:25全局混入divid=examplemy-component/my-component/divscripttype=text/javascriptVue.mixin({created:function(){varmyOption=this.$options.