好资源导航 » 文章资讯 » vue常用指令代码实例总结

vue常用指令代码实例总结

2023-07-28 14:22:13 195

vue常用内置指令





12_指令_内置指令





{{content}}


abcd
提示

newVue({ el:'#example', data:{ content:'百度一下' }, methods:{ hint(){ alert(this.$refs.msg.innerHTML) } } })






Document





百度一下


{{name}}




按钮

{{arr[1]}}

{{users[1].name}}

计算属性和监视





03_计算属性和监视




姓:

名:


姓名1(单向):

姓名2(单向):

姓名3(双向):

{{fullName1}}
{{fullName1}}

constvm=newVue({ el:'#demo', data:{ firstName:'A', lastName:'B', fullName2:'A-B' }, //计算属性配置:值为对象 computed:{ fullName1:function(){//属性的get() returnthis.firstName+'-'+this.lastName; }, fullName3:{ //当获取当前属性值时自动调用,将返回值(根据相关的其它属性数据)作为属性值 get(){ returnthis.firstName+'-'+this.lastName }, //当属性值发生了改变时自动调用,监视当前属性值变化,同步更新相关的其它属性值 set(value){//fullName3的最新value值A-B23 //更新firstName和lastName constnames=value.split('-') this.firstName=names[0] this.lastName=names[1] } } }, watch:{ //配置监视firstName firstName:function(value){//相当于属性的set //更新fullName2 this.fullName2=value+'-'+this.lastName } } }) //监视lastName vm.$watch('lastName',function(value){ //更新fullName2 this.fullName2=this.firstName+'-'+value })

列表渲染






Document






{{item}}




{{index}}---{{item}}



{{user.name}}---{{user.age}}

add按钮
del按钮

class&style绑定





04_class与style绑定





1.class绑定::class='xxx'
xxx是字符串
xxx是对象
xxx是数组
2.style绑定
:style="{color:activeColor,fontSize:fontSize+'px'}"
更新

newVue({ el:'#demo', data:{ myClass:'classA', hasClassA:true, hasClassB:false, activeColor:'red', fontSize:'20px' }, methods:{ update(){ this.myClass='classB' this.hasClassA=!this.hasClassA this.hasClassB=!this.hasClassB this.activeColor='yellow' this.fontSize='30px' } } })

条件渲染





08_条件渲染




表白成功
表白失败

求婚成功
求婚失败
切换



newVue({
el:'#demo',
data:{
ok:true,
}
})

事件处理





07_事件处理




1.绑定监听
test1
test2
test3
2.事件修饰符

百度一下




3.按键修饰符






newVue({
el:'#example',
data:{
},
methods:{
test1(event){
alert(event.target.innerHTML)
},
test2(msg){
alert(msg)
},
test3(msg,event){
alert(msg+'---'+event.target.textContent)
},
test4(){
alert('点击了链接')
},
test5(){
alert('out')
},
test6(){
alert('inner')
},
test7(event){
console.log(event.keyCode)
alert(event.target.value)
}
}
})

表单数据绑定





08_表单输入绑定






用户名:


密码:


性别:

女

男

爱好:

篮球

足球

乒乓

城市:

未选择
{{city.name}}


介绍:








newVue({
el:'#demo',
data:{
username:'',
pwd:'',
sex:'男',
likes:['foot'],
allCitys:[{id:1,name:'BJ'},{id:2,name:'SS'},{id:3,name:'SZ'}],
cityId:'2',
info:''
},
methods:{
handleSubmit(){
console.log(this.username,this.pwd,this.sex,this.likes,this.cityId,this.info)
alert('提交注册的ajax请求')
}
}
})

生命周期





09_Vue实例_生命周期




destoryvue
尚硅谷IT教育



newVue({
el:'#test',
data:{
isShow:true
},
beforeCreate(){
console.log('beforeCreate()')
},
created(){
console.log('created()')
},
beforeMount(){
console.log('beforeMount()')
},
mounted(){
console.log('mounted()')
//执行异步任务
this.intervalId=setInterval(()=>{
console.log('-----')
this.isShow=!this.isShow
},1000)
},
beforeUpdate(){
console.log('beforeUpdate()')
},
updated(){
console.log('updated()')
},
beforeDestroy(){
console.log('beforeDestroy()')
//执行收尾的工作
clearInterval(this.intervalId)
},
destroyed(){
console.log('destroyed()')
},
methods:{
destroyVue(){
this.$destroy()
}
}
})

过渡，动画





10_过渡&动画1





Toggle

hello




Toggle2

hello




newVue({
el:'#demo',
data:{
show:true
}
})
newVue({
el:'#demo2',
data:{
show:true
}
})

过滤器





11_过滤器





显示格式化的日期时间
{{time}}
最完整的:{{time|dateString}}
年月日:{{time|dateString('YYYY-MM-DD')}}





12_指令_自定义指令














//注册一个全局指令
//el:指令所在的标签对象
//binding:包含指令相关数据的容器对象
Vue.directive('upper-text',function(el,binding){
console.log(el,binding)
el.textContent=binding.value.toUpperCase()
})
newVue({
el:'#test',
data:{
msg:"ILikeYou"
},
//注册局部指令
directives:{
'lower-text'(el,binding){
console.log(el,binding)
el.textContent=binding.value.toLowerCase()
}
}
})
newVue({
el:'#test2',
data:{
msg:"ILikeYouToo"
}
})

本文主要介绍了vue常用指令代码实例，更多关于vue常用指令请查看下面的相关链接

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue常用指令代码实例总结

1.class绑定::class='xxx'

2.style绑定

1.绑定监听

2.事件修饰符

3.按键修饰符

显示格式化的日期时间

热门推荐

随机推荐