山东省品牌建设促进会网站,php网站开发总结,网站建设首页模板下载,阿里巴巴网站建设的态度虚心组件化开发 组件化开发就是将一个页面拆分为多个不同的组件#xff0c;每个组件依赖的Css,js,资源等放到一起进行开发#xff0c;组件与组件之间可以进行嵌套#xff0c;在组件化中#xff0c;vue只有一个html文件#xff0c;所有的组件都挂载在该文件上#xff0c;这种单…组件化开发 组件化开发就是将一个页面拆分为多个不同的组件每个组件依赖的Css,js,资源等放到一起进行开发组件与组件之间可以进行嵌套在组件化中vue只有一个html文件所有的组件都挂载在该文件上这种单页面的应用使得维护与开发更为简单。 在组件化开发之前我们需要对 vue-cli 和 webpack(静态模块打包工具) 进行全局安装
npm install -g vue/cli npm install -g webpack Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接这样你可以专注在撰写应用上而不必花好几天去纠结配置的问题。与此同时它也为每个工具提供了调整配置的灵活性无需 eject。
路由(Router)
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成让用 Vue.js 构建单页应用变得轻而易举。功能包括 嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码 基本使用(路由配置) 路由安装: npm install vue-router对应版本 一般是在通过脚手架创建vue项目时选择了router 让脚手架替我们创建与vue版本与之对应得路由版本 用 Vue Vue Router 创建单页应用非常简单通过 Vue.js我们已经用组件组成了我们的应用。当加入 Vue Router 时我们需要做的就是将我们的组件映射到路由上让 Vue Router 知道在哪里渲染它们。 两种不同的引入方式区别 如上图的 HomeView的引入方式代表了无论是否使用都会进行加载相当于java中的饥饿模式 而另外一种相当于 java 中的懒汉模式只有在使用的时候才会进行引入加载 静态路由 下面的案例为一个开启了路由模式的侧边导航栏 导航栏开启了路由模式:routertrue后 index的值会被当做路由的路径进行跳转显示 动态路由 介绍取自 带参数的动态路由匹配 | Vue Router (vuejs.org) 很多时候我们需要将给定匹配模式的路由映射到同一个组件。例如我们可能有一个 User 组件它应该对所有用户进行渲染但用户 ID 不同。在 Vue Router 中我们可以在路径中使用一个动态字段来实现我们称之为 路径参数 。
路径参数 用冒号 : 表示。当一个路由被匹配时它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。
你可以在同一个路由中设置有多个 路径参数它们会映射到 $route.params 上的相应字段
带参跳转 params: 传参类似 post 路由配置 path: /home/:id 或者 path: /home:id刷新页面id会保留 不配置path ,第一次可请求,刷新页面id会消失 query: 传参类似get,路径后会显示参数 路由可不配置 html取参 $router.params/query.id script取参 this.$router.params/query.id 响应拦截器
在main.js全局配置文件中我们对响应拦截器进行配置
响应拦截器会将我们对后端进行请求后后端的数据返回会先经过响应拦截器
在下图中我们对axios 进行了全局的配置使用并在响应拦截器中对后端的数据进行了判断即返回的数据简化 请求拦截器
对前端发请求前要对发送的请求做什么可以添加自定义请求头等 this.$router.push 跳转到指定url路径并想history栈中添加一个记录点击后退会返回到上一个页面 this.$router.replace 跳转到指定url路径但是history栈中不会有记录点击返回会跳转到上上个页面 (就是直接替换了当前页面) this.$router.go(n) 向前或者向后跳转n个页面n可为正整数或负整数 路由守卫
常用在前后端分离项目中用于前端的登录拦截 To 目的地 From: 当前的信息 Next 函数 {path:’/login’} Next({path:to.path}) : 默认包含了你的目的地的地址 组件化分页 在传统的项目中我们对于分页的开发如果大量的页面需要分页呢每个页面都要有分页的代码会造成大量的重复代码而在组件化开发中我们只需要对分页进行一次的组件化配置就可以方便的对这部分重复的代码进行复用。 但是在组件化中我们需要父子组件之间互相传值才能实现分页的可利用。 templatedivel-table:datafilmList.listborderstylewidth: 100%el-table-columnpropfilmIdlabel电影编号width180/el-table-columnel-table-columnpropfilmNamelabel电影名字/el-table-columnel-table-columnproptype.typeNamelabel电影类型/el-table-columnel-table-columnpropfilmDurationlabel电影时长/el-table-columnel-table-columnpropfilmDatelabel上映日期/el-table-columnel-table-columnpropfilmRemarklabel备注/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagethis.pageNum:page-sizes[3, 5, 7, 9]:page-sizethis.pageSizelayouttotal, sizes, prev, pager, next, jumper:totalthis.filmList.total/el-pagination/div
/templatescript
export default {name: FileMsg,data () {return {filmList: [],pageNum: 1,pageSize: 3,}},methods: {async init(p,s) {this.filmList await this.$axios.get(/info/page?pageNum${p}pageSize${s});},handleSizeChange(val) {if (val ! undefined) {this.pageSize val;}this.init(this.pageNum, this.pageSize)},handleCurrentChange(val) {this.pageNum val;this.init(this.pageNum, this.pageSize)},},created() {this.handleSizeChange();}
}
/scriptstyle scoped/style父子组件(分页组件)
父子组件将会通过分页进行演示。 这里将对父子组件简单进行文字的讲解后通过代码进行分页的父子传值组件化演示 首先我们需要 component 定义对组件进行全局 或者 局部 导入的定义 组件的定义名字 只能使用 大小驼峰定义法 然后我们用使用html标签的方式在要使用的组件进行使用即可 父 - 子 子通过 prop: [] 来接收 子 - 父 子需要使用 $emit 的形式通过方法函数向父组件传值 这里简单了解有一定概念即可下面看相关代码演示: 分页使用的比较多所以这里我们对分页的组件进行全局引用 main.js 全局配置文件
