网站开发语言排行,建设局网站漠河,wordpress ajax 登录,深圳网站建公司VUE-02-v-model和过滤器
昨日反馈与回顾
代码仓库的问题
不要修改你克隆下来的仓库中任意代码#xff0c;否则#xff0c;下次pull时#xff0c;可能会报错#xff0c;从而得到不到最新的代码。 如果已经遇到了这个冲突#xff1a;
解决冲突(git 中解决冲突)把关键代码…VUE-02-v-model和过滤器
昨日反馈与回顾
代码仓库的问题
不要修改你克隆下来的仓库中任意代码否则下次pull时可能会报错从而得到不到最新的代码。 如果已经遇到了这个冲突
解决冲突(git 中解决冲突)把关键代码拷出来放弃这个仓库重新再次clone后续git pull
处理样式
样式由两个部分决定
classstyle
v-bind绑定class 目标知道通过vue怎么去操作类也就是class属性的值。 动态绑定class属性有三种方式
三元运算符绑定对象如果属性值为true则添加属性名给class绑定数组
代码
style#app{width:500px;margin:50px auto;border:3px solid red;}.box{border:3px solid black;margin:5px;}.bg-blue{background-color: blue;}.bg-green{background-color: green;}.fs20{font-size:20px;}.tr{text-align: right;}/style
/head
bodydiv idapph3 classtitlev-bind-绑定class/h3!-- 元素自有class和v-bind绑定的class会协同工作一起生效 --div classbox v-bind:classcla ? bg-blue: bg-green1. 三元表达式/div!-- 如果对象中的属性值是true,则把对象中的属性名添加到类名中 --div classbox :classclaObj2. 绑定对象/div!-- 数组中元素是字符串它会把所有的元素全添加到class中 --div classbox :classclaArr3. 绑定数组/divbutton clickhAddClass补充一个class/button/divscript// v-bind 是用来动态绑定元素的属性而class也是元素的属性// 目标 可以通过动绑定class来控制样式 。// 方式// 1. 三元表达式// 2. 绑定对象// 3. 绑定数组const vm new Vue({el: #app,// el: document.getElementById(app),data: {cla: false,claObj: {fs20: true,tr: true},claArr:[fs20,tr, abc]},methods: {hAddClass () {// 向数组中添加一个类 c-redthis.claArr.push(c-red)}}})/script:class 动态绑定类名 class 原生属性可以同时存在他们包含的所有类会合并在一起生效。
v-bind绑定style 目标知道通过vue怎么去操作行内样式也就是style属性的值。 动态绑定style属性有两种方式
对象形式数组形式
v-bind绑定style使用对象
div idapph3 classtitlev-bind-绑定style/h3!-- 把对象的属性名和属性值直接设置到style中 --div classbox :stylestyleObj1. 绑定对象/div!-- 把数组中的每一个元素对象取出来组成style --div classbox :stylestyleArr2. 绑定数组/divbutton clickhBlack改成黑色的字/button/divscript// v-bind 是用来动态绑定元素的属性而style也是元素的属性// 目标 可以通过动绑定style来控制样式 。// 方式// 1. 绑定对象// 2. 绑定数组const vm new Vue({el: #app,// el: document.getElementById(app),data: {styleObj: {color:red,// 如果属性名有-则要加background-color:blue},// 数组中的每一项都是一个对象其中以键值对的格式设置了stylestyleArr:[ {color:red,font-weight:bold}, {font-size:50px} ]},methods: {hBlack () {// 直接把styleObj中的color设置成blackthis.styleObj.color black}}})/script如果同时存在 :style 和 style vue操作的样式会覆盖默认样式。
总结
:style 使用对象 {css属性名:css属性值}:style 使用数组 [{css属性名:css属性值}]
v-model
目标
知道如何绑定多种类型的表单元素
基本使用
div idapph3 classtitlev-model/h3用户名input v-modeluserName br!-- 不是表单元素不能用div v-modeluserName /div --button clickuserName123123/buttonbutton clickhPrint打出userName/button/divscript// v-model // 是用来对表单元素进行双向绑定的。// 表单元素: 用户可以进行交互的元素textarea,select,input,checkbox...// 双向绑定: // -1. 用户在input中的修改会影响到数据// -2. 数据的修改会影响input// 格式表单元素 v-model数据项const vm new Vue({el: #app,data: {userName: 小王},methods: {hPrint () {console.log( this.userName )}}})/script表单元素
文本域复选框单选框下拉框
div idapph3 classtitlev-model/h3div classbox!-- 1. 普通文本框 --用户名input v-modeluserName /divdiv classbox!-- 2. 单选 由value来决定用户选中的值 --性别input typeradio value男 v-modelgender帅哥input typeradio value女 v-modelgender美女/divdiv classbox!-- 3. 复选 由value来决定用户选中的值,结果放在一个数组中 --爱好input typecheckbox value读书 v-modelhobby读书input typecheckbox valuesport v-modelhobby运动input typecheckbox valuek歌 v-modelhobbyk歌/divdiv classbox!-- 4. 文本域 注 不能把内容写在元素中: textarea v-modelinfoabc/textarea--个人说明textarea v-modelinfo/textarea/divdiv classbox!-- 5. 下拉选中的值是以value为准--位置 select v-modelcityoption value1北京/optionoption value2上海/optionoption value3潜江/option/select/divdiv classbox!-- 6. 单个复选框是否同意如果为true,则选中false,不选中--愿意吗input typecheckbox v-modelisChecked/divbutton clickhPrint打印结果/button/divscript// v-model // 是用来对表单元素进行双向绑定的。// 1. 普通文本框 // 2. 单选// 3. 复选// 4. 文本域// 5. 下拉// 6. 单个复选框是否同意const vm new Vue({el: #app,data: {userName: 小王子,gender:男, // 单选hobby:[读书], // 多选info: 自我介绍如下白玉谁家郎,city: 1,isChecked: false},methods: {hPrint () {console.log( this.userName )console.log( this.gender )console.log( this.hobby )console.log( this.info )console.log( this.city )console.log( this.isChecked )}}})/script修饰符
lazy
在默认情况下v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符从而转为在 change 事件_之后_进行同步
!-- 在“change”时而非“input”时更新 --
input v-model.lazymsgnumber
如果想自动将用户的输入值转为数值类型可以给 v-model 添加 number 修饰符
input v-model.numberage typenumber这通常很有用因为即使在 typenumber 时HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析则会返回原始的值。
trim
如果要自动过滤用户输入的首尾空白字符可以给 v-model 添加 trim 修饰符
input v-model.trimmsgdiv idapph3 classtitlev-model/h3div classbox!-- 1. lazy --!-- 不加lazyinput v-modeluserName {{userName}} --br加lazyinput v-model.lazyuserName {{userName}}/divdiv classbox!-- 2. number 不加number就是一个普通的字符串加了number,会尽量帮你转成数值转不成也不会报错--br加numberinput v-model.numberage {{age}}/divdiv classbox!-- 3. trim 自动把内容中的前后空格去掉--brinput v-model.trimemail 内容的长度{{email.length}}/div/divscript// v-model // v-model的三个修饰符// 1. lazy -- v-model.lazyuserName// 默认情况v-model只要用户修改了input中的内容在每次input事件之后就会与数据进行同步// 如果加了lazy之后则在用户完成了输入鼠标失焦之后(相当于change)才会与数据同步。// 2. number// 自动转成数值的格式// 3. trim// 把内容中的前后空格去掉const vm new Vue({el: #app,data: {userName: 小王,age:18,email:},methods: {hPrint () {console.log( this.userName )}}})/script案例-资产列表 渲染列表 目标完成表格列表渲染。 需求
根据data中的数据进行tr的渲染。当没有数据的时候显示暂无数据。
静态页面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./bootstrap.min.css
/head
bodydiv idappdiv classcontainertable classtable table-bordered table-hovertheadtrth编号/thth资产名称/thth创建时间/thth操作/th/tr/theadtbodytrtd1/tdtd宝马/tdtd20000/tdtda href#删除/a/td/tr/tbody/table/div/div
/body
/html准备数据
list: [{ id: 1, name: 外套, price: 99 },{ id: 2, name: 裤子, price: 34 },{ id: 3, name: 鞋, price: 25.4 },{ id: 4, name: 头发, price: 19900 }
]完整的功能实现 div idappdiv classcontainertable classtable table-bordered table-hovertheadtrth编号/thth资产名称/thth创建时间/thth操作/th/tr/theadtbody!-- tr v-for(循环变量索引变量) in 数据 --tr v-for(item, idx) in listtd{{item.id}}/tdtd{{item.name}}/td!-- 如果价格超过100就有red这个类 --!-- td classred{{item.price}}/td --!-- 三元--!-- td :classitem.price 100 ? red : {{item.price}}/td --!-- 放一个对象如果对象中的属性值是true,则把对象中的属性名添加到类名中--td :class{red:item.price100}{{item.price}}/tdtda href# click.preventhDel(idx)删除/a/td/tr/tbody/table/div/divscript src./vue.js/scriptscriptconst vm new Vue({el: #app,data: {list: [{ id: 1, name: 外套, price: 99 },{ id: 2, name: 裤子, price: 34 },{ id: 3, name: 鞋, price: 25.4 },{ id: 4, name: 头发, price: 19900 }]}})/script删除功能 目标完成表格一行删除。 需求
点击删除按钮确认框提示点击确认后再进行删除绑定事件指定处理函数的时候传入ID在处理函数中根据ID进行删除idindex根据索引删除
实现
tda click.preventhDel(idx) href#删除/a/tdmethods: {hDel (index) {console.log(要删除的下标是,index)// 删除数组中指定位置的元素this.list.splice(index, 1)}
}添加资产 目标完成表格添加资产。 大致的实现步骤
准备一个表单包含一个输入框包含一个提交按钮。监听提交事件提取输入框中的内容根据输入的内容来组织 资产信息对象 追加到数组中即可 数据会驱动视图的更新 清空输入框中的内容
在案例中的代码
html结构
!-- 添加资产 --
form classform-inlinediv classform-groupdiv classinput-groupinput typetext classform-control placeholder资产名称/div/divnbsp;nbsp;nbsp;nbsp;button classbtn btn-primary添加资产/button
/form双向绑定输入框
input v-model.trimbrandName typetext classform-control placeholder资产名称监听提交事件且阻止默认提交行为
form submit.preventaddBrand() classform-inline在处理函数中实现逻辑 // 添加资产addBrand() {// 通过v-model绑定输入框可以实时的获取输入的内容// console.log(this.brandName)// 严谨判断未输入内容提示 阻止程序运行// trim()是去除字符串左右两侧的空格然后去判断会更加严谨if (!this.brandName.trim()) {return alert(请输入资产名称)}// 组织一个对象id brandName createTime// 正常逻辑去除数组中最后一项数据的ID累加1即可// 极端情况数组中已经没有数据此时ID为1即可const obj {id: this.list.length ? this.list[this.list.length - 1].id 1 : 1,brandName: this.brandName,createTime: new Date()}// 追加到数组中即可this.list.push(obj)// 清空输入框this.brandName }梳理其它功能 目标确定还有哪些功能需要完成。 输入框结构 !-- 搜索 --form classform-inline stylepadding: 20px 0input typetext classform-control placeholder输入关键字进行搜索/form!-- 表格 --过滤器 目标 理解过滤器的作用和使用场景掌握定义和使用过滤器。 理解过滤器
过滤器的作用转换格式。
生活中的过滤器:
如把水中的杂质过滤掉。输入过滤器的是脏水输出的是纯净水。vue中的过滤器
- 如把字符串用0补足6位。输入的是不足6位的字符串输出的是用0补全之后的字符串。
- 如把单词首字母转成大写。输入的是普通单词输出的是首字母大写的单词。本质就是一个函数
格式x ---过滤器---- 格式y格式
定义过滤器的格式
new Vue({// 过滤器的定义filters: {// 属性名称过滤器名称属性的值过滤器处理函数myFilter:function(value,其它参数){}}})使用过滤器的格式
// 不带参数
{{ msg | 过滤器}}
// 带参数
{{ msg | 过滤器参数}}示例1不带参数的过滤器
div idapph3{{msg}}/h3!-- 使用过滤器 --h3{{msg | f1}}/h3!-- 使用过滤器 --h3{{msg | padding6}}/h3/divscript// vue中的过滤器// 作用 在显示数据之前做一次格式转化// 定义格式// filters: {// 过滤器名 function (value,其它参数) {// }// }// 使用格式 // {{ msg | 过滤器}}// {{msg}} console.log(msg)// {{msg | f1}} console.log( f1(msg) )const vm new Vue({el: #app,data: {msg: vue},// 过滤器列表filters: {// {{msg | f1}}// 会去:// 1. 调用f1这个函数并自动把msg传进来给value// 2. 把f1函数的返回值显示出来f1 (value) {console.log(value)return hahaha},padding6 (str) {// 对于字符串不足6位// 左侧补0// String(str) 类型转换// padStart: 在左侧补足字符串//字符串.padStart(总长度填充的字符)return String(str).padStart(6, *)}}})
/script注意 它的工作过程就是函数的调用执行过程。 过滤器本质是一个函数它的接收的参数是格式化之前的数据及格式化的参数它的返回值是格式化之间的值
示例2带参数过滤器
定义
filters: {// {{msg | f1}}// 会去:// 1. 调用f1这个函数并自动把msg传进来给value// 2. 把f1函数的返回值显示出来f1 (value) {console.log(value)return hahaha},paddingN (str,n) {// 对于字符串不足n位左侧补0// String(str) 类型转换// padStart: 在左侧补足字符串//字符串.padStart(总长度填充的字符)return String(str).padStart(n, *)}}使用
{{ ab | padding6}}
{{ name | padding(5)}}注意
它会自动传入第一个参数。 过滤器的分类 全局过滤器在vue实例外部定义在随后的每个vue实例中均可使用 Vue.filter(过滤器名称,function(value){ //管道符前js表达式执行结果 // 返回处理好的数据即可
})局部过滤器在vue实例中定义仅能给当前vue实例管理的视图使用
总结
全局 Vue.filter(过滤器名称,(value){ //管道符前js表达式执行结果 // 返回处理好的数据即可 })局部 new Vue({filters:{过滤器名称:(value){ //管道符前js表达式执行结果 // 返回处理好的数据即可 }}})
自定义指令 目标知道如何定义自定义指令使用自定义指令。 指令directivevue提供了v-开头的特殊属性称之为指令。它提供的指令是有限如果遇见内置指令无法给你实现的功能自己封装一个指令自定义指令。
定义一个v-focus的指令作用让input自动获取焦点
全局自定义指令局部自定义指令 div idappinput typetext v-focusinput typetext v-myfocus/divscript src./vue.js/scriptscript// 全局自定义指令// Vue.directive(指令的名称,指令配置对象)// 参数1指令的名称不包含v-但是在使用指令的时候需要加上v-// 参数2指令配置对象固定属性 inserted 指定的一个函数// 1. 该函数会在通过指令标记的元素创建完毕之后执行// 2. 该函数有一个默认参数 el 指的是使用这个指令的元素Vue.directive(focus,{inserted (el) {// 获取焦点el.focus()}})const vm new Vue({el: #app,// 局部自定义指令// vue配置对象提供了一个选项directives 对应 对象directives: {// 属性名称(指令的名称)属性的值(指令的配置对象)myfocus: {inserted (el) {el.style.height 50pxel.focus()}}}})/script补充
dom元素提供了focus函数dom.focus()触发获取焦点事件自然元素可以获取焦点。
案例-资产列表(续)
用过滤器完成货币格式化显示
filters: {$:function(value, _currency) {// 全局匹配 三位连续且之后也是数值 的数值var digitsRE /(\d{3})(?\d)/g;value parseFloat(value);if (!isFinite(value) || !value value ! 0) return ;_currency _currency ! null ? _currency : ;// 保留两位小数并整体转成字符串var stringified Math.abs(value).toFixed(2);// 获取整数部分。-3表示倒数3位的位置var _int stringified.slice(0, -3);// 整数部分以3为基准长度划分剩下几位var i _int.length % 3;// 取出头部。// 如12345 ---- 12,var head i 0 ? _int.slice(0, i) (_int.length 3 ? , : ) : ;// 取出小数点部分// 如12345.67 ---- .67var _float stringified.slice(-3);var sign value 0 ? - : ;return _currency sign head _int.slice(i).replace(digitsRE, $1,) _float;}
}用自定义指令来完成搜索框自动获取焦点
directives: {// 属性名称(指令的名称)属性的值(指令的配置对象)myfocus: {inserted (el) {el.focus()}}
}用过滤器完成货币格式化显示。
注意:下面的代码来自vue1中的源码。在vue1中提供了货币金额显示格式化的过滤器currency请在这里https://cdn.bootcdn.net/ajax/libs/vue/1.0.11/vue.js搜索currency关键字。 filters: {$:function(value, _currency) {// 全局匹配 三位连续且之后也是数值 的数值var digitsRE /(\d{3})(?\d)/g;value parseFloat(value);if (!isFinite(value) || !value value ! 0) return ;_currency _currency ! null ? _currency : ;// 保留两位小数并整体转成字符串var stringified Math.abs(value).toFixed(2);// 获取整数部分。-3表示倒数3位的位置var _int stringified.slice(0, -3);// 整数部分以3为基准长度划分剩下几位var i _int.length % 3;// 取出头部。// 如12345 ---- 12,var head i 0 ? _int.slice(0, i) (_int.length 3 ? , : ) : ;// 取出小数点部分// 如12345.67 ---- .67var _float stringified.slice(-3);var sign value 0 ? - : ;return _currency sign head _int.slice(i).replace(digitsRE, $1,) _float;}
}用自定义指令来完成搜索框自动获取焦点
directives: {// 属性名称(指令的名称)属性的值(指令的配置对象)myfocus: {inserted (el) {el.focus()}}
}
