山西响应式网站建设设计,杭州市建设工程信用网,百度竞价推广代运营公司,专业营销网站建设公司一、计算属性
1、计算属性的概念
计算属性是依赖于源数据(data或者属性中的数据)#xff0c;在元数据的基础上进行逻辑运算后得到的新的数据#xff0c;计算属性要依赖于源数据#xff0c;源数据数据变化计算属性也会变化
2、计算属性的语法
在vue2中使用computed这个选…一、计算属性
1、计算属性的概念
计算属性是依赖于源数据(data或者属性中的数据)在元数据的基础上进行逻辑运算后得到的新的数据计算属性要依赖于源数据源数据数据变化计算属性也会变化
2、计算属性的语法
在vue2中使用computed这个选项完成计算属性的
templatedivh2购物车/h2tabletheadtrtd编号/tdtd商品/tdtd数量/tdtd价格/tdtd小计/td/tr/theadtbodytr v-foritem in filterShopcartList :keyitem.idtd{{item.id}}/tdtd{{item.name}}/tdtdbutton clickitem.num---/button{{item.num}}button clickitem.num/button/tdtd{{item.price}}/tdtd{{(item.price*item.num).toFixed(2)}}/td/tr/tbodytfoottrtd colspan5总价{{getTotalPrice}}/td/tr/tfoot/table/div
/template
script
export default {data(){return{shopcartList:[{id:1001,name:红富士苹果,price:3.69,num:1},{id:1002,name:威化饼干,price:1.69,num:1},{id:1003,name:康师傅方便面,price:5.21,num:1}]}},computed:{filterShopcartList:{//get方法是为了完成获取计算值后的属性get(){return this.shopcartList.filter(itemitem.num0)}},getTotalPrice:{get(){return this.filterShopcartList.reduce((prve,cur)prvecur.price*cur.num,0).toFixed(2)}}}
}
/script
styletable{border-collapse: collapse;}td{border:1px solid #999;padding: 10px;}
/style
2、计算属性的简写形式
1计算属性的标准写法很少用需要更改原数据时才用
computed:{计算属性名称{get{return 新的结果}}}
2计算属性的简单写法常用
computed:{计算属性名称{return 新的结果}}
templatedivh2购物车/h2tabletheadtrtd编号/tdtd商品/tdtd数量/tdtd价格/tdtd小计/td/tr/theadtbodytr v-foritem in filterShopcartList :keyitem.idtd{{item.id}}/tdtd{{item.name}}/tdtdbutton clickitem.num---/button{{item.num}}button clickitem.num/button/tdtd{{item.price}}/tdtd{{(item.price*item.num).toFixed(2)}}/td/tr/tbodytfoottrtd colspan5总价{{getTotalPrice}}/td/tr/tfoot/table/div
/template
script
export default {data(){return{shopcartList:[{id:1001,name:红富士苹果,price:3.69,num:1},{id:1002,name:威化饼干,price:1.69,num:1},{id:1003,name:康师傅方便面,price:5.21,num:1}]}},computed:{filterShopcartList:{//get方法是为了完成获取计算值后的属性get(){return this.shopcartList.filter(itemitem.num0)}},getTotalPrice:{get(){return this.filterShopcartList.reduce((prve,cur)prvecur.price*cur.num,0).toFixed(2)}}}
}
/script
styletable{border-collapse: collapse;}td{border:1px solid #999;padding: 10px;}
/style
3、计算属性的缓存特性
计算属性具有缓存作用在原数据不改变的情况下计算属性多次调用只有第一次进行计算后续都是从缓存中获取数据如果源数据变化之后计算属性就会重新进行计算。
4、setter和getter方法
templatedivdivfirstName:span{{firstName}}/span/divdivmiddleName:span{{middleName}}/span/divdivlastName:span{{lastName}}/span/divdivfullName:span{{name}}/span/divbutton clicknamezhang san fengchangeFullName/button/div
/template
script
export default {data(){return{firstName:zhai,middleName:ji,lastName:zhe}},computed:{name:{get(){return this.firstName this.middleName this.lastName},set(val){//计算属性是不能改的console.log(val,val);this.firstNameval.split( )[0]this.middleNameval.split( )[1]this.lastNameval.split( )[2]}}}
}
/script
style langscssdiv{span{color: blue;}}
/style
三、侦听器
1、侦听器的概念
在vue中当我们对data的数据或者计算属性进行变化的时候专门一个选项可以随时监听data或者计算属性的变化从而完成相应的逻辑
2、监听器的语法
监听器的语法有两种形式 简写写法
watch:{//newval:变化之后的数据//oldval:变化之前的数据监视的数据名(newval,oldval){
}
}
案例监视计数器num的变化
export default {data(){return{num:0}},watch:{num(newval,oldval){console.log(newval,oldval);}}
} 监听器的标准写法 语法 watch:{监听的数据名:{//监听的逻辑处理方法handler(newval,oldval){
},//是否深度监听deep:true|false,//是否立即监听immediate:true|false}}
案例使用标准写法完成计数器的监听
export default {data(){return{num:0}},watch:{num:{handler(newval,oldval){console.log(newval,oldval);}}}
}
3、监听对象中属性变化
如果要监听对象中属性的变化可以有两种方式
第1种方式通过对象名.属性名的方式
templatedivdiv{{obj.a}} button clickobj.aa/button/divdiv{{obj.b}} button clickobj.ba/button/divdiv{{obj.c}} button clickobj.ca/button/div/div
/template
script
/* watch:{对象名.属性名(newval,oldval){}}
*/
export default {data(){return{obj:{a:10,b:20,c:30}}},watch:{obj.a(newval,oldval){console.log(obj.a,newval,oldval);},obj.b(newval,oldval){console.log(obj.b,newval,oldval);},obj.c(newval,oldval){console.log(obj.c,newval,oldval);}}
}
/script
如上这种方式如果属性过多它就太麻烦了 方式2通过深度监听的方式来完成对对象的监听
export default {data(){return{obj:{a:10,b:20,c:30}}},computed:{//新定义一个计算属性newObj,该计算属性的作用是将data对象中的obj做一个深拷贝newObj(){//这种深拷贝对于如果一个对象中有函数获知时间类型是无法进行深拷贝//JSON.stringify将JSON格式字符串对象转换为js对象(属性名没有双引号)//JSON.parse将JSON字符串转为对象return JSON.parse(JSON.stringify(this.obj))}},watch:{//obj:要监听的对象newObj:{//执行监听的具体钩子函数handler(newval,oldval){console.log(newval,oldval);},//开启深度监听deep:true}}
} 4、立即监听设置
通过对watch中 immediate设置为true就会开启立即监听 watch:{//obj:要监听的对象newObj:{//执行监听的具体钩子函数handler(newval,oldval){console.log(newval,oldval);},//开启深度监听deep:true,//开启立即监听immediate:true}}
四、过滤器
1、什么是过滤器
vue中定义过滤器主要用于文本格式化具体可以完成如下功能 日期的格式化 货币格式化 小数点精确度的截取 大小写首字母转换等
注意vue2中过滤器vue3中将过滤去掉了
2、过滤器的分类
按照作用范围可以将过滤器分成两大类 全局过滤器针对项目中所有组件都有用 私有过滤器局部过滤器只针对当前组件有效
2.1、定义私有私有过滤器 定义私有过滤器
export default{data(){},methods{},//filters:配置对象filters:{过滤器的名称(参数){}}
} 如何调用过滤器
使用过滤器的时候可以在两种情况下使用第1种情况在插值表达式中使用第2种在属性中使用
在插值表达式中使用
{{message|过滤器的2名称|过滤器2的名称}}
message代表是输出数据对象|这个竖杠表示的就是一个管道符使用这个符号将插值表达式和过滤器连接在一起
使用v-bind在属性中使用
div v-bind:idid的变量|过滤器的名称/div
案例通过身份证获取格式化出生日期
templatedivdiv身份证号:{{idcard}}/divdiv生日:{{idcard|birthday}}/div/div
/templatescript
export default {data(){return{idcard:610122198404084030}},filters:{birthday(val){return val.slice(6,10)-val.slice(10,12)-val.slice(12,14)}}
}
/script
2.2、定义全局过滤器
定义全局过滤器的语法
Vue.filter(过滤器的名称,function(val){ return result})
定义全局过滤器的步骤 在src下创建一个filters的文件夹 在src/filters文件夹下定义过滤器的js文件
//首先先导入Vue
import Vue from vue
Vue.filter(capitalize,function(val){return val.charAt(0).toUpperCase()val.slice(1)
}) 在main.js中导入定义全局过滤器
import Vue from vue
import App from ./App.vue
import ./filters/capitalize //在此处导入Vue.config.productionTip false
new Vue({render: h h(App),
}).$mount(#app) 在组件中可以使用|的方式来调用过滤器
五、自定义指令
之前我们已经接触过指令在但是我们接触这些指令都是vue提供的内置指令每一种指令有着不同的用途如果开发者要想自定义指令就可以使用自定义指令完成不同功能的封装
1、自定义指令的分类 全局自定义指令可以作用域全局所有的组件 私有自定义指令只能作用域该组件
1私有自定义指令的语法
templatedivh2 v-mycolorcolor clickcolor#0000ffHello Giles/h2!-- h1 v-mycolorcolor#ff0000Hello Giles/h1h1 v-mycolorcolor#00ff00Hello Giles/h1 --/div
/templatescript
export default {data(){return{color:orange}},directives:{mycolor:{/*当我们将指令绑定到标签的时候会调用一次在此方法中完成初始化功能el:所绑定指令(自定义指令)所在的DOM元素bindings:自定义指令的配置对象modifiers:指令的修饰符name:指令的名称(不含v-和修饰符的)rawName:指令的全名(v-的前缀和修饰符)value:指定的所传递的值vNode:更新之后的虚拟DOM节点对象oldVnode:更新之前的虚拟DOM节点*/bind(el,bindings,vNode,oldVnode){console.log(bindings,bindings.value);el.style.colorbindings.value},componentUpdated(el,bindings,vNode,oldVnode){console.log(vNode,vNode);console.log(oldVnode,oldVnode);el.style.colorbindings.valueel.innerHTMLHello Woniuxy}}}
}
/scriptstyle/style
2全局自定义指令的定义步骤
步骤 在src目录下创建directives文件夹然后在文件夹下创建自定义指令
import Vue from vue
Vue.directive(ellipses,{bind(el,bindings){let w;if(bindings.value){wbindings.value.width}else{w100px}el.style.widthwel.style.whiteSpacenowrapel.style.textOverflowellipsisel.style.overflowhidden}
}) 在main.js中引入自定义指令
import Vue from vue
import App from ./App.vue
import ./directives/ellipses
Vue.config.productionTip false
new Vue({render: h h(App),
}).$mount(#app) 在组件中应用 div v-ellipses白日依山尽黄河入海流欲穷千里目,更上一层楼/divdiv v-ellipses{width:150px}白日依山尽黄河入海流欲穷千里目,更上一层楼/divdiv v-ellipses{width:200px}白日依山尽黄河入海流欲穷千里目,更上一层楼/div
2、自定义指令的案例
1完成水印功能
import Vue from vue
Vue.directive(waterMarker,{bind(el,bindings){let canvsdocument.createElement(canvas)//设置画布的大小canvs.width250canvs.height150//获取画笔的上下文对象let cxtcanvs.getContext(2d)cxt.rotate((20*Math.PI)/180)cxt.fillStylebindings.value.colorcxt.font48px 宋体cxt.fillText(bindings.value.content,canvs.width/10,canvs.height/2)el.appendChild(canvs)}
})
2完成画板功能
import Vue from vue
/*Vue.directive是用于定义全局指令的参数有两个参数1自定义指令名称参数2自定义指令的配置对象
*/
Vue.directive(draw,{bind(el,bindings){console.log(bindings.value);//创建Canvas对象let cvsdocument.createElement(canvas)//给画布设置宽和高cvs.widthbindings.value.widthcvs.heightbindings.value.height//获取上下文对象let cxtcvs.getContext(2d)//给画笔绑定onmousedowncvs.onmousedownfunction(e){//获取鼠标点下去的坐标cxt.moveTo(e.pageX-this.offsetLeft,e.pageY-this.offsetTop)//当鼠标移动时候cvs.onmousemovefunction(e){cxt.lineTo(e.pageX-this.offsetLeft,e.pageY-this.offsetTop)cxt.stroke()}cvs.onmouseupfunction(){cvs.onmousemovenull}}el.appendChild(cvs)}
})
