网站必须做301重定向吗,珠宝网站建设需求,公司品牌宣传,烟台开发区住房和建设局网站1.【熟悉】Vue简介
1.1 简介
它是一个构建用户界面单页面的框架 Vue是一个前端框架
https://www.pmdaniu.com/#file UI网站
UI 一般开发者使用蓝湖 工具 看着UI图 写接口
https://lanhuapp.com/web/#/item
是一个轻量级的MVVM#xff08;Model-View-ViewModel#xff…1.【熟悉】Vue简介
1.1 简介
它是一个构建用户界面单页面的框架 Vue是一个前端框架
https://www.pmdaniu.com/#file UI网站
UI 一般开发者使用蓝湖 工具 看着UI图 写接口
https://lanhuapp.com/web/#/item
是一个轻量级的MVVMModel-View-ViewModel其实就是所谓的数据的双向绑定
Mvc
M—model mapper domain utils service servceimpl
V----view html thymeleaf
C----controller
数据驱动和组件化的前端开发
通过简单的API就能实现响应式的数据绑定和组合的视图组件
指令
用来扩展html标签的功能
https://cn.vuejs.org/
1.2 其它 简单、易学、更轻量
指令v-xxx开头 v-if v-for 这些作用在html标签中
HTML JSON数据
开发者 尤雨溪 华人 Vue React
这几个框架都不兼容低版本IE window Xp
2.【重点】MVVM的思想
2.1 Ajax请求数据 显示到页面 1点击按钮触发事件
2使用$.post $.get $.ajax 发请求
3请求 完成之后拿到数据
4使用document.getElementById(“id”)找到页面的dom对象
5把第三部请求回来的数据使用innerText innerHtml去修改
2.2 MVVM 设计思想 MVC
|–M Model domain,service,serviceimpl.utils.pojo.mapper
|–V view thymeleaf jsp html
|–C controller 接收前端请求(控制器)
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.3 MVVM图例解析
3.【掌握】IDEA开发环境的配置
3.1 安装插件
3.2 创建前端项目
4.【掌握】安装和部署
https://cn.vuejs.org/v2/guide/installation.html
4.1 直接下载并用 script 标签引入 Vue 会被注册为一个全局变量。
在开发环境下不要使用压缩版本不然你就失去了所有常见错误相关的警告!
开发版本包含完整的警告和调试模式
https://cn.vuejs.org/v2/guide/installation.html
4.2 NPM【后面讲】 在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
最新稳定版
npm install vue
4.3 导入js到项目里面
4.4 第一个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
/html4.5 配置页面模板
5.【掌握】v-text,v-html,v-pre,v-once指令
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
/html
6.【掌握】属性绑定、事件绑定、双向绑定
涉及指令
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
/html
6.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 html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../js/vue.js/script
/head
body
div idappdivinput typetext v-modelnum1select v-modeloptoption/optionoption-/optionoption*/optionoption÷/option/selectinput typetext v-modelnum2input typebutton value clickcomputeinput typetext v-modelresult/div
/div
/body
scriptlet vue new Vue({el: #app,data: {opt:,num1: undefined,num2: undefined,result: undefined,},methods: {compute() {switch (this.opt) {case :// this.resultnew Number(this.num1)new Number(this.num2)this.resultparseFloat(this.num1)parseFloat(this.num2)breakcase -:this.resultparseFloat(this.num1)-parseFloat(this.num2)break;case *:this.resultparseFloat(this.num1)*parseFloat(this.num2)break;case ÷:this.resultparseFloat(this.num1)/parseFloat(this.num2)break;}}}})
/script
/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 html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../js/vue.js/script
/head
body
div idappdivinput typetext v-modelscorediv v-ifscore90优秀/divdiv v-else-ifscore80良好/divdiv v-else-ifscore70一般/divdiv v-else-ifscore60及格/divdiv v-else不及格/divinput typebutton value点击 clickflag!flag{{flag}}div v-showflag我是DIV里面的内容/div/div
/div
/body
scriptlet vue new Vue({el: #app,data: {flag: false,score:100},methods: {}})
/script
/html8.【重点】列表渲染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 html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../js/vue.js/script
/head
body
div idapppdiv v-foritem in arr1{{item}}/div/ppdiv v-for(item,index) in arr1{{item}}---{{index}}/div/ppdiv v-for(item,index) in userList{{item.id}}--{{item.name}}--{{item.address}}--{{item.sex1?男:女}}/div/pptable border1 cellspacing0 width100% cellpadding0trth编号/thth姓名/thth地址/thth性别/th/trtr aligncenter v-foruser in userList td v-textuser.id/tdtd{{user.name}}/tdtd v-textuser.address/tdtd{{user.sex1?男:女}}/td/tr/table/ppselect v-modeljgoption v-foritem in options :valueitem.id{{item.name}}/option/selectbr{{jg}}/pinput typebutton value添加一个用户 clickaddUser
/div
/body
scriptlet vue new Vue({el: #app,data: {arr1: [a,b,c,d,e],userList:[{id:1,name:小明,address:武汉,sex:1},{id:2,name:小红,address:东莞,sex:0},{id:3,name:小芳,address:佛山,sex:0},{id:4,name:小丽,address:深圳,sex:0}],options:[{id:1,name:北京},{id:2,name:上海},{id:3,name:武汉},{id:4,name:深圳}],jg:undefined},methods: {addUser() {this.userList.push({id:5,name:小苏,address:琅琊榜,sex:1})}}})
/script
/html8.3 v-for-CRUD案例
!DOCTYPE html
html langen
headmeta charsetUTF-8title单面页面CRUD案例/titlescript src../js/vue.js/script
/head
body
div idapppinput typenumber placeholder编号 stylewidth: 50px v-modeluser.idinput typetext placeholder姓名 stylewidth: 100px v-modeluser.nameinput typetext placeholder地址 stylewidth: 150px v-modeluser.addressselect v-modeluser.sexoption value1男/optionoption value0女/option/selectbutton clickaddUser添加/buttoninput typetext placeholder姓名 v-modelsearchNamebutton clickdoSearch搜索/button/phrptable border1 cellspacing0 width100% cellpadding0trth编号/thth姓名/thth地址/thth性别/thth操作/th/trtr aligncenter v-for(user,index) in userList td v-textuser.id/tdtd{{user.name}}/tdtd v-textuser.address/tdtd{{user.sex1?男:女}}/tdtdbutton clicktoUpdate(user)修改/buttonbutton clickdoDelete(index)删除/button/td/tr/table/ppinput typenumber readonly placeholder编号 stylewidth: 50px v-modelupdate.idinput typetext placeholder姓名 stylewidth: 100px v-modelupdate.nameinput typetext placeholder地址 stylewidth: 150px v-modelupdate.addressselect v-modelupdate.sexoption value1男/optionoption value0女/option/selectbutton clickupdateUser修改/button/p
/div
/body
scriptlet vue new Vue({el: #app,data: {userList:[{id:1,name:小明,address:武汉,sex:1},{id:2,name:小红,address:东莞,sex:0},{id:3,name:小芳,address:佛山,sex:0},{id:4,name:小丽,address:深圳,sex:0}],//添加的属性绑定user:{id:undefined,name:undefined,address:undefined,sex:0},update:{id:undefined,name:undefined,address:undefined,sex:0},searchName:undefined},methods: {//添加用户addUser() {this.userList.push({id: this.user.id,name: this.user.name,address: this.user.address,sex: this.user.sex});},//搜索doSearch(){if(this.searchName){//注意这个方法(currentValue,index)let arrthis.userList.filter(item{return item.name.indexOf(this.searchName)0})// alert(JSON.stringify(arr))//上面已拿到过滤的数据直接赋值给userListthis.userListarr;}},//去更新toUpdate(user){this.update.iduser.id;this.update.nameuser.name;this.update.addressuser.address;this.update.sexuser.sex;},//更新updateUser(){let arrthis.userList.map(item{if(item.idthis.update.id){item.namethis.update.name;item.addressthis.update.address;item.sexthis.update.sex;}return item;})alert(JSON.stringify(arr))},//删除doDelete(index){//参数1 开始删除的索引位置 参数2 从索引位置开始后现删除几个this.userList.splice(index,1);}}})
/script
/html9.【了解】过滤器的使用
作用就是格式化
9.1 概述 Vue.js 允许你自定义过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方双花括号插值和 v-bind 表达式 (后者从 2.1.0 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部由“管道”符号指示
过滤器分为两种
Ø 全局过滤器 所有Vue实例里面都可以使用Vue.filter
Ø 局部过滤器 当前的Vue实例里面可以使用
9.2 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../js/vue.js/script
/head
bodydiv idappdiv{{money}}/divdiv{{money|moneyHandler}}/divdiv{{birth}}/divdiv{{birth|birthHandler}}/divdiv{{sex1?男:女}}/divdiv{{sex|sexHandler}}/div/divhrdiv idapp2div{{money}}/divdiv{{money|moneyHandler}}/divdiv{{birth}}/divdiv{{birth|birthHandler}}/divdiv{{sex1?男:女}}/divdiv{{sex|sexHandler}}/div/div
/body
script//全局过滤器的声明// Vue.filter(sexHandler,function (value) {// return value1?汉子:妹子// })// Vue.filter(moneyHandler,function (value) {// return value.toFixed(2)//保留两位小数// })// Vue.filter(birthHandler,function (value) {// return value.getFullYear()-(value.getMonth()1)-value.getDate() value.getHours():value.getMinutes():value.getSeconds()// })let vue new Vue({//在过滤器里面无法访问data和methodsfilters:{sexHandler(value){return value1?汉子:妹子},moneyHandler(value){return value.toFixed(2)//保留两位小数},birthHandler:function (value) {return value.getFullYear()-(value.getMonth()1)-value.getDate() value.getHours():value.getMinutes():value.getSeconds()}},el: #app,data: {money:9999.9193,birth:new Date(),sex:1},methods: {}})let vue2 new Vue({el: #app2,filters:{sexHandler(value){return value1?汉:妹},moneyHandler(value){return value.toFixed(3)//保留两位小数},birthHandler:function (value) {return value.getFullYear()-(value.getMonth()1)-value.getDate()}},data: {money:9999.9193,birth:new Date(),sex:1},methods: {}})
/script
/html10.【了解】监听器的使用
10.1 作用 就是用来监听data里面的数据值是否发生变化。如果发生变化会触发监听器
10.2 案例
!DOCTYPE html
html langen
headmeta charsetUTF-8title10监听器的使用.html/titlescript src../js/vue.js/script
/head
body
div idappdivinput typetext v-modelageinput typetext v-modeluser.age/div
/div
/body
scriptlet vue new Vue({el: #app,//监听器watch:{age(newVal,oldVal){console.log(newVal)console.log(oldVal)},user.age:function (newVal,oldVal) {console.log(newVal)console.log(oldVal)}},data: {age:18,user:{age:100,}},methods: {m1() {}}})
/script
/html11.【掌握】购物车
11.1 效果**
11.2 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title11购物车.html/titlescript src../js/vue.js/script
/head
body
div idapptable border1 cellspacing0 width100% cellpadding0trthinput typecheckbox v-modelisCheckAll clickcheckAll //thth编号/thth商品名称/thth价格/thth数量/thth小计/thth备注/thth操作/th/trtr aligncenter v-for(item,index) in goodsList tdinput typecheckbox v-modelitem.isChecked clickrowCheckBoxClick(item) /tdtd{{item.id}}/tdtd{{item.goodsName}}/tdtd{{item.price|moneyHandler}}/tdtdbutton clickreduceNum(item)-/button{{item.num}}button clickaddNum(item)/button/tdtd{{item.amount|moneyHandler}}/tdtd{{item.remark}}/tdtdbutton clickdoDelete(index)删除/button/td/trtr alignright td colspan11应付:{{totalAmount|moneyHandler}}button结算/button/td/tr/table
/div
/body
scriptVue.filter(moneyHandler,function (value) {return value.toFixed(2)//保留两位小数})let vue new Vue({el: #app,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:牛逼},],//是否全选isCheckAll:false,//选中的订单总金额totalAmount:0,},methods: {//全选全否checkAll() {this.isCheckAll!this.isCheckAll;this.goodsList.filter(item{item.isCheckedthis.isCheckAll;})this.computedTotalAmount();},//增加数量addNum(goods){goods.num//计算小计goods.amountgoods.price*goods.num;this.computedTotalAmount();},//减少数量reduceNum(goods){if(goods.num1){return;}goods.num--//计算小计goods.amountgoods.price*goods.num;this.computedTotalAmount();},//行的checkbox点击事件rowCheckBoxClick(goods){goods.isChecked!goods.isCheckedlet flagtrue;this.goodsList.filter(item{if(!item.isChecked){flagfalse;}})//修改checkall的状态this.isCheckAllflag;this.computedTotalAmount();},//删除doDelete(index) {this.goodsList.splice(index,1);this.computedTotalAmount();},//统计总金额的方法、computedTotalAmount(){this.totalAmount0;this.goodsList.filter(item{if(item.isChecked){this.totalAmountitem.amount;}})}}})
/script
/html12.【重点】生命周期页面渲染顺序【重点内容】
12.1 生命周期图【重点注意create方法】 12.2 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title12生命周期.html/titlescript src../js/vue.js/script
/head
body
div idappdiv{{count}}/divdiv idmyDiv我是DIV的内容/divinput typebutton value添加 clickm1
/div
/body
scriptlet vue new Vue({el: #app,//elelement//这个是可用的生命周期的第一个方法//这个方法里面 data和methods还没有初始化所以不能使用this.xxx来调用data里面的属性 及methods里面的方法beforeCreate(){console.log(beforeCreate---this.count)},//vue对象创建成功。此时可以 data和methods已初始化完成可以使用this.xxx来调用data里面的属性和methods里面的方法//【重点方法】一般在这里面发送网络请求。因为这个方法里面可以最早的访问到data和methodscreated(){console.log(created---this.count)this.m1();},//这个方法是内存里面编译好的模板还没有挂载到浏览器之前执行的方法这里面不能操作页面的dom对象beforeMount(){console.log(beforeMount---this.count)var myDiv document.getElementById(myDiv);myDiv.innerTexthelloconsole.log(myDiv)},//【重点】页面挂载完成的方法编译好的模板已把页面替换了 这里是最早可以操作页面dom对象的方法mounted(){console.log(mounted---this.count)var myDiv document.getElementById(myDiv);myDiv.innerTexthello},//data里面的数据有变化而模板里面又取了data里面的值那么就当这个值变化时就会被触发beforeUpdate(){console.log(beforeUpdate--this.count)},//beforeUpdate执行之后页面的模板里面的数据替换完成之后回调的方法updated(){console.log(updated--this.count)},//页面vue对象被销毁时触发的方法 里面还可以访问 data和methods?beforeDestroy(){console.log(beforeDestroy--this.count)},//页面vue对象已完成销毁 不能再访问data和methodsdestroyed(){console.log(destroyed--this.count)},data: {count: 0,userList:[]},methods: {m1() {console.log(m1)var myDiv document.getElementById(myDiv);myDiv.innerTextm1m1m1m1m1m1m1m1m1this.count;}}})
/script
/html
