Vue初级
过滤器
作用: 过滤数据
例如: 2022-08-02 转换成 2022/08/02
10元 转换成 ¥10
1.声明过滤器
new Vue({
el:'',
data:{
//实参数据,filters会接收
},
filters:{
方法名(形参){
方法体
return 过滤后的结果
注意: 关于这个返回值,一定要有返回值,如果没有的话,页面不会渲染任何效果
返回的数据就是过滤后的数据,经过返回后,就会在页面上渲染过滤后的数据
}
}
})
2.使用过滤器
<div id='app'>
{{要过滤的数据 | 过滤器方法名}}
//表示:使用过滤器里面的方法过滤数据
//过滤后的内容再次过滤
{{要过滤的数据 | 过滤器方法名1 | 过滤器的方法2}}
</div>
自定义指令
1.声明的语法格式:
new Vue({
el:'',
directives:{
'自定义指令名':{
//bind触发时机:当自定义指令被使用的时候会自动触发该函数
bind(el,binding){
el: 绑定该指令的标签,
binding: {name:'自定义指令名',rawName:'v-demo',value:'自定义指令的指令值',expression:'指令值的键'}
},
//update触发时机:当自定义指令值发生改变的时候会自动触发函数
update(el,binding){
//同上
}
}
//bind和update都是钩子函数: 就是不需要手动调用,满足条件会自动触发
}
})
2.自定义指令的使用
<元素 v-自定义指令='指令值'></元素>
//自定义指令的指令值必须是一个变量(键)
组件
全局组件
//封装在new Vue对象外的组件,可以在任何对象中使用
1) 使用
<div id='app'>
<组件名></组件名>
</div>
2) 声明
//注意: 必须在new Vue对象之前声明
//组件名: 推荐使用小驼峰命名 xxxYyy
//小驼峰命名,在使用组件时,需要写成<xxx-yyy></xxx-yyy>,方便与系统标签区分
Vue.component('组件名',{
template:'html代码'
或
template:'#模板id名'
})
new Vue({
el:'#app',
data:{}
})
3) 模板的定义
//要把封装好的html代码单独存储起来,放在<template></template>中
//<template></template>放在</body>后面
<body></body>
<template id='模板id名'>
//注意: 在模板中只有一个根元素(自定义一个标签,div或table等)
<div>
<元素></元素>
<元素></元素>
<元素></元素>
</div>
</template>
局部组件
//声明在new Vue中,只能在当前Vue对象的操作范围内使用
1) 声明局部组件
new Vue({
el:'',
data:{},
components:{
'组件名':{
template:'#模板id',
data(){
return{
键1:'值1',
键2:'值2',
...
}
}
}
}
})
//在#app范围内,只能解析vue对象中的数据
//在#模板id范围内,只能解析局部组件中的数据
组件的嵌套
//组件中可以声明子组件,一个组件中也可以声明多个同级组件
//1. 父组件在使用时需要在 #app范围内使用
//2. 子组件在使用时需要在 父组件中使用
//当有多个组件时,即时组件之间是嵌套关系,在模板声明时,也都是同级的
1. 模板的设置
<body>
<div id='#app'>
<父组件1></父组件1>
<父组件2></父组件2>
</div>
<body>
<template id='父组件1模板id名'>
<唯一根元素></唯一根元素>
<子组件></子组件>
</template>
<template id='父组件2模板id名'>
<唯一根元素></唯一根元素>
<template>
<template id='父组件1中的子组件模板id'>
<唯一根元素></唯一根元素>
<template>
2. 父子组件的声明
new Vue({
el:'#app',
data:{},
components:{
'父组件名1':{
template:'#父组件1模板id',
components:{
'子组件名':{
template:'#子组件模板id'
}
}
}
'父组件名2':{
template:'#父组件2模板id'
}
}
})
组件通讯(传值)
父传子
//理解: 在子组件的模板中使用父组件中的数据
//思路: 在声明子组件的位置,设置一个props属性,接收父组件传递的数据,作为自定义属性
//然后在子组件的模板中使用这个自定义属性,就等价于使用父组件中的数据
语法格式:
1)模板设置
<div id='app'>
<父组件></父组件>
</div>
<template id='父组件模板'>
<div>
<子组件 :自定义属性='父组件的数据'></子组件>
</div>
</template>
<template id='子组件模板'>
<div>
{{自定义属性}}
</div>
</template>
2)自定义属性设置
new Vue({
el:"#app",
data:{},
methods:{},
components:{
'父组件名':{
template:'#父组件的模板id',
data(){
return{
父键:'父组件数据'
}
},
components:{
'子组件名':{
template:'#子组件模板id',
data(){
return{
子键:'子组件的数据'
}
},
props:{
'自定义属性':{
type(类型):String|Array|Object...,
default(默认值):''
}
}
}
}
}
}
}
})
浙公网安备 33010602011771号