大家好,从今天开始,会每天分享vue学习的知识点,一起加油~
作用:操作dom,实例化第三方基于dom的插件
自定义指令
vue过滤器就是用来过滤模型数据,在显示之前进行数据处理和筛选。
语法:{{ data | filter1(参数) | filter2(参数) }}
过滤或管道
{{100}}--{{100.00}}
{{3.1415926}}--{{3.14}}
{{3.1415926|fix}}
{{3.15926927|fix(5)}}
{{1000|fix(5)}}
{{'2022-09-20'}}-->{{'2天前'}}
{{'2021-09-20'|date}}
{{'2020-09-20'|date}}
{{'2021-12-30'|date}}
组件的组织:通常一个应用会以一棵嵌套的组件树的形式来组织
组件就是定义好的一功能模块
建议:多用props,少在组件中使用data(降低组件的耦合性)
1.定义
注意:template有且只有一个根节点
const steper = {
`
`
}
2.在父组件中注册
components:{steper:steper}
3.在组件的模板中使用
父:
子 props:{visible:{type:Boolean,default:false}}
子使用
注意:vue是单向数据流,父组件传递给子组件的props是只读(不能修改)this.value
子 this.$emit("update:visible",false)
父 监听事件,修改值
注意:(以下代码是组件.html 的 代码)
组件传参
父传子
以下代码是文件夹compontents 的 step.js 的代码
//01 定义组件
var step = {
template: `
`,
props: {
//props 接收父组件传递过来的参数
value: {
// 参数名称value
type: Number,
default: 1, //默认值是1 如果不传value的值是1
},
//接收父组件传递过来参数最大值,最小值,步进值
min: {
type: Number,
default: 1,
},
max: {
type: Number,
default: 999,
},
step: {
type: Number,
default: 1,
},
},
data() {
return {
count: this.value, //count的默认值是父组件传过来的参数value
};
},
watch: {
count: {
//子传父,通过emit 发送事件
handler() {
//限定最大值,最小值
if (this.count >= this.max) {
this.count = this.max;
}
if (this.count <= this.min) {
this.count = this.min;
}
this.$emit("input", this.count);
},
deep: true,
},
value: {
handler() {
//监听value值得变化更新count(可选)
this.count = this.value;
},
},
},
};
//为什么不直接使用this.value 和input框绑定
//答:父组件传到子组件的参数必须是只读
//当count 的数据发生变化的时候通知父组件更新数据
组件的嵌套内容
//父组件
//子组件在模板中使用
template:`
`
01 组件.html 文件
Document
组件的插槽
俺们是弹框的内容插槽
其他内容也可以
02 index.js 文件
//01定义组件
var model = {
template: `
我是弹框标题
`,
props: {
visible: {
type: Boolean,
default: false,
},
},
};
当一个组件中有很多地方要使用插槽时,就用具名插槽来区分
子组件
父组件 <组件名>
简写
Document
具名插槽(起名字的多个插槽)
$100
¥100⚪
¥
元
$
父组件要使用子组件中的值来改变插槽的内容
Document
插槽的作用域(父组件自定义渲染子组件局部内容)
scope就是作用域包含的数据
{{scope.item}}
{{scope.item}}
{{scope.item}}
两个状态的过渡
transition 单个动画元素
今天的分享就结束了~