网站建设公司哪家比较好,外贸网站建设公司价格,订阅号做流量 那些电影如何链接网站,做网站的人Vue Vue是一套前端框架#xff0c;免除原生)avaScript中的DOM操作#xff0c;简化书写。是基于MVVM(Model–View-ViewModel)思想#xff0c;实现数据的双向绑定#xff0c;将编程的关注点放在数据上。简单来说#xff0c;就是数据变化的时候, 页面会自动刷新, 页面变化的时…Vue Vue是一套前端框架免除原生)avaScript中的DOM操作简化书写。是基于MVVM(Model–View-ViewModel)思想实现数据的双向绑定将编程的关注点放在数据上。简单来说就是数据变化的时候, 页面会自动刷新, 页面变化的时候数据也会自动变化。 学习参考
Vue入门
使用Vue在当前页面导入Vue.js文件即可1、引入Vue.js文件要使用vue必须导入vue.js文件在html文件同级创建js目录vue.js文件拷贝到js目录然后编写script标签来引入vue.js文件script srcjs/vue.js/script2、在JS代码区域创建Vue核心对象定义数据模型在js代码区域定义vue对象,代码如下script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue}})/script在创建vue对象时有几个常用的属性el: 用来指定哪个些标签受 Vue 管理。 上述例子中该属性取值 #app 中的 app 需要是受管理的标签的id属性值data: 用来定义数据模型对象methods: 用来定义函数。3、编写视图{{}}是插值表达式用来将vue对象中定义的model展示到页面上的bodydiv idappinput typetext v-modelmessage{{message}}/div/body!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue快速入门/title!-- 1、引入 Vue --script srcJS/vue.js/script
/headbody!-- 3、视图层 --div idappinput typetext v-modelmessage!-- 差值表达式{{表达式}} 变量、三元运算符、函数调用、算术运算--{{message}} /div
/body!-- 2、创建Vue核心对象 --
script// 定义Vue对象new Vue({el:#app, //Vue接管区域data:{message:Hello Vue!}})
/script/html插值表达式形式{{ 表达式 }}。内容可以是变量、三元运算符、函数调用、算术运算Vue常用指令 指令HTML标签上带有V-前缀的特殊属性不同指令具有不同含义。常用指令
指令作用v-bind为HTML标签绑定属性值如设置href,css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素判定为true时渲染否则不渲染v-else-if条件性的渲染某元素判定为true时渲染否则不渲染v-else条件性的渲染某元素判定为true时渲染否则不渲染v-show根据条件展示某元素区别在于切换的是 display 属性的值v-for列表渲染遍历容器的元素或者对象的属性
v-bind 通过v-bind或者v-model绑定的变量必须在数据模型中声明。 v-bind: 为HTML标签绑定属性值如设置 href , css样式等。当vue对象中的数据模型发 生变化时标签的属性值会随之发生变化。 v-bind的作用和插值表达式差不多, 只不过, v-bind主要用于动态设置标签的属性值。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlev-bind/titlescript srcjs/vue.js/script
/headbodydiv idapp!-- 给a标签的href属性赋值并且值应该来自于vue对象的数据模型中的url变量 --a v-bind:hrefurl链接1/a!-- v-bind指令是可以省略的 --a :hrefurl链接2/ainput typetext /div
/bodyscript//定义Vue对象new Vue({el: #app, //vue接管区域data:{url: https://www.baidu.com}})
/script/htmlv-model v-model 在表单元素上创建双向数据绑定。双向是指vue对象的data属性中的数据变化视图展示会一起变化视图数据发生变化vue对象的data属性中的数据也会随着变化。 data属性中数据变化我们知道可以通过赋值来改变但是视图数据为什么会发生变化呢只有 表单项标签所以双向绑定一定是使用在表单项标签上的。编写如下代码
input typetext v-modelurl!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue常用指令/title!-- 1、引入 Vue --script srcJS/vue.js/script
/headbody!-- 3、视图层 --div idappa v-bind:hrefurl链接1/aa :hrefurl链接2/ainput typetext v-modelurl/div/body!-- 2、创建Vue核心对象 --
script// 定义Vue对象new Vue({el:#app, //Vue接管区域data:{url:https://www.baidu.com}})
/script/htmlv-on Vue中也可以给页面元素绑定事件 v-on: 用来给html标签绑定事件的。
需要注意的是如下2点v-on语法给标签的事件绑定的函数必须是vue对象种声明的函数v-on语法绑定事件时事件名相比较js中的事件名没有on如在js中事件绑定demo函数input onclickdemo() vue中事件绑定demo函数input v-on:clickdemo()!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue常用指令--on/title!-- 1、引入 Vue --script srcJS/vue.js/script
/headbody!-- 3、视图层 --div idappinput typebutton value请点击 v-on:clickhandle()!-- 简略写法 --input typebutton value请点击2 clickhandle()/div/body!-- 2、创建Vue核心对象 --
script// 定义Vue对象new Vue({el:#app, //Vue接管区域data:{},methods:{handle:function(){alert(你已经成功点击)}}})
/script/htmlv-if 和 v-show
判断语法 v-if与v-show可以根据条件的结果,来决定是否显示指定内容
v-if: 条件不满足时, 元素不会存在
v-show: 条件不满足时, 元素会隐藏不会显示(但仍然存在)!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue常用指令--条件/title!-- 1、引入 Vue --script srcJS/vue.js/script
/headbody!-- 3、视图层 --div idapp年龄input typetextv-modelage经判定为span v-ifage 35年轻人(35及以下)/spanspan v-else-ifage 60中年人(35-60)/spanspan v-else老年人(60及以上)/spanbrbr年龄input typetextv-modelage经判定为span v-showage35年轻人(35及以下)/spanspan v-showage 35 age60中年人(35-60)/spanspan v-showage 60老年人(60及以上)/span/div/body!-- 2、创建Vue核心对象 --
script// 定义Vue对象new Vue({el:#app, //Vue接管区域data:{age:20},methods:{}})
/script/htmlv-if 与 v-show 浏览器呈现的效果是一样的但是浏览器中html源码不一样。v-if指令不满足条件的标签代码直接没了而v-show指令中不满足条件的代码依然存在只是添加了css样式来控制标签不去显示。 循环遍历(v-for) v-for: 这个指令是用来遍历的。需要循环那个标签v-for 指令就写在那个标签上。其语法格式如下
标签 v-for变量名 in 集合模型数据{{变量名}}
/标签有时遍历时需要使用索引那么v-for指令遍历的语法格式如下
标签 v-for(变量名,索引变量) in 集合模型数据!--索引变量是从0开始所以要表示序号的话需要手动的加1--{{索引变量 1}} {{变量名}}
/标签!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue常用指令--for/title!-- 1、引入 Vue --script srcJS/vue.js/script
/headbody!-- 3、视图层 --div idappdiv v-foraddr in addrs{{addr}}/divbrdiv v-for(addr,index) in addrs{{index1}}:{{addr}}/div/div/body!-- 2、创建Vue核心对象 --
script// 定义Vue对象new Vue({el:#app, //Vue接管区域data:{addrs:[北京,上海,西安,成都,重庆]},methods:{}})
/script/html案例分析 将数据以表格的形式展示到页面上其中性别需要转换成中文男女等级需要将分数数值转换成对应的等级。
代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue常用指令案例/title!-- 1、引入 Vue --script srcJS/vue.js/script
/headbody!-- 3、视图层 --div idapp!-- 创建表格 --table border1cellspacing0width60%!-- 表头 --trth编号/thth姓名/thth年龄/thth性别/thth成绩/thth等级/th/tr!-- 表单 --tr aligncenter v-for(users,index) in userstd{{index1}}/tdtd{{users.name}}/tdtd{{users.age}}/tdtdspan v-ifusers.gender1男/spanspan v-ifusers.gender2女/span/tdtd{{users.score}}/tdtdspan v-ifusers.score85优秀/spanspan v-else-ifusers.score60及格/spanspan stylecolor:red; v-else不及格/span/td/tr/div/body!-- 2、创建Vue核心对象 --
script// 定义Vue对象new Vue({el:#app, //Vue接管区域data:{users:[{name:Tom,age:20,gender:1,score:78},{name:Rose,age:18,gender:2,score:86},{name:Jerry,age:26,gender:1,score:90},{name:Tony,age:30,gender:1,score:52}],methods:{}}})
/script/htmlVue生命周期 vue的生命周期指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法。其完整的生命周期如下表所示
状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后 下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数 其中我们需要重点关注的是mounted,其他的我们了解即可。mounted:挂载完成Vue初始化成功HTML页面渲染成功。发送请求到服务端加载数据
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlemounted/titlescript srcjs/vue.js/script
/headbodydiv idapp/div
/bodyscript//定义Vue对象new Vue({el: #app, //vue接管区域data:{ },methods(){},mounted(){alert(Vue挂载完成发送请求到服务端)}})
/script/htmlAjax
Ajax概述 如下图所示的表格中的学生信息应该来自于后台。后台和前端是互不影响的2个程序前端应该如何从后台获取数据呢因为是2个程序所以必须涉及到2个程序的交互所以这就需要用到Ajax技术。 Ajax: 全称Asynchronous JavaScript And XML异步的JavaScript和XML。其作用有如下2点1、与服务器进行数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。2、异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。Ajax作用
与服务器进行数据交互 如下图所示前端资源被浏览器解析但是前端页面上缺少数据前端可以通过Ajax技术向后台服务器发起请求后台服务器接受到前端的请求从数据库中获取前端需要的资源然后响应给前端前端再通过 vue技术可以将数据展示到页面上这样用户就能看到完整的页面了。
异步交互 异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。如下图所示当在百度搜索java时下面的联想数据是通过Ajax请求从后台服务器得到的在整个过程中Ajax请求不会导致整个百度页面的重新加载并且只针对搜索栏这局部模块的数据进行了数据的更新不会对整个页面的其他地方进行数据的更新这样就大大提升了页面的加载速度用户体验高。 同步与异步的区别 同步请求发送过程如下图浏览器页面在发送请求给服务器在服务器处理请求的过程中浏览器页面不能做其他的操作。只能等到服务器响应结束后才能浏览器页面才能继续做其他的操作。 异步请求发送过程如上图浏览器页面发送请求给服务器在服务器处理请求的过程中浏览器页面还可以做其他的操作。
原生Ajax
客户端的Ajax请求代码如下有如下4步第一步首先Ajax-原生方式.html的文件主要是按钮绑定单击事件点击按钮来发送ajax请求第二步创建XMLHttpRequest对象用于和服务器交换数据也是原生Ajax请求的核心对象提供了各种方法。第三步调用对象的open()方法设置请求的参数信息例如请求地址请求方式。然后调用send()方法向服务器发送请求第四步通过绑定事件的方式来获取服务器响应的数据。完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title原生Ajax/title
/headbodyinput typebutton value获取数据 onclickgetData()div iddiv1/div/bodyscriptfunction getData(){//1. 创建XMLHttpRequestvar xmlHttpRequest new XMLHttpRequest();//2. 发送异步请求xmlHttpRequest.open(GET,https://mock.apifox.cn/m1/3128855-0-default/emp/list);xmlHttpRequest.send();//发送请求//3. 获取服务响应数据xmlHttpRequest.onreadystatechange function(){//此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应 200表示这是一个正确的Http请求没有错误if(xmlHttpRequest.readyState 4 xmlHttpRequest.status 200){document.getElementById(div1).innerHTML xmlHttpRequest.responseText;}}}
/script
/htmlAxios 在原生的 Ajax 请求的代码编写起来比较繁琐的有没有更加简单的发送Ajax请求的技术Axios是对原生的AJAX进行封装简化书写。Axios对原生的Ajax进行了封装简化书写快速开发。
Axios的基本使用
Axios入门1、引入Axios的JS文件script srcjs/axios-0.18.0.js/script2、使用Axios发送请求并获取响应结果。官方提供的api很多此处给出2种如下发送 get 请求axios({method:get,url:https://mock.apifox.cn/m1/3128855-0-default/emp/list}).then(function (resp){alert(resp.data);})发送 post 请求axios({method:post,url:https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById,data:usernamezhangsan}).then(function (resp){alert(resp.data);});axios()是用来发送异步请求的小括号中使用 js 的JSON对象传递请求相关的参数 method属性用来设置请求方式的。取值为 get 或者 post。 url属性用来书写请求的资源路径。如果是 get 请求需要将请求参数拼接到路径的后面格式为 url?参数名参数值参数名2参数值2。 data属性作为请求体被发送的数据。也就是说如果是 post 请求的话数据需要作为 data 属性的值。 then() 需要传递一个匿名函数。将 then()中传递的匿名函数称为 回调函数意思是该匿名函数在发送请求时不会被调用而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象通过 resp.data 可以获取到响应的数据。
Axios快速入门 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/titlescript srcjs/axios-0.18.0.js/script
/head
bodyinput typebutton value获取数据GET onclickget()input typebutton value删除数据POST onclickpost()/body
scriptfunction get(){//通过axios发送异步请求-getaxios({method: get,url: https://mock.apifox.cn/m1/3128855-0-default/emp/list}).then(result {console.log(result.data);})}function post(){//通过axios发送异步请求-postaxios({method: post,url: https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById,data: id1}).then(result {console.log(result.data);}) }
/script
/html为了简化书写Axios设计了请求方式别名 axios.get(url [,config])axios.delete(url [,config])axios.post(url [,data[,config]])axios.put(url [,data[,config]])!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/titlescript srcjs/axios-0.18.0.js/script
/head
bodyinput typebutton value获取数据GET onclickget()input typebutton value删除数据POST onclickpost()/body
scriptfunction get(){//通过axios发送异步请求-get axios.get(https://mock.apifox.cn/m1/3128855-0-default/emp/list).then(result {console.log(result.data);})}function post(){//通过axios发送异步请求-postaxios.post(https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById,id1).then(result {console.log(result.data);})}
/script
/html案例分析 前端首先是一张表格缺少数据而提供数据的地址已经有了意味需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢页面的数据应该是页面加载完成自动发送请求展示数据所以需要借助 vue 的 mounted 钩子函数。那么拿到数据了需要借助 v-for 指令来遍历数据展示数据。
步骤1. 首先提前准备基础代码包括表格以及vue.js和axios.js文件的引入2. 在vue的mounted钩子函数中发送ajax请求获取数据3. 拿到数据数据需要绑定给vue的data属性4. 在tr标签上通过v-for指令遍历数据展示数据完整的代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios-案例/titlescript srcjs/axios-0.18.0.js/scriptscript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth图像/thth性别/thth职位/thth入职日期/thth最后操作时间/th/trtr aligncenter v-for(emp,index) in empstd{{index 1}}/tdtd{{emp.name}}/tdtdimg :srcemp.image width70px height50px/tdtdspan v-ifemp.gender 1男/spanspan v-ifemp.gender 2女/span/tdtd{{emp.job}}/tdtd{{emp.entrydate}}/tdtd{{emp.updatetime}}/td/tr/table/div
/body
scriptnew Vue({el: #app,data: {emps:[]},mounted () {//发送异步请求,加载数据axios.get(https://mock.apifox.cn/m1/3128855-0-default/emp/list).then(result {// 将获取的数据赋值给data中的empsthis.emps result.data.data;})}});
/script
/html前后端分离开发 当前最为主流的开发模式前后端分离 基于前后台分离开发的模式下后台开发者开发一个功能的具体流程如下图所示
1. 需求分析首先需要阅读需求文档分析需求理解需求。
2. 接口定义查询接口文档中关于需求的接口的定义包括地址参数响应数据类型等等
3. 前后台并行开发各自按照接口文档进行开发实现需求
4. 测试前后台开发完了各自按照接口文档进行测试
5. 前后段联调测试前段工程请求后端工程测试功能YAPI YApi 是高效、易用、功能强大的 api 管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。
YApi主要提供了2个功能API接口管理根据需求撰写接口包括接口的地址参数响应等等信息。Mock服务模拟真实接口生成接口的模拟测试数据用于前端的测试。接口文档管理 登录后在个人空间中选择项目列表-添加测试项目效果如图所示 然后点击创建的项目进入到项目中紧接着先添加接口的分类如下图所示 然后选择当前创建的分类创建接口信息如下图所示 在接口的编辑界面对接口做生层次的定制例如接口的参数接口的返回值等等 效果图下图所示 添加接口的请求参数如下图所示 保存上述设置就可以来到接口的预览界面查询接口的信息其效果如下图所示 到接口的Mock设置窗口如下图所示 在接口的预览界面直接点击Mock地址如下图所示 用浏览器直接打开并返回如下数据
前端工程化 在之前的前端开发中当需要使用一些资源时例如vue.js和axios.js文件都是直接在工程中导入的但是上述开发模式存在如下问题
每次开发都是从零开始比较麻烦
多个页面中的组件共用性不好
js、图片等资源没有规范化的存储目录没有统一的标准不方便维护所以企业开发中更加讲究前端工程化方式的开发主要包括如下4个特点
模块化将js和css等做成一个个可复用模块
组件化我们将UI组件css样式js行为封装成一个个的组件便于管理
规范化我们提供一套标准的规范的目录接口和编码规范所有开发人员遵循这套规范
自动化项目的构建测试部署全部都是自动完成前端工程化是指在企业级的前端项目开发中把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
Vue脚手架 Vue-cli是Vue官方提供的一个脚手架用于快速生成一个Vue的项目模板。
Vue-cli提供了如下功能统一的目录结构本地调试热部署单元测试集成打包上线
依赖环境NodeJSVue项目创建
Vue项目-创建方式有两种命令行vue create 项目名称图形化界面vue uiVue项目创建图形化界面 首先创建一个vue文件夹然后双击进入文件夹来到地址目录输入cmd然后进入到 vue 文件夹的 cmd 窗口界面如下图所示 在终端输入命令 vue ui 进入到vue的图形化界面 选择创建按钮在vue文件夹下创建项目如下图所示 进行vue项目的创建 然后预设模板选择手动如下图所示 然后在功能页面开启路由功能如下图所示 在配置页面选择语言版本和语法检查规范如下图所示 最后只需要等待片刻即可进入到创建创建成功的界面到此vue项目创建结束。
Vue项目-目录结构 基于Vue脚手架创建出来的工程有标准的目录结构如下
Vue项目-启动 . 第一种方式通过VS Code提供的图形化界面 最终浏览器打开后呈现如下界面表示项目运行成功 对于8080端口经常被占用所以可以去修改默认的8080端口。修改vue.config.js文件的内容添加如下代码
devServer:{port:7000
}端口更改成功可以通过浏览器访问7000端口来访问之前的项目.
第二种方式命令行方式 直接基于cmd命令窗口在vue目录下执行输入命令 npm run serve 即可如下图所示 Vue项目开发流程 新建的Vue项目访问的首页是index.htmlindex.html的代码很简洁但是浏览器所呈现的index.html内容却很丰富代码和内容不匹配这是因为对于vue项目index.html文件默认是引入了入口函数main.js文件。 vue 创建的 dom 对象挂在到 idapp 的标签区域。注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分
template: 模板部分主要是HTML代码用来展示页面主体结构的
script: js代码区域主要是通过js代码来控制模板的数据来源和行为的
style: css样式部分主要通过css样式控制模板的页面效果得如下图所示就是一个vue组件的小案例 打开App.vue 以发现 App.vue 组件的 template 部分内容和我们浏览器访问的首页内容是一致的如下图所示
Element组件 Element:是饿了么团队研发的一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。Element 提供了很多组件组成网页的部件供开发者使用。例如 超链接、按钮、图片、表格等等。 组件组成网页的部件例如超链接、按钮、图片、表格、表单、分页条等等。 对于ElementUI作为一个后台开发只需要学会如何从ElementUI的官网拷贝组件到自己的页面中并且做一些修改即可。
快速入门 首先在当前工程的目录下安装ElementUI的组件库在命令行输入如下命令
npm install element-ui2.15.3然后需要在 main.js 这个入口 js 文件中引入 ElementUI 的组件库其代码如下
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);然后需要按照vue项目的开发规范在src/views目录下创建一个vue组件文件注意组件名称后缀是.vue并且在组件文件中编写之前介绍过的基本组件语法代码如下
template
/templatescript
export default {
}
/scriptstyle
/style最后只需要去ElementUI的官网找到组件库抄写代码即可。Button 按钮为例 复制组件代码到vue组件文件中操作如下图所示 最后在默认访问的根组件src/App.vue中引入自定义的组件具体操作步骤如下 templatediv idapp!-- {{message}} --element-view/element-view/div
/templatescript
import ElementView from /src/views/element/ElementView.vue
export default {components: { ElementView },data(){return {message:hello world}}
}
/scriptstyle/style
Table表格 Table 表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。 首先需要到ElementUI的组件库中找到表格组件然后复制代码到ElementVue.vue组件中需要注意的是如果官方有除了template部分之外还有其他部分则需要将其他部分都复制。具体操作如下图所示
template模板部分
script脚本部分
组件属性详解 ElementUI 主要通过如下几个属性将数据模型绑定到视图的。
data: 主要定义table组件的数据模型
prop: 定义列的数据应该绑定data中定义的具体的数据模型
label: 定义列的标题
width: 定义列的宽度Pagination分页
Pagination: 分页组件主要提供分页工具条相关功能。 对于分页组件需要关注的是如下几个重要属性可以通过查阅官网组件中最下面的组件属性详细说明得到
background: 添加北京颜色也就是上图蓝色背景色效果。
layout: 分页工具条的布局其具体值包含 sizes , prev , pager , next , jumper , - , total , slot 这些值
total: 数据的总数量对于分页组件除了上述几个属性还有2个非常重要的事件需要去学习 size-change pageSize 改变时会触发current-change currentPage 改变时会触发找到对应的代码首先复制事件复制代码如下
size-changehandleSizeChange
current-changehandleCurrentChange此时Panigation组件的template完整代码如下
!-- Pagination分页 --
el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000
/el-pagination紧接着需要复制事件需要的2个函数其代码如下
methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}
}需要注意methods属性和data同级Panigation组件的script部分完整代码如下
script
export default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},data() { }
/scriptDialog对话框 Dialog: 在保留当前页面状态的情况下告知用户并承载相关操作。 ElementUI是通过如下的属性来实现对话框的显示与隐藏的。 visible.sync 是否显示 Dialog visible属性绑定的dialogTableVisble属性一开始默认是false所以对话框隐藏然后点击按钮触发事件修改属性值为true然后对话框visible属性值为true所以对话框呈现出来。
Form表单
Form 表单由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据。
综合案例
需求分析 需求说明 制作类似格式的页面 即上面是标题左侧栏是导航右侧是数据展示区域右侧需要展示搜索表单右侧表格数据是动态展示的数据来自于后台 思路分析 整个案例相对来说功能比较复杂需求较多所以需要先整体后局部细节。整个页面可以分为3个部分如下图所示 如上图拆分后思路就清晰了主要步骤如下 创建页面完成页面的整体布局规划然后分别针对3个部分进行各自组件的具体实现针对于右侧核心内容展示区域需要使用异步加载数据以表格渲染数据 代码实现
环境塔建 在views目录下创建 tlias/EmpView.vue这个vue组件并且编写组件的基本模板代码其效果如下图所示 需要注意的是默认访问的是App.vue这个组件App.vue整体代码如下
templatediv idapp!-- {{message}} --emp-view/emp-view/div
/templatescript
import EmpView from ./views/tlias/EmpView.vue
export default {components: { EmpView },data(){return {message:hello world}}
}
/scriptstyle/style
整体布局 到ElementUI的官网找到布局组件拷贝官方提供的代码直接粘贴到EmpView.vue组件的template模块中即可
template!-- 设置最外层容器高度为700px,在加上一个很细的边框 --el-container styleheight: 700px; border: 1px solid #eeeel-headerHeader/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-container/el-container/templatescript
export default{}/scriptstyle
/style顶部标题 需要修改顶部的文本内容并且提供背景色的css样式具体代码如下 el-header stylefont-size:40px;background-color: rgb(238, 241,246)tlias 智能学习辅助系统/el-header左侧导航栏 在布局组件中提供的案例找到左侧栏的案例官方提供的导航太多需要做删减在左侧导航栏中粘贴如下代码即可
el-aside width200pxel-menu :default-openeds[1, 3]el-submenu index1template slottitle系统信息管理/templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu /el-menu
/el-aside右侧核心内容
表格编写 首先完成表格的制作在官方直接找表格组件中找到表格的代码复制到布局容器的主题区域template模块代码如下
el-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column
/el-table表格是有数据模型的绑定的所以需要继续拷贝数据模型代码如下
data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}]}}得到的表格和数据并不是我们所需要的所以需要修改表格添加列并且修改列名。代码如下
el-table :datatableData
el-table-column propname label姓名 width180/el-table-column
el-table-column propimage label图像 width180/el-table-column
el-table-column propgender label性别 width140/el-table-column
el-table-column propjob label职位 width140/el-table-column
el-table-column propentrydate label入职日期 width180/el-table-column
el-table-column propupdatetime label最后操作时间 width230
/el-table-column
el-table-column label操作
el-button typeprimary sizemini编辑/el-button
el-button typedanger sizemini删除/el-button
/el-table-column
/el-table表单编写 在表格的上方还需要如下图所示的表单 在ElementUI官网在表单组件中找到与之类似的示例加以修改。
!-- 表单 --
el-form :inlinetrue :modelsearchForm classdemo-form-inlineel-form-item label姓名el-input v-modelsearchForm.name placeholder姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchForm.gender placeholder性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item el-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item
/el-form 既然表单使用 v-model 进行数据的双向绑定了所以需要在data中定义searchForm的数据模型代码如下
data() { return {tableData: [],searchForm:{name:,gender:}}
}而且表单的提交按钮绑定了onSubmit函数所以还需要在methods中定义onSubmit函数注意methods属性和data属性同级,代码如下
methods:{onSubmit:function(){console.log(this.searchForm);}
}还缺少一个时间所以可以从elementUI官网找到日期组件在表单中添加一个日期表单具体代码如下
el-form-item label入职日期el-date-pickerv-modelsearchForm.entrydatetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker
/el-form-item因为添加了双向绑定所以日期需要在data的searchForm中定义出来需要注意的是这个日期包含2个值所以我们定义为数组代码如下
data() { return {tableData: [],searchForm:{name:,gender:,entrydate:[]}}
}此时完整代码如下所示
template!-- 设置最外层容器高度为700px,在加上一个很细的边框 --
el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241,246)tlias 智能学习辅助系统/el-headerel-containerel-aside width200pxel-menu :default-openeds[1, 3]el-submenu index1template slottitle系统信息管理/templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu/el-menu/el-asideel-main!-- 表单 --el-form :inlinetrue :modelsearchForm classdemo-form-inlineel-form-item label姓名el-input v-modelsearchForm.name placeholder姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchForm.gender placeholder性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-itemel-form-item label入职日期el-date-pickerv-modelsearchForm.entrydatetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form el-table :datatableDatael-table-column propname label姓名 width180/el-table-columnel-table-column propimage label图像 width180/el-table-columnel-table-column propgender label性别 width140/el-table-columnel-table-column propjob label职位 width140/el-table-columnel-table-column propentrydate label入职日期 width180/el-table-columnel-table-column propupdatetime label最后操作时间 width230/el-table-columnel-table-column label操作 el-button typeprimary sizemini编辑/el-buttonel-button typedanger sizemini删除/el-button/el-table-column/el-table/el-main/el-container/el-container/templatescript
export default{data() { return {tableData: [],searchForm:{name:,gender:,entrydate:[]}}},methods:{onSubmit:function(){console.log(this.searchForm);} }
}
/scriptstyle
/style分页工具栏 在ElementUI官网在分页组件中找到与之类似的示例加以修改。
!-- Pagination分页 --
el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000
/el-pagination同时methods中需要声明2个函数代码如下
handleSizeChange(val) {console.log(每页 ${val} 条);
},
handleCurrentChange(val) {console.log(当前页: ${val});
}异步数据加载
异步加载数据 对于案例数据的mock地址https://mock.apifox.cn/m1/3128855-0-default/emp/list。我们最后要做的就是异步加载数据所以需要使用axios发送ajax请求。在vue项目中对于axios的使用分为如下2步 安装axios: npm install axios需要使用axios时导入axios: import axios from ‘axios’; 接下来到项目的执行终端然后输入命令安装axios具体操作如下图所示 然后重启项目在EmpView.vue组件页面的script标签中通过import命令导入axios代码如下
import axios from axios;emsp什么时候发送axios请求呢页面加载完成自动加载所以使用mounted钩子函 数将得到的员工数据要展示到表格所以数据需要赋值给数据模型tableData编写如下代码
mounted(){axios.get(https://mock.apifox.cn/m1/3128855-0-default/emp/list).then(resp{this.tableDataresp.data.data; //响应数据赋值给数据模型});
}此时浏览器打开发现性别和图片的内容显示不正确需要修复 性别内容展示修复 在ElementUI提供的表格组件找到如下示例 比效果和功能实现代码发现其中涉及2个非常重要的点
template : 用于自定义列的内容slot-scope: 通过属性的row获取当前行的数据通过上述的标签自定义列的内容修改性别列的内容代码如下
el-table-column propgender label性别 width140template slot-scopescope{{scope.row.gender1?男:女}}/template
/el-table-column图片内容展示修复 图片内容的修复和性别内容展示修复一致需要借助 template标签自定义列的内容需要需要展示图片直接借助标签即可并且需要设置图片的宽度和高度所以直接修改图片列的代码如下
el-table-column propimage label图像 width180template slot-scopescopeimg :srcscope.row.image width100px height70px/template
/el-table-column完整代码
template!-- 设置最外层容器高度为700px,在加上一个很细的边框 --
el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241,246)tlias 智能学习辅助系统/el-headerel-containerel-aside width 230px style border: 1px solid #eeeel-menu :default-openeds[1, 3]el-submenu index1template slottitle系统信息管理/templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu/el-menu/el-asideel-main!-- 表单 --el-form :inlinetrue :modelsearchForm classdemo-form-inlineel-form-item label姓名el-input v-modelsearchForm.name placeholder姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchForm.gender placeholder性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-itemel-form-item label入职日期el-date-pickerv-modelsearchForm.entrydatetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form !-- 表格 --el-table :datatableDatael-table-column propname label姓名 width180/el-table-columnel-table-column propimage label图像 width180template slot-scopescopeimg :srcscope.row.image width100px height70px/template/el-table-columnel-table-column propgender label性别 width140template slot-scopescope{{scope.row.gender1?男:女}}/template/el-table-columnel-table-column propjob label职位 width140/el-table-columnel-table-column propentrydate label入职日期 width180/el-table-columnel-table-column propupdatetime label最后操作时间 width230/el-table-columnel-table-column label操作 el-button typeprimary sizemini编辑/el-buttonel-button typedanger sizemini删除/el-button/el-table-column/el-table!-- Pagination分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000/el-pagination/el-main/el-container/el-container/templatescriptimport axios from axios;export default{data() { return {tableData: [],searchForm:{name:,gender:,entrydate:[]}}},methods:{onSubmit:function(){console.log(this.searchForm);},handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});} },mounted(){axios.get(https://mock.apifox.cn/m1/3128855-0-default/emp/list).then(resp{this.tableDataresp.data.data; //响应数据赋值给数据模型});}}
/scriptstyle
/styleVue路由
路由介绍 基于4.4案例中的功能实现点击侧边栏的部门管理显示部门管理的信息点击员工管理显示员工管理的信息效果如下图所示 这就需要借助vue的路由功能。前端路由URL中的 hash(#号之后的内容与组件之间的对应关系如下图所示 当点击左侧导航栏时浏览器的地址栏会发生变化路由自动更新显示与url所对应的vue组件。
vue官方提供了路由插件Vue Router,其主要组成如下VueRouter路由器类根据路由请求在路由视图中动态渲染选中的组件router-link请求链接组件浏览器会解析成arouter-view动态视图组件用来渲染展示与路由路径对应的组件其工作原理如下图所示 首先VueRouter根据配置的 url 的 hash 片段和路由的组件关系去维护一张路由表 然后页面提供一个 router-link 组件用户点击发出路由请求; 接着VueRouter 根据路由请求在路由表中找到对应的vue组件 最后VueRouter 会切换 router-view 中的组件从而进行视图的更新
路由功能演示 首先需要先安装vue-router插件在终端通过如下命令 npm install vue-router3.5.1 但是在此不需要安装因为在创建项目时已经勾选了路由功能已经安装好了。然后需要在 src/router/index.js 文件中定义路由表根据其提供的模板代码进行修改注意需要去掉没有引用的import模块。最终代码如下
import Vue from vue
import VueRouter from vue-routerVue.use(VueRouter)const routes [{path: /emp, //地址hashname: emp,component: () import(../views/tlias/EmpView.vue) //对应的vue组件},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)}
]const router new VueRouter({routes
})export default router
在main.js中已经引入了router功能如下图所示 路由基本信息配置好了路由表已经被加载此时还缺少2个东西就是 router-lin和 router-view所以需要修改2个页面EmpView.vue和DeptView.vue左侧栏的2个按钮为router-link,其代码如下
el-menu-item index1-1router-link to/dept部门管理/router-link
/el-menu-item
el-menu-item index1-2router-link to/emp员工管理/router-link
/el-menu-item然后还需要在内容展示区域即App.vue中定义route-view作为组件的切换其App.vue的完整代码如下
templatediv idapp!-- {{message}} --router-view/router-view/div
/templatescriptexport default {components: { },data(){return {message:hello world}}
}
/scriptstyle/style
但是发放浏览器打开地址一片空白因为默认的路由路径是/路由配置中没有对应的关系所以需要在路由配置中/对应的路由组件代码如下
import Vue from vue
import VueRouter from vue-routerVue.use(VueRouter)const routes [{path: /emp, //地址hashname: emp,component: () import(../views/tlias/EmpView.vue) //对应的vue组件},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)},{path: /,redirect:/emp //表示重定向到/emp即可}
]const router new VueRouter({routes
})export default router
Nginx部署前端 前端工程开发好了如何发布呢主要分为2步 前端工程打包通过nginx服务器发布前端工程 前端工程打包 对前端工程进行打包直接通过VS Code的 NPM脚本中提供的 build 按钮来完成如下图所示直接点击即可 然后会在工程目录下生成一个 dist 目录用于存放需要发布的前端资源如下图所示
部署前端工程
nginx介绍 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。 niginx在windows中的安装是比较方便的直接解压即可。直接将 nginx-.22.0.zip 压缩文件拷贝到无中文的目录下直接解压即可如下图所示就是nginx的解压目录以及目录结构说明 前端部署 将打包的前端工程 dist 目录下的内容拷贝到 nginx的html 目录下如下图所示 然后通过双击nginx下得nginx.exe文件来启动nginx如下图所示 nginx服务器的端口号是80所以启动成功之后浏览器直接访问 http://localhost:80 即 可其中80端口可以省略其浏览器展示效果如图所示 到此我们的前端工程发布成功。
修改端口 如果80端口被占用需要通过conf/nginx.conf配置文件来修改端口号。如下图所示
