网站被黑客攻击怎么办,网站工程师的职责,百度app,淘宝淘宝网页版登录入口一.props验证
在封装组件时对外界传递过来的props数据进行合法性校验#xff0c;从而防止数据不合法问题。 1.基础类型检查
String,Number,Boolean,Array,Object,Date,Function,Symbol
2.多个可能的类型
3.必须项校验
4.属性默认值
5.自定义验证函数
template从而防止数据不合法问题。 1.基础类型检查
String,Number,Boolean,Array,Object,Date,Function,Symbol
2.多个可能的类型
3.必须项校验
4.属性默认值
5.自定义验证函数
templatediv父组件/divDemoSon :msgmsg :titletitle typeabc/DemoSon
/template
script
import DemoSon from ./son.vue
export default {name:demo,components:{DemoSon},data(){return{msg:111,title:abc}}
}
/scripttemplatediv子组件/divp{{ msg }}{{ title }}/p
/template
script
export default {name:demo-son,props:{msg:{type:[Number,String],required:true,default:10},title:String,type:{validator(value){// true成功false失败return [success,warning,danger].indexOf(value)!-1}}}
}
/script二.计算属性computed
计算属性本质上是一个function函数可以监听data中数据的变化并return一个计算后的值供组件渲染dom时使用。
计算属性会缓存计算的结果只有在计算属性的依赖项发生变化时才会重新计算。
计算属性只能当作普通数据项使用不能当作方法调用不能使用括号调用。
templatedivinput typetext v-model.numbernum/divdiv{{ plus }}/div
/templatescriptexport default {name:demo,data(){return{num:111}},computed:{plus(){return this.num*2}}}/script
templatedivtable bordertrtd classgoodState状态/tdtd classgoodId#/tdtd classgoodName名称/tdtd classgoodPrice单价/tdtd classgoodNum数量/tdtd classgoodTime价格/tdtd classgoodAction操作/td/trtr v-for(item,index) in goods.data :keyitem.idtd classgoodStateinput typecheckbox v-modelitem.state :iditem.idlabel :foritem.id{{item.statetrue?上架:下架}}/label/tdtd classgoodId{{index1}}/tdtd classgoodName{{item.name}}/tdtd classgoodNum{{item.price}}/tdtd classgoodNum{{item.num}}/tdtd classgoodTime{{item.num*item.price}}/tdtd classgoodActionb clickaddFn(item.id,item.num)/bb clickminusFn(item.id,item.num)-/b/td/trtrtd总数{{ number }}/tdtd总计{{ total }}/td/tr/table/div
/templatescript setup
import { ref,reactive, computed } from vue
const goodsreactive({data:[{id:1,name:苹果,state:true,price:2,num:0,time:2020-11-03 11:00:00},{id:2,name:梨,state:true,price:2,num:0,time:2020-11-03 11:00:00},{id:3,name:香蕉,state:true,price:2,num:0,time:2020-11-03 11:00:00}]
})
const minusFn(id,num){if(num0){for(let i0;igoods.data.length;i){if(goods.data[i].idid){goods.data[i].num num-1}}
}
}
const addFn(id,num){for(let i0;igoods.data.length;i){if(goods.data[i].idid){goods.data[i].num num1}}
}
const number computed((){let n0;goods.data.forEach((item){if(item.state){nitem.num}})return n;
})
const total computed((){let sum0;goods.data.forEach((item){if(item.state){sumitem.num*item.price}})return sum;
})/scriptstyle scoped langscsstd{width: 200px;height: 40px;}b{margin-right: 20px;}
/style
三.自定义事件
1.声明自定义事件
2.触发自定义事件
3.监听自定义事件
templatediv classcard{{ count }}Son changeCountchangeCount/Son/div
/template
script
import Son from ./son.vue
export default{name:index,components: {Son},data(){return{count:0}},methods:{changeCount(str){this.count str}}
}
/scripttemplatebutton typebutton clickclickFn按钮/button
/template
script
export default{name:son,emits:[changeCount],methods:{clickFn(){this.$emit(changeCount,1)}}
}
/script
templatediv classcard{{ count }}Son changeCountchangeCount/Son/div
/template
script setup
import { ref } from vue
import Son from ./son.vue
const count ref(0)
const changeCount (str){count.value str
}
/scripttemplatebutton typebutton clickclickFn按钮/button
/template
script setup
const emit defineEmits(changeCount)
const clickFn () {emit(changeCount,1)
}
/script
四.组件上v-model
1.父传子
a.父组件通过v-bind属性绑定的形式把数据传递给子组件
b.子组件中通过props接受子组件传递过来的数据
templatediv父组件/divDemoSon :msgmsg/DemoSon
/template
script
import DemoSon from ./son.vue
export default {name:demo,components:{DemoSon},data(){return{msg:111}}
}
/scripttemplatediv子组件/divp{{ msg }}/p
/template
script
export default {name:demo-son,props:{msg:{type:[Number,String],required:true,default:10}}
}
/script
2.子传父
a.在v-bind指令前添加v-model指令
b.在子组件中声明emits自定义事件格式为update:xxx
c.调用$emit()触发自定义事件更新父组件中的数据
templatediv classcard{{ count }}Son v-model:numbercount/Son/div
/template
script
import Son from ./son.vue
export default{name:index,components: {Son},data(){return{count:0}}
}
/scripttemplate{{ number }}button typebutton clickclickFn按钮/button
/template
script
export default{name:son,props:[number],emits:[update:number],methods:{clickFn(){this.$emit(update:number,this.number1)}}
}
/script
