24手表网站,怎么做网址导航网站,wordpress 侧边栏左边,高端的网站推广1.【熟悉】Vue简介
1.1 简介 它是一个构建用户界面的框架 Vue是一个前端框架 js jq
https://www.pmdaniu.com/#file UI网站
UI 一般开发者使用蓝湖 工具 看着UI图 写接口
https://lanhuapp.com/web/#/item
是一个轻量级的MVVM#xff08;Model-View-ViewModel#xff0…1.【熟悉】Vue简介
1.1 简介 它是一个构建用户界面的框架 Vue是一个前端框架 js jq
https://www.pmdaniu.com/#file UI网站
UI 一般开发者使用蓝湖 工具 看着UI图 写接口
https://lanhuapp.com/web/#/item
是一个轻量级的MVVMModel-View-ViewModel其实就是所谓的数据的双向绑定
Mvc
数据驱动和组件化的前端开发
通过简单的API就能实现响应式的数据绑定和组合的视图组件
指令
用来扩展html标签的功能
https://cn.vuejs.org/
给页面的id”app”的DIV里面插入某此HTML代码
JS— document.getElementById(‘app’).innerHtml””
JQ— $(“#app”).text()
1.2 其它 简单、易学、更轻量
指令v-xxx开头 v-if v-for 这些作用在html标签中
HTML JSON数据
开发者 尤雨溪 华人 Vue React
这几个框架都不兼容低版本IE window Xp
2.【重点】MVVM的思想
2.1 MVVM 设计思想 MVC
|–M Model domain,service,serviceimpl.utils.pojo.mapper
实体类
Entity Domain pojo —指数据库里面的表的映射对象
Vo view object 后端构造数据对象转给前端的对象
DeptDto/DeptForm 数据传输对象 接收前端传过来的数据
|–V view thymeleaf jsp html
|–C controller 接收前端请求(控制器) /Servlet
Model对应数据层的域模型它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在模型层间关系里它主要用于抽象出 ViewModel 中视图的 Model。个人理解后端提供API后端服务架构是 控制器数据模型 或者 纯控制器。
ViewView是作为视图模板用于定义结构、布局。它自己不处理数据只是将ViewModel中的数据展现出来。此外为了和ViewModel产生关联那么还需要做的就是数据绑定的声明指令的声明事件绑定的声明。ViewModel和View之间是双向绑定意思就是说ViewModel的变化能够反映到View中View的变化也能够改变ViewModel的数据值。
ViewModelViewModel起着连接View和Model的作用同时用于处理View中的逻辑。在MVC框架中视图模型通过调用模型中的方法与模型进行交互然而在MVVM中View和Model并没有直接的关系在MVVM中ViewModel从Model获取数据然后应用到View中。个人理解Web前端的webserver对View进行双向绑定渲染。
整个MVVM实际上实现了前后端分离通过api来实现前后端交互前端通过纯js或者双向绑定框架来渲染页面。
前后端不分离crm页面写在crm项目里面 html thymeleaf模板引擎
前后端分离
大概如
数据库MySQL、PostgreSQL—双向交互—apiphp、java、Python、node—双向交互—ajax/fetch/websocketnode服务、jQ、js—双向绑定—html标签、css。
MVVM有利于项目分工和升级所谓对前后端分离。但也有缺点就是不利于 。
MVC服务端来渲染数据老旧模式。MC属于纯后端V属于前端js权重不高有利于SEO。
万物基于api一套api可以针对小程序、app、前端为何不首先使用。需要SEO对部分单独分离出项目采用MVC渲染静态页面或者纯html即可。
2.2 MVVM图例解析
3.【掌握】IDEA开发环境的配置
3.1 安装插件
3.2 创建前端项目
4.【掌握】安装和部署
https://cn.vuejs.org/v2/guide/installation.html
4.1 直接下载并用
在开发环境下不要使用压缩版本不然你就失去了所有常见错误相关的警告!
开发版本包含完整的警告和调试模式
https://cn.vuejs.org/v2/guide/installation.html
4.2 CDN 对于制作原型或学习你可以这样使用最新版本
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script对于生产环境我们推荐链接到一个明确的版本号和构建文件以避免新版本造成的不可预期的破坏
script srchttps://cdn.jsdelivr.net/npm/vue2.6.11/script4.3 NPM【后面讲】 在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
最新稳定版
$ npm install vue
4.4 导入js到项目里面
4.5 第一个Vue应用HelloWorld 1.idea下载插件 因为下了插件有提示Vue.js
!DOCTYPE html
html langen
headmeta charsetUTF-8titlehelloVue/title
/head
body!--声明一个页面容器--div idapp用户名:{{username}} br性别:span v-textsex/spanbr性别:span v-textsex男?汉子:妹子/spanbr备注:{{remark}}br备注:span v-htmlremark/spaninput typebutton value点我 clickclickMe(1) /div
/body
script src../js/vue.js/scriptscript//创建一个Vue实例let vuenew Vue({//指定个vue实例和页面的哪个容器关联el: #app,data:{username:小明,age:22,sex:男,remark:font colorred一个牛B的男人/font},methods:{// clickMe(id){// alert(id)// }clickMe:function (id) {alert(id)}}})/script
/html
5.【掌握】v-text,v-html,v-pre,v-once指令
Js — innerText innerHtml
Jq — text() html()
Vue v-text v-html
5.1 概述 Vue.js 使用了基于 HTML 的模板语法允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML 所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统Vue 能够智能地计算出最少需要重新渲染多少组件并把 DOM 操作次数减到最少。
5.2 v-text v-text主要用来更新textContent可以等同于JS的innerText属性。 span v-textmsg/span这两者等价 span{{msg}}/span5.3 v-html 双大括号的方式会将数据解释为纯文本而非HTML。为了输出真正的HTML可以用v-html指令。它等同于JS的innerHtml属性。
或者jquery的$().html(aaa) div v-htmlrawHtml/div这个div的内容将会替换成属性值rawHtml直接作为HTML进行渲染。
5.4 v-pre v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
div idappspan v-pre{{message}}/span //这条语句不进行编译span{{message}}/span/div最终仅显示第二个span的内容
5.5 v-once v-once关联的实例只会渲染一次。之后的重新渲染实例极其所有的子节点将被视为静态内容跳过这可以用于优化更新性能。
span v-onceThis will never change:{{msg}}/span //单个元素div v-once//有子元素h1comment/h1p{{msg}}/p/div上面的例子中msg即使产生改变也不会重新渲染。
5.6 案例
!DOCTYPE html
html langen
headmeta charsetUTF-8title02基本指令.html/title
/head
body!--声明一个页面容器--div idapph1 v-text js里面innerText/h1用户名:{{username}} br用户名:span v-textusername/span br备注:{{remark}} br备注:span v-textremark/span br年龄:span v-textage60?老年:青年/span br年龄:{{age60?老年:青年}} br年龄:{{age}} brhrh1 v-html js里面的innerHTML/h1用户名:span v-htmlusername/span br备注:span v-htmlremark/span brhrh1v-pre 主要用来跳过这个元素和它的子元素编译过程/h1span v-pre{{username}}/spanhrh1v-once 这里面的元素是在页面加载时渲染一次后面如果相关属性发生变化里面的值是不会变的/h1span v-once{{age}}/spanbutton clickaddAge添加年龄/buttonbutton clickreduceAge减少年龄/button/div
/body
script src../js/vue.js/scriptscript//创建一个Vue实例let vuenew Vue({//指定个vue实例和页面的哪个容器关联el: #app,data:{username:小明,remark:font colorred一个牛B的男人/font,age:22},methods:{addAge(){this.age;},reduceAge(){this.age--;}}})/script
/html6.【掌握】属性绑定、事件绑定、双向绑定
涉及指令
1v-bind 字面意思为绑定。是vue中提供的用户绑定属性的指令。v-bind可简写成:
2v-on 事件绑定指令 可以简写成
3v-model 只能用于表单元素的双向绑定指令
6.1 属性绑定 在以前的开发中。我们使用title属性去设置鼠标悬浮的显示值在vue 中可以使用V-bind去动态设置属性以title为例
!DOCTYPE html
html langen
headmeta charsetUTF-8title03属性绑定.html/title
/head
body!--声明一个页面容器--div idappimg src../images/mz.jpg title这是一个大妹子 width320 height480img v-bind:srcimgPath v-bind:titletitle width320 height480img :srcimgPath :titletitle width320 height480hra hrefhttp://www.baidu.com百度/abra v-bind:hrefsinaUrl{{sinaTitle}}/abra :hrefsinaUrl{{sinaTitle}}/abr/div
/body
script src../js/vue.js/scriptscript//创建一个Vue实例let vuenew Vue({//指定个vue实例和页面的哪个容器关联el: #app,data:{imgPath:../images/mz.jpg,title:这是一个大妹子,sinaUrl:http://www.sina.com.cn,sinaTitle:去新浪},methods:{// clickMe(id){// alert(id)// }clickMe:function (id) {alert(id)},addHandler(){this.score},reduceHandler(){this.score--}}})/script
/html6.2 事件绑定(v-model 一般用于表单) 在以前的开发中。我们使用onclick等属性去设置点击事件在vue 中可以使用v-on去设置方式可简写成
!DOCTYPE html
html langen
headmeta charsetUTF-8title04事件绑定.html/title
/head
body
h2单击 双击 改变 进入 移出 移动 按下 松开 得到焦点 失去焦点/h2!--声明一个页面容器--div idappinput typebutton v-on:clicktestClick value单击事件绑定input typebutton clicktestClick value单击事件绑定简写|input typebutton v-on:dblclicktestdbClick value双击事件绑定input typebutton dblclicktestdbClick value双击事件绑定简写|select changechangeValueoption value武汉1武汉1/optionoption value武汉2武汉2/optionoption value武汉3武汉3/optionoption value武汉4武汉4/option/select|input typetext focusgetFocus blurlostFocus :valuevalhrdiv stylewidth: 300px;height: 300px;border: 2px solid green;text-align: centermouseentertestMouseentermouseleavetestMouseleavemousedowntestMousedownmouseuptestMouseupmousemovetestMousemove{{content}}/div/div
/body
script src../js/vue.js/scriptscript//创建一个Vue实例let vuenew Vue({//指定个vue实例和页面的哪个容器关联el: #app,data:{val:,content:},methods:{testClick(){console.log(单击)},testdbClick(){console.log(双击)},changeValue(val){console.log(改变,val.srcElement.value)},getFocus(){console.log(得到焦点)this.val得到焦点;},lostFocus(){console.log(失去焦点)this.val失去焦点},testMouseenter(event){this.content鼠标进入console.log(进入,event)},testMouseleave(event){this.content鼠标离开console.log(离开,event)},testMousedown(event){this.content鼠标按下console.log(按下,event)},testMouseup(event){this.content鼠标松开console.log(松开,event)},testMousemove(event){console.log(event)this.content移动 xevent.offsetX yevent.offsetYconsole.log(移动)}}})/script
/html6.3 双向绑定v-model v-model 只能用于表单元素的双向绑定指令
v-bind是单向绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8title05双向绑定.html/title
/head
body
h2双向绑定/h2!--声明一个页面容器--div idappdiv{{score}}/divhrinput typetext namescore placeholder请输入分数 v-modelscoreinput typebutton clickaddScore valueinput typebutton clickreduceScore value-/div
/body
script src../js/vue.js/scriptscript//创建一个Vue实例let vuenew Vue({//指定个vue实例和页面的哪个容器关联el: #app,data:{score:100},methods:{addScore(){this.score;},reduceScore(){this.score--;}}})/script
/html6.4 双向绑定v-model 小练习
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv id appinput v-modelnumber1 /select v-modelopt option value/optionoption value--/optionoption value**/optionoption value÷÷/option/selectinput v-modelnumber2 /button clickcompute/buttoninput v-modelcutNumber//divscript//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {number1:0,number2:0,opt:,cutNumber:0},methods: {compute(){switch(this.opt){case :this.cutNumberparseInt(this.number1)parseInt(this.number2)break;case -:this.cutNumberparseInt(this.number1)-parseInt(this.number2)break;case *:this.cutNumberparseInt(this.number1)*parseInt(this.number2)break;case ÷:this.cutNumberparseInt(this.number1)/parseInt(this.number2)break;}}}});/script/body/html7.【重要】条件渲染v-if v-show
7.1 相关指令 1v-if
2v-else
3v-else -if
4v-show
7.2 v-if v-if可以实现条件渲染Vue会根据表达式的值的真假条件来渲染元素。
div idappa v-ifokyes/a/divscriptvar vue new Vue({el: #app,data: {ok:false,}})/script如果属性值ok为true则显示。否则不会渲染这个元素。
7.3 v-else v-else是搭配v-if使用的它必须紧跟在v-if或者v-else-if后面否则不起作用。
a v-ifokyes/aa v-elseNo/a7.4 v-else-if
v-else-if充当v-if的else-if块可以链式的使用多次。可以更加方便的实现switch语句。
div idappdiv v-iftypeAA/divdiv v-else-iftypeBB/divdiv v-else-iftypeCC/divdiv v-elseNot A,B,C/div/divscriptvar vue new Vue({el: #app,data: {ok:false,type:A}})/script7.5 v-show h1 v-showokhello world/h1也是用于根据条件展示元素。和v-if不同的是如果v-if的值是false则这个元素被销毁不在dom中。但是v-show的元素会始终被渲染并保存在dom中它只是简单的切换css的dispaly属性。
注意v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此如果要非常频繁的切换则使用v-show较好如果在运行时条件不太可能改变则v-if较好
7.6 案例
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv id app!-- v-if v-else 两个标签元素必须是相邻兄弟级别 --div v-ifflag我是 if true/div!-- divsdafasdfasddf/div --div v-else我是else/divhrdiv v-ifscore90你很优秀/divdiv v-else-ifscore80良好/divdiv v-else-ifscore70正常/divdiv v-else-ifscore60及格/divdiv v-else兄弟努力吧/divinput v-model:valuescore /!-- v-if 和show是有区别的1v-if 如果为false 则当前这个div根本不会创建 如果为true时会重新创建对象载入2v-show 不管为true还是False 先把对象创建出来再根据flag显示或隐藏--div v-ifflag我是 if true/divdiv v-showflag显示吗显示吧/div/divscript//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {flag:true,score:100},methods: {}});/script/body/html
8.【重点】列表渲染v-for
8.1 v-for 用v-for指令根据遍历数组来进行渲染 前端不叫集合
有下面两种遍历形式
div v-for(item,index) in items/div //使用inindex是一个可选参数表示当前项的索引div v-foritem in items/div //使用in下面是一个例子并且在v-for中拥有对父作用域属性的完全访问权限。
8.2 v-for案例
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv id appdiv v-for(item,index) in arr1 v-textitem-index {{item}}-{{index}} /divhrdiv v-for(item,index) in arr2{{index}}-{{item.id}}-{{item.name}}-{{item.address}}/div编号input typetext v-modelid /br /姓名input typetext v-modelname /br /地址input typetext v-modeladdress /br /button clickadd添加/button/divscript//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {arr1:[1,3,4,5,6,7,8],arr2:[{id:1,name:小明1,address:武汉1},{id:2,name:小明2,address:武汉2},{id:3,name:小明3,address:武汉3},{id:4,name:小明4,address:武汉4},{id:5,name:小明5,address:武汉5}],id:undefined,name:undefined,address:undefined},methods: {add(){this.arr2.push({id:this.id,name:this.name,address:this.address})}}});/script/body/html8.3 for-layuiCRUD案例
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/scriptlink relstylesheet href./css/layui.css/headbodydiv idappdiv classlayui-inlinediv classlayui-input-inline stylewidth: 100px;input typetext placeholderID classlayui-input v-modelid/divdiv classlayui-input-inline stylewidth: 100px;input typetext placeholder姓名 classlayui-input v-modelname/divdiv classlayui-input-inline stylewidth: 100px;input typetext placeholder性别 classlayui-input v-modelsex/divdiv classlayui-input-inline stylewidth: 100px;input typetext placeholder备注 classlayui-input v-modelcomment/divdiv classlayui-input-inline stylewidth: 100px;button typebutton classlayui-btn clickadd添加/button/divdiv classlayui-input-inline stylewidth: 100px;input typetext placeholder搜索姓名 classlayui-input v-modelsearchName/divdiv classlayui-input-inline stylewidth: 100px;button typebutton classlayui-btn clicksearch搜索/button/div/divtable classlayui-tablecolgroupcol width150col width200col/colgrouptheadtrthID/thth姓名/thth性别/thth备注/thth操作/th/tr/theadtbodytr v-for(item, index) in userList :keyindextd{{item.id}}/tdtd{{item.name}}/tdtd{{item.sex}}/tdtd{{item.comment}}/tdtdbutton classlayui-btn layui-btn-danger clickdeleteById(item.id)删除/buttonbutton classlayui-btn layui-btn-primary clickupdateById(item.id)更新/button/td/tr/tbody/tableh1修改用户/h1div classlayui-inlinediv classlayui-input-inline stylewidth: 100px;input typetext placeholderID classlayui-input v-modelupdateObj.id/divdiv classlayui-input-inline stylewidth: 100px;input typetext placeholder姓名 classlayui-input v-modelupdateObj.name/divdiv classlayui-input-inline stylewidth: 100px;input typetext placeholder性别 classlayui-input v-modelupdateObj.sex/divdiv classlayui-input-inline stylewidth: 100px;input typetext placeholder备注 classlayui-input v-modelupdateObj.comment/divdiv classlayui-input-inline stylewidth: 100px;button typebutton classlayui-btn clickdoUpdate确定修改/button/div/div/divscript//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {id: undefined,name: undefined,sex: undefined,comment: undefined,searchName: undefined,userList: [{ id: 1, name: 雷哥, sex: 男, comment: 地表最帅男人 },{ id: 2, name: 刘备, sex: 男, comment: 刘知兵 },{ id: 3, name: 关羽, sex: 男, comment: 关过江 },{ id: 4, name: 张飞, sex: 男, comment: 张爱兵 }],updateObj: {id: undefined,name: undefined,comment: undefined,sex: undefined}},methods: {add() {let obj {id: this.id,name: this.name,sex: this.sex,comment: this.comment}this.userList.push(obj)},search() {let newUserList new Array();let itemArr this.userList.filter(item {if (item.name.includes(this.searchName)) {newUserList.push(item)return item}})this.userList newUserList;console.log(itemArr)},deleteById(id) {// es6语法新增了强大的数组操作函数let index this.userList.findIndex(item {if (item.id id) {return true}})//js根据索引删除数组里面数据的方法 1删除this.userList.splice(index, 1)},updateById(id) {let itemArr this.userList.filter(item {if (item.id id) {return item}})let item itemArr[0];this.updateObj {id: item.id,name: item.name,comment: item.comment,sex: item.sex}},doUpdate() {console.log(this.updateObj.id)let itemArr this.userList.filter(item {if (item.id this.updateObj.id) {item.idthis.updateObj.iditem.namethis.updateObj.nameitem.sexthis.updateObj.sexitem.commentthis.updateObj.comment}})}}});/script/body/html9.【了解】过滤器的使用
作用就是格式化
9.1 概述 Vue.js 允许你自定义过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方双花括号插值和 v-bind 表达式 (后者从 2.1.0 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部由“管道”符号指示
过滤器分为两种
Ø 全局过滤器 所有Vue实例里面都可以使用
Ø 局部过滤器 当前的Vue实例里面可以使用
9.2 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titlehelloVue/title
/head
body!--声明一个页面容器--div idappdiv{{money|handlerMoney}}/divdiv{{sex|handlerSex}}/divdiv{{birth|handlerBirth}}/div/divdiv idbppdiv{{money|handlerMoney}}/divdiv{{sex|handlerSex}}/divdiv{{birth|handlerBirth}}/div/div
/body
script src../js/vue.js/scriptscript//声明一个全局过滤器// Vue.filter(handlerMoney,function (value) {// return value.toFixed(2);// })// Vue.filter(handlerSex,function (value) {// return value1?男:女;// })// Vue.filter(handlerBirth,function (value) {// return value.getFullYear()-(value.getMonth()1)-value.getDate();// })//创建一个Vue实例let vue1new Vue({//指定个vue实例和页面的哪个容器关联el: #app,filters:{handlerMoney(value){return value.toFixed(2);},handlerSex(value){return value1?男:女;},handlerBirth(value){return value.getFullYear()-(value.getMonth()1)-value.getDate();}},data:{money:912312.12812,sex:1,birth:new Date()}})let vue2new Vue({//指定个vue实例和页面的哪个容器关联el: #bpp,data:{money:912312.12812,sex:1,birth:new Date()}})/script
/html
scriptimport Layui from ../layui/layui;export default {components: {Layui}}
/script10.【了解】监听器的使用
10.1 作用 用来监听data里面的某一个数据是否发生变化。如果发生变化就会触发监听器的方法
10.2 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title11-监听器.html/title!--引入js--script src../js/vue.js/scriptstyle.clsDiv{border: 1px solid green;margin: 5px;}/style
/head
body
!--声明一个页面模板--
div idappdiv classclsDivp{{count}}/pp{{user.name}}/pinput typebutton value增加count clickaddCountinput typebutton value修改user.name clickupdateUserName/div
/div
/body
!--通过JS去创建VUE的实例--
scriptlet vuenew Vue({el:#app, //绑定的页面模板,data:{count:1,user:{id:1,name:小明1,address:武汉1}},watch:{//参数1 新值 参数2 旧值count: function (newVal,oldVal) {console.log(newVal,oldVal);},user.name:function (newVal,oldVal) {console.log(newVal,oldVal);}},methods:{addCount(){this.count;},updateUserName(){this.user.name德玛}}})
/script
/html
11.【掌握】购物车
11.1 效果
11.2 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title04购物车.html/titlelink relstylesheet href../layui/css/layui.css
/head
body!--声明一个页面容器--div idapph1 aligncenter我的购物车/h1hrtable classlayui-tabletheadtrthinput typecheckbox :checkedcheckAll clickhandlerCheckAll/thth编号/thth名称/thth单价/thth数量/thth小计/thth备注/thth操作/th/tr/theadtbodytr v-foritem in goodsListtdinput typecheckbox :checkeditem.isChecked clickhandlerItemCheckboxClick(item)/tdtd{{item.id}}/tdtd{{item.goodsName}}/tdtd{{item.price|priceHandler}}/tdtdinput typebutton value- classlayui-btn layui-btn-sm clickreduceNum(item){{item.num}}input typebutton value classlayui-btn layui-btn-sm clickaddNum(item)/tdtd{{item.amount|priceHandler}}/tdtd{{item.remark}}/tdtdinput typebutton classlayui-btn layui-btn-danger clickdoDelete(item) value删除/td/trtrtd alignright colspan11应付:{{totalAmount|priceHandler}}input typebutton classlayui-btn layui-btn-danger value结算/td/tr/tbody/table/div
/body
script src../js/vue.js/scriptscript//创建一个Vue实例let vuenew Vue({//指定个vue实例和页面的哪个容器关联el: #app,filters:{priceHandler(val){return val.toFixed(2);}},data:{goodsList:[{isChecked:false,id:1,goodsName:小霸王1,price:200,num:1,amount:200,remark:牛逼},{isChecked:false,id:2,goodsName:小霸王2,price:300,num:1,amount:300,remark:牛逼},{isChecked:false,id:3,goodsName:小霸王3,price:200,num:1,amount:200,remark:牛逼},{isChecked:false,id:4,goodsName:小霸王4,price:100,num:1,amount:100,remark:牛逼},{isChecked:false,id:5,goodsName:小霸王5,price:50,num:1,amount:50,remark:牛逼},{isChecked:false,id:6,goodsName:小霸王6,price:10,num:1,amount:10,remark:牛逼},],//总金额totalAmount:0,//是否全选checkAll:false},methods:{//减少reduceNum(item){if(item.num1){item.num--item.amountitem.price*item.numthis.computedTotalAmount();}},//加addNum(item){item.numitem.amountitem.price*item.numthis.computedTotalAmount();},handlerCheckAll(val){this.checkAll!this.checkAll;this.goodsList.filter((item){item.isCheckedthis.checkAll;})this.computedTotalAmount();},//行的复选框点击事件handlerItemCheckboxClick(item){item.isChecked!item.isChecked//判断是否全选中。如果全选中要把checkall的状态变成选中let flagtrue;this.goodsList.filter((item){if(!item.isChecked){flagfalse;}})this.checkAllflag;this.computedTotalAmount();},//删除doDelete(obj){this.goodsList.filter((item,index){if(item.idobj.id){this.goodsList.splice(index,1)this.computedTotalAmount()}})let flagtrue;this.goodsList.filter((item){if(!item.isChecked){flagfalse;}})this.checkAllflag;},//计算最后的结果computedTotalAmount(){this.totalAmount0;this.goodsList.filter((item){if(item.isChecked){this.totalAmountitem.amount}})}}})/script
/html
12.【重点】生命周期页面渲染顺序【重点内容】
12.1 生命周期图【重点注意create方法】
12.2 代码
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv id appspan{{id}}/spanbr /button clickchangeId修改id/button/divscript//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {id:1},beforeCreate() {console.log(beforeCreate:id:this.id)},//这个是重点created() {console.log(created:id:this.id)},beforeMount() {console.log(beforeMount:id:this.id)},mounted() {console.log(mounted:id:this.id)},beforeUpdate() {console.log(beforeUpdate:id:this.id)},updated() {console.log(updated:id:this.id)},beforeDestroy() {console.log(beforeDestroy:id:this.id)},destroyed() {console.log(destroyed:id:this.id)},methods: {changeId(){this.id1000}}});/script/body/html13.【特别重点】组件使用
13.1 什么是组件 组件的出现是为了拆分Vue的代码块不用同的组件划分不同的功能模块以后我们需要某个功能时就直接调用对应的组件即可
模块化模块化是从代码的角度去分析的方便代码分层开发保证每个模块职责单一
组件组件化是从界面的角度去划分的如分页组件、轮播、颜色选择、文件上传等
抽象 是把公共的东西 像的东西抽出来 好处复用公共的缺点代码的可读性直线下降
变量名说明组件的使用规范
按java的开发思想变量名往往是驼峰规则 myComponent my-component
在vue中定义组件可以使用驼峰规则但是使用组件的时候如果存在驼峰应该全部改成小写并把每个单词用-连接 有点像springboot的yml配置文件的语法
组件模板的说明
组件里面必须只有一个template标签
组件的template里面的html代码只能有一个根节点
13.2 组件的第一种声明方式
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv idappmy-component1/my-component1/divscriptvar myComponent1Vue.extend({template:div我是一个使用Vue.extend方法创建的组件/div})Vue.component(my-component1,myComponent1);//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {},methods: {}});/script/body/html
13.3 组件的第二种声明方式
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv id appmy-component1/my-component1my-component1/my-component1my-component1/my-component1my-component1/my-component1/divscript//注册组件Vue.component(my-component1,{template:div不使用Vue.extend实现的组件h1我是h1/h1/div})//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {},methods: {}});/script/body/html13.4 组件的第三种声明方式常用
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv id appmy-component1/my-component1my-component1/my-component1my-component1/my-component1my-component1/my-component1/divtemplate idtemp1divh1我是HTML里面的H1/h1h3{{count}} button clickadd点击/button /h3/button/div/templatescriptvar myComponent1{template:#temp1,data(){ //在组件里面data是一个方法return {count:0}},methods: {add(){this.count}},}//注册组件Vue.component(my-component1,myComponent1)//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {},methods: {}});/script/body/html13.5 掌握vue中组件的data和methods
组件中也可以有自己的Data和methods
组件里面的data必须是一个方法 原因如下
组件在存在是为有复用定义一个组件之后可能会有多个地方使用到该组件。如果按data:{}的写法多个组件会复用同一个data降低组件的复用性而定义为function则不会13.6 私有组件的使用 上面的创建方法都是公有的组件如果只想一个组件在某一个Vue实例里面使用就可以使用私有组件
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv id appmy-component1/my-component1my-component1/my-component1my-component1/my-component1my-component1/my-component1/divdiv id app211111my-component1/my-component1my-component1/my-component1my-component1/my-component1my-component1/my-component1/divtemplate idtemp1divh1我是HTML里面的H1/h1h3{{count}} button clickadd点击/button /h3/button/templatescriptvar myComponent1{template:#temp1,data(){ //在组件里面data是一个方法return {count:0,name:}},methods: {add(){this.count}},}//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,components:{myComponent1:myComponent1},data: {count:0,name:},methods: {}});var vm2 new Vue({el: #app2,data: {count:0,name:},methods: {}});/script/body/html13.7 掌握vue组件之间的切换方式
13.7.1 使用v-if v-else v-else-if去切换组件
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv id appbutton clickflagtrue登陆/buttonbutton clickflagfalse注册/buttondivlogin v-ifflag/loginregister v-else/register/div/divtemplate idlogindivh1我是一个登陆组件/h1button前去登陆/button/div/templatetemplate idregisterdivh1我是一个注册组件/h1button前去注册/button/div/templatescriptVue.component(login,{template:#login,data(){ //在组件里面data是一个方法return {}},methods: {},})Vue.component(register,{template:#register,data(){ //在组件里面data是一个方法return {}},methods: {},})//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {flag:true,},methods: {}});/script/body/html
13.7.2 使用component占位 去实现[适合组件多的情况]
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/script/headbodydiv id appbutton clickcomponentNamelogin登陆/buttonbutton clickcomponentNameregister注册/button!--Vue提供了component 来展示对应名称的组件这是一个占位符使用:is来指定展示的组件名称--component :iscomponentName/component/divtemplate idlogindivh1我是一个登陆组件/h1button前去登陆/button/div/templatetemplate idregisterdivh1我是一个注册组件/h1button前去注册/button/div/templatescriptVue.component(login,{template:#login,data(){ //在组件里面data是一个方法return {}},methods: {},})Vue.component(register,{template:#register,data(){ //在组件里面data是一个方法return {}},methods: {},})//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {componentName:login, //指定组件的名称},methods: {}});/script/body/html13.8 父子组件传值
13.8.1 子组件直接获取父组件数据父组件将值传递给子组件 场景数据表格将值传递给分页组件
!DOCTYPE html
html langen
headmeta charsetUTF-8title05组件的切换.html/title
/head
body!--声明一个页面容器--div idapp我是Vue实例里面的内容div{{msg}}/divhrlogin :parent-msgmsg/login/div
!--声明一个组件模板--template idlogindiv我是一个登陆组件brdiv{{message}}/divdiv{{parentMsg}}/div/div/template
/body
script src../js/vue.js/scriptscript//声明一个组件对象let login{template:#login,data(){return {message:我是子组件里面的message}},props:{parentMsg:{type:String,default: 我是个默认值}},methods: {}}//注册Vue.component(login,login)//创建一个Vue实例let vuenew Vue({//指定个vue实例和页面的哪个容器关联el: #app,data:{msg:我是父组件里面的msg},methods:{}})
/script
/html13.8.2 使用方法把子组里面的数据传递到父组件子传父 场景回调场景
!DOCTYPE html
html langen
headmeta charsetUTF-8title08组的传值2.html/title
/head
body!--声明一个页面容器--div idapp我是Vue实例里面的内容div{{msg}}/divhr colorreddiv v-foruser in userList{{user.id}}-- {{user.name}} -- {{user.address}}/divhr colorredlogin changechangeMsg/login/div
!--声明一个组件模板--template idlogindiv我是一个登陆组件input typebutton clickchangeParentMsg value把子组件的值传给父组件/div/template
/body
script src../js/vue.js/scriptscript//声明一个组件对象let login{template:#login,data(){return {msg:我是子组件里面的message,userList:[{id:1,name:小明1,address:武汉1},{id:2,name:小明2,address:武汉2},]}},methods: {changeParentMsg(){this.$emit(change,this.msg,this.userList);}}}//注册Vue.component(login,login)//创建一个Vue实例let vuenew Vue({//指定个vue实例和页面的哪个容器关联el: #app,data:{msg:我是父组件里面的msg,userList:[]},methods:{changeMsg(value,userList){this.msgvaluethis.userListuserList;}}})
/script
/html
13.9 掌握父组件调用子组件的方法【重点掌握】
!DOCTYPE html
html langen
headmeta charsetUTF-8title09父组件调用子组件方法进行传值.html/title
/head
body!--声明一个页面容器--div idapp我是Vue实例里面的内容div{{msg}}/divhr colorredinput typebutton clickcallChildrenMethod1 valuecallChildrenMethod1input typebutton clickcallChildrenMethod2 valuecallChildrenMethod2input typebutton clickcallChildrenMethod3 valuecallChildrenMethod3input typebutton clickcallChildrenMethod4 valuecallChildrenMethod4div v-foruser in userList{{user.id}}-- {{user.name}} -- {{user.address}}/divhr colorredlogin refloginCom/login/div
!--声明一个组件模板--template idlogindiv我是一个登陆组件div{{msg}}/divdiv v-foruser in userList{{user.id}}-- {{user.name}} -- {{user.address}}/div/div/template
/body
script src../js/vue.js/scriptscript//声明一个组件对象let login{template:#login,data(){return {msg:我是子组件里面的message,userList:[{id:3,name:小明3,address:武汉3},{id:4,name:小明4,address:武汉4}]}},methods: {hello(msg){this.msgmsg;},hello2(userList){this.userListuserList;},hello3(){return this.msg},hello4(){return this.userList}}}//注册Vue.component(login,login)//创建一个Vue实例let vuenew Vue({//指定个vue实例和页面的哪个容器关联el: #app,data:{msg:我是父组件里面的msg,userList:[{id:1,name:小明1,address:武汉1},{id:2,name:小明2,address:武汉2}]},methods:{//调用子组件的方法callChildrenMethod1(){this.$refs.loginCom.hello(this.msg)},callChildrenMethod2(){this.$refs.loginCom.hello2(this.userList)},callChildrenMethod3(){this.msgthis.$refs.loginCom.hello3()},callChildrenMethod4(){this.userListthis.$refs.loginCom.hello4()}}})
/script
/html
平级组件怎么互相传值借助父组件来传递
14.【特别重点】路由
14.1 什么是路由及作用 什么是路由
后端对于普通网站所有的超链接都对应一个url地址每个url都对应服务器上的资源
前端对于单页面应用程序来说的主要通过url中的#hash去实现的(当关于a标签)
作用就是用来做跳转的局部更新页面内容
14.2 掌握vue路由的基本使用 1.添加一个路由的js文件
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/scriptscript src./lib/vue-router.js/script/headbodydiv idapp!-- 默认渲染成a标签 可以使用tag来改变渲染的标签 --router-link to/login tagbutton登陆/router-linkrouter-link to/register tagbutton注册/router-link!--一个路由的占位符当中由进行切换的时候在路由中匹配到对应的组件就显示在这个位置 --router-view/router-view/divtemplate idlogindivdiv我是一个登陆组件/divbutton clicklogin登陆/button/div/templatetemplate idregisterdivdiv我是一个注册组件/divbutton clickregister注册/button/div/templatescriptvar login{template: #login,methods:{login(){alert(登陆);}}}var register{template: #register,methods:{register(){alert(注册);}}}//当引入vue-router之后在全局对象中就有了一个VueRouter构造函数let routerObjnew VueRouter({routes:[{path:/,redirect: /login},//就是重定向默认进来没有访问/路径时会被重定向到指定的路由路径非请求的重定向{path:/login,component:login},//path表示路径的url地址 component:代表路由要跳转的组件{path:/register,component:register}]})//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {},router:routerObj //指定路由对象});/script/body/html127.0.0.1:8080/user?usernameadminpassword123456
14.3 掌握路由跳转传参的方式 14.3.1 地址传参【不推荐】数据在$route.query里面
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/scriptscript src./lib/vue-router.js/script/headbodydiv id approuter-link to/login?usernameadminpassword123456tagbutton登陆/router-linkrouter-link to/register tagbutton注册/router-link!-- 一个路由的占位符当中由进行切换的时候在路由中匹配到对应的组件就显示在这个位置 --router-view/router-view/divtemplate idlogindivdiv我是一个登陆组件{{username}}----{{password}}/divbutton clicklogin登陆/button/div/templatetemplate idregisterdivdiv我是一个注册组件/divbutton clickregister注册/button/div/templatescriptvar login{template:#login,created() {this.usernamethis.$route.query.usernamethis.passwordthis.$route.query.password},data(){ //在组件里面data是一个方法return {username:undefined,password:undefined}},methods: {login(){alert(登陆)}},}var register{template:#register,data(){ //在组件里面data是一个方法return {}},methods: {register(){alert(注册)}},}//当引入vue-router之后在全局对象中就有了一个VueRouter构造函数let routerObjnew VueRouter({routes:[// {path:/,redirect: /login},//就是重定向默认进来没有访问/路径时会被重定向到指定的路由路径非请求的重定向{path:/login,component:login},//path表示路径的url地址 component:代表路由要跳转的组件{path:/register,component:register}]})//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,router:routerObj //指定路由对象});/script/body/html14.3.2 rest风格【推荐】数据在$route.param里面
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/scriptscript src./lib/vue-router.js/script/headbodydiv id approuter-link to/login?usernameadminpassword123456tagbutton登陆/router-linkrouter-link to/register/zhangsan/123456 tagbutton注册/router-link!-- 一个路由的占位符当中由进行切换的时候在路由中匹配到对应的组件就显示在这个位置 --router-view/router-view/divtemplate idlogindivdiv我是一个登陆组件{{username}}----{{password}}/divbutton clicklogin登陆/button/div/templatetemplate idregisterdivdiv我是一个注册组件{{username}}----{{password}}/divbutton clickregister注册/button/div/templatescriptvar login{template:#login,created() {this.usernamethis.$route.query.usernamethis.passwordthis.$route.query.passwordconsole.log(this.$route.query.username this.$route.query.password)},data(){ //在组件里面data是一个方法return {username:undefined,password:undefined}},methods: {login(){alert(登陆)}},}var register{template:#register,created() {console.log(this.$route)this.usernamethis.$route.params.usernamethis.passwordthis.$route.params.password},data(){ //在组件里面data是一个方法return {username:undefined,password:undefined}},methods: {register(){alert(注册)}},}//当引入vue-router之后在全局对象中就有了一个VueRouter构造函数let routerObjnew VueRouter({routes:[// {path:/,redirect: /login},//就是重定向默认进来没有访问/路径时会被重定向到指定的路由路径非请求的重定向{path:/login,component:login},//path表示路径的url地址 component:代表路由要跳转的组件{path:/register/:username/:password,component:register}]})//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,router:routerObj //指定路由对象});/script/body/html14.4 掌握路由的嵌套使用 就是路由里面套路由如登陆页面可以使用手机或者账号密码登陆
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/scriptscript src./lib/vue-router.js/script/headbodydiv idapp!-- 默认渲染成a标签 可以使用tag来改变渲染的标签 --router-link to/login?usernameadminpassword123456 tagbutton登陆/router-linkrouter-link to/register/zhangsan/123456 tagbutton注册/router-link!--一个路由的占位符当中由进行切换的时候在路由中匹配到对应的组件就显示在这个位置 --router-view/router-view/divtemplate idlogindivdiv我是一个登陆组件/divrouter-link to/login/loginByPassword账号密码登陆/router-linkrouter-link to/login/loginBySms手机号登陆/router-linkrouter-view/router-view/div/templatetemplate idregisterdivdiv我是一个注册组件/div/div/templatescriptvar login{template: #login,}var loginByPassword{template: p账号密码登陆/p,}var loginBySms{template: p手机号登陆/p,}var register{template: #register,}//当引入vue-router之后在全局对象中就有了一个VueRouter构造函数let routerObjnew VueRouter({routes:[{path:/,redirect: /login},{path:/login,component:login,children:[{path:,redirect: loginByPassword},{path:loginByPassword,component:loginByPassword},{path:loginBySms,component:loginBySms}]},//path表示路径的url地址 component:代表路由要跳转的组件{path:/register/:username/:password,component:register}]})//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,data: {},router:routerObj //指定路由对象});/script/body/html14.5 掌握编程式导航的路由跳转 什么是编程试导航
就是通过按钮点击调用方法通过方法去转到某个路由
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src./lib/vue.js/scriptscript src./lib/vue-router.js/script/headbodydiv id appbutton clicktoLogin登陆/buttonbutton clicktoRegister注册/button!-- 一个路由的占位符当中由进行切换的时候在路由中匹配到对应的组件就显示在这个位置 --router-view/router-view/divtemplate idlogindivdiv我是一个登陆组件/div/div/templatetemplate idregisterdivdiv我是一个注册组件/div/div/templatescriptvar login{template:#login,created() {console.log(我是登陆组件里面的)console.log(this.$route.query)},}var register{template:#register,}//当引入vue-router之后在全局对象中就有了一个VueRouter构造函数let routerObjnew VueRouter({routes:[// {path:/,redirect: /login},//就是重定向默认进来没有访问/路径时会被重定向到指定的路由路径非请求的重定向{path:/login,component:login},//path表示路径的url地址 component:代表路由要跳转的组件{path:/register,component:register}]})//创建Vue实例,得到 ViewModelvar vm new Vue({el: #app,methods: {toLogin(){this.$router.push({path:/login,query:{username:admin}})//跳转并传参},toRegister(){this.$router.push(/register)}},router:routerObj //指定路由对象});/script/body/html
