网站怎么做订单,网络方案分析,网站怎么做子网页,网络营销软件网站文章目录 VUE1、概述2、快速入门3、Vue 指令4、生命周期5、案例 Elemant1、快速入门2、Element 布局3、常用组件-案例 VUE
1、概述
Vue 是一套前端框架#xff0c;免除原生JavaScript中的DOM操作#xff0c;简化书写基于MVVM(Model-View-ViewModel)思想#xff0c;实现数据… 文章目录 VUE1、概述2、快速入门3、Vue 指令4、生命周期5、案例 Elemant1、快速入门2、Element 布局3、常用组件-案例 VUE
1、概述
Vue 是一套前端框架免除原生JavaScript中的DOM操作简化书写基于MVVM(Model-View-ViewModel)思想实现数据的双向绑定将编程的关注点放在数据上 Model 和 View 是通过 ViewModel 对象进行双向绑定的
2、快速入门 新建 HTML 页面引入 Vue.js文件 script srcjs/vue.js/script 在JS代码区域创建Vue核心对象进行数据绑定 new Vue({el: #app,data() {return {username: }}
});创建 Vue 对象时需要传递一个 js 对象而该对象中需要如下属性 el 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值data 用来定义数据模型methods 用来定义函数 编写视图 div idappinput nameusername v-modelusername {{username}}
/div{{}} 是 Vue 中定义的 插值表达式 在里面写数据模型到时候会将该模型的数据值展示在这个位置
3、Vue 指令 指令HTML 标签上带有 v- 前缀的特殊属性不同指令具有不同含义。例如v-ifv-for… 常用的指令有 !--1v-bind--
a v-bind:hrefurl百度一下/a
!--v-bind 可以省略--
a :hrefurl百度一下/a!--2v-model--
input nameusername v-modelusername!--3v-on--
input typebutton value一个按钮 v-on:clickshow()
input typebutton value一个按钮 clickshow()
new Vue({el: #app,methods: {show(){alert(我被点了);}}
});
!--v-on: 后面的事件名称是之前原生事件属性名去掉on* 单击事件 事件属性名是 onclick而在vue中使用是 v-on:click* 失去焦点事件事件属性名是 onblur而在vue中使用时 v-on:blur
--!--4v-ifv-if 指令是条件不满足时根本就不会渲染
--
div idappdiv v-ifcount 3div1/divdiv v-else-ifcount 4div2/divdiv v-elsediv3/divhrinput v-modelcount
/div!--5v-show
v-show 不展示的原理是给对应的标签添加 display css属性并将该属性值设置为 none
--
div v-showcount 3div v-show/div
br
input v-modelcount!--5v-for--
标签 v-for变量名 in 集合模型数据{{变量名}}
/标签
标签 v-for(变量名,索引变量) in 集合模型数据!--索引变量是从0开始所以要表示序号的话需要手动的加1--{{索引变量 1}} {{变量名}}
/标签4、生命周期
生命周期的八个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法。 mounted挂载完成Vue初始化成功HTML页面渲染成功
5、案例
前端代码的关键点在于使用 v-model 指令给标签项绑定模型数据利用双向绑定特性在发送异步请求时提交数据 需求使用 Vue 对前端代码进行优化 查询所有功能 在 brand.html 页面引入 vue 的js文件创建 Vue 对象 在 Vue 对象中定义模型数据在钩子函数中发送异步请求并将响应的数据赋值给数据模型 new Vue({el: #app,data(){return{brands:[]}},mounted(){// 页面加载完成后发送异步请求查询数据var _this this;axios({method:get,url:http://localhost:8080/brand-demo/selectAllServlet}).then(function (resp) {_this.brands resp.data;})}
})修改视图 定义 div idapp/div 指定该 div 标签受 Vue 管理将 body 标签中所有的内容拷贝作为上面 div 标签中删除表格的多余数据行只留下一个在表格中的数据行上使用 v-for 指令遍历 tr v-for(brand,i) in brands aligncentertd{{i 1}}/tdtd{{brand.brandName}}/tdtd{{brand.companyName}}/tdtd{{brand.ordered}}/tdtd{{brand.description}}/tdtd{{brand.statusStr}}/tdtda href#修改/a a href#删除/a/td
/tr添加功能 在 addBrand.html 页面引入 vue 的js文件 创建 Vue 对象 new Vue({el: #app,data(){return {brand:{}}},methods:{submitForm(){// 发送ajax请求添加var _this this;axios({method:post,url:http://localhost:8080/brand-demo/addServlet,data:_this.brand}).then(function (resp) {// 判断响应数据是否为 successif(resp.data success){location.href http://localhost:8080/brand-demo/brand.html;}})}}
})修改视图 div idapph3添加品牌/h3form action methodpost品牌名称input idbrandName v-modelbrand.brandName namebrandNamebr企业名称input idcompanyName v-modelbrand.companyName namecompanyNamebr排序input idordered v-modelbrand.ordered nameorderedbr描述信息textarea rows5 cols20 iddescription v-modelbrand.description namedescription/textareabr状态input typeradio namestatus v-modelbrand.status value0禁用input typeradio namestatus v-modelbrand.status value1启用brinput typebutton idbtn clicksubmitForm value提交/form
/divElemant
1、快速入门
Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改官网网址https://element.eleme.cn/#/zh-CN快速入门 将资源 04-资料\02-element 下的 element-ui 文件夹直接拷贝到项目的 webapp 下。目录结构如下 创建页面并在页面引入Element 的css、js文件 和 Vue.js script srcvue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.css创建Vue核心对象 Element 是基于 Vue 的所以使用Element时必须要创建 Vue 对象 scriptnew Vue({el:#app})
/script官网复制Element组件代码 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappel-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger删除/el-button/el-rowel-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button/el-rowel-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button/el-rowel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button/el-row
/divscript srcjs/vue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscriptnew Vue({el:#app})
/script/body
/html2、Element 布局
Element 提供了两种布局方式分别是
Layout 布局Container 布局容器
Layout 局部 通过基础的 24 分栏迅速简便地创建布局。也就是默认将一行分为 24 栏根据页面要求给每一列设置所占的栏数 在左菜单栏找到 Layout 布局 然后找到自己喜欢的按钮样式点击 显示代码 在下面就会展示出对应的代码显示出的代码中有样式有html标签。将样式拷贝我们自己页面的 head 标签内将html标签拷贝到 div idapp/div 标签内
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}/style
/head
body
div idappel-rowel-col :span24div classgrid-content bg-purple-dark/div/el-col/el-rowel-rowel-col :span12div classgrid-content bg-purple/div/el-colel-col :span12div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span8div classgrid-content bg-purple/div/el-colel-col :span8div classgrid-content bg-purple-light/div/el-colel-col :span8div classgrid-content bg-purple/div/el-col/el-rowel-rowel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-col/el-row
/div
script srcjs/vue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscriptnew Vue({el:#app})
/script
/body
/htmlContainer 布局容器 该效果代码中包含了样式、页面标签、模型数据。将里面的样式 style 拷贝到我们自己页面的 head 标签中将html标签拷贝到 div idapp/div 标签中再将数据模型拷贝到 vue 对象的 data() 中
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}/style
/head
body
div idappel-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-submenu index2-1template slottitle选项1/templateel-menu-item index2-1-1选项1-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspan王小虎/span/el-headerel-mainel-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/el-main/el-container/el-container
/div
script srcjs/vue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscriptnew Vue({el:#app,data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(20).fill(item)}}})
/script
/body
/html3、常用组件-案例 准备基本页面
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idapp/divscript srcjs/vue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscriptnew Vue({el: #app})
/script
/body
/html完成表格展示 使用 Element 整体的思路就是 拷贝 修改 拷贝 在左菜单栏找到 Table 表格并点击右边主体就会定位到表格这一块找到我们需要的表格效果如上图点击 显示代码 就可以看到这个表格的代码了。 1将html标签拷贝到 div idapp/div 中 2将css样式拷贝到我们页面的 head 标签中 3将方法和模型数据拷贝到 Vue 对象指定的位置 拷贝完成后通过浏览器打开可以看到表格的效果但是显示的表头和数据并不是我们想要的所以接下来就需要对页面代码进行修改了 修改 修改表头和数据 给表格添加操作列 给表格添加复选框列和标号列 完成搜索表单展示 完成批量删除和新增按钮展示 完成对话框展示 完成分页条展示 完整页面代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}/style
/head
body
div idapp!--搜索表单--el-form :inlinetrue :modelbrand classdemo-form-inlineel-form-item label当前状态el-select v-modelbrand.status placeholder当前状态el-option label启用 value1/el-optionel-option label禁用 value0/el-option/el-select/el-form-itemel-form-item label企业名称el-input v-modelbrand.companyName placeholder企业名称/el-input/el-form-itemel-form-item label品牌名称el-input v-modelbrand.brandName placeholder品牌名称/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form!--按钮--el-rowel-button typedanger plain批量删除/el-buttonel-button typeprimary plain clickdialogVisible true新增/el-button/el-row!--添加数据对话框表单--el-dialogtitle编辑品牌:visible.syncdialogVisiblewidth30%el-form refform :modelbrand label-width80pxel-form-item label品牌名称el-input v-modelbrand.brandName/el-input/el-form-itemel-form-item label企业名称el-input v-modelbrand.companyName/el-input/el-form-itemel-form-item label排序el-input v-modelbrand.ordered/el-input/el-form-itemel-form-item label备注el-input typetextarea v-modelbrand.description/el-input/el-form-itemel-form-item label状态el-switch v-modelbrand.statusactive-value1inactive-value0/el-switch/el-form-itemel-form-itemel-button typeprimary clickaddBrand提交/el-buttonel-button clickdialogVisible false取消/el-button/el-form-item/el-form/el-dialog!--表格--templateel-table:datatableDatastylewidth: 100%:row-class-nametableRowClassNameselection-changehandleSelectionChangeel-table-columntypeselectionwidth55/el-table-columnel-table-columntypeindexwidth50/el-table-columnel-table-columnpropbrandNamelabel品牌名称aligncenter/el-table-columnel-table-columnpropcompanyNamelabel企业名称aligncenter/el-table-columnel-table-columnproporderedaligncenterlabel排序/el-table-columnel-table-columnpropstatusaligncenterlabel当前状态/el-table-columnel-table-columnaligncenterlabel操作el-rowel-button typeprimary修改/el-buttonel-button typedanger删除/el-button/el-row/el-table-column/el-table/template!--分页工具条--el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 15, 20]:page-size5layouttotal, sizes, prev, pager, next, jumper:total400/el-pagination/div
script srcjs/vue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.css
scriptnew Vue({el: #app,methods: {tableRowClassName({row, rowIndex}) {if (rowIndex 1) {return warning-row;} else if (rowIndex 3) {return success-row;}return ;},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection val;console.log(this.multipleSelection)},// 查询方法onSubmit() {console.log(this.brand);},// 添加数据addBrand(){console.log(this.brand);},//分页handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},data() {return {// 当前页码currentPage: 4,// 添加数据对话框是否展示的标记dialogVisible: false,// 品牌模型数据brand: {status: ,brandName: ,companyName: ,id:,ordered:,description:},// 复选框选中数据集合multipleSelection: [],// 表格数据tableData: [{brandName: 华为,companyName: 华为科技有限公司,ordered: 100,status: 1}, {brandName: 华为,companyName: 华为科技有限公司,ordered: 100,status: 1}, {brandName: 华为,companyName: 华为科技有限公司,ordered: 100,status: 1}, {brandName: 华为,companyName: 华为科技有限公司,ordered: 100,status: 1}]}}})
/script
/body
/html
