【Vue】vue基础语法——自定义指令、过滤、组件和动画（内附详细案例代码）——day04

大家好，从今天开始，会每天分享vue学习的知识点，一起加油~

 Vue选项（会继续更新...）

• el 模板
• data数据
• methods方法
• directives指令
• filters过滤
• watch监听
• computed计算
• props属性
• created 创建完毕
• template 模板
• components组件

自定义指令（directives）

作用：操作dom，实例化第三方基于dom的插件

• 当被插入时候inserted
• 只绑定一次 bind
• 更新时候运行 update

课堂案例

    

        
自定义指令
        
        改变
    

    
    

代码运行结果 

过滤（管道）filters

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}}
    
    
    

运行结果

 

组件components

01组件概念

组件的组织：通常一个应用会以一棵嵌套的组件树的形式来组织

组件就是定义好的一功能模块

建议：多用props，少在组件中使用data（降低组件的耦合性）

 02组件作用：

1. 组件是vue的一个重要的特点
2. 实现多个写作开发
3. 通过组件划分降低开发的难度
4. 实现复用，降低重复劳动

03定义与使用

1.定义

注意：template有且只有一个根节点

const steper = {
`

`
}

2.在父组件中注册

components:{steper:steper}

3.在组件的模板中使用

 04传参

父传子

父：

子  props:{visible:{type:Boolean,default:false}}

子使用

注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）this.value

子传父

子 this.$emit("update:visible",false)

父 监听事件，修改值

05 课堂案例

注意：(以下代码是组件.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  文件

    
        
        
        
        
        
        
        
        
    
    
        

            
组件的插槽
            显示弹框
            
            
            
            

                

                    俺们是弹框的内容插槽
                    
其他内容也可以
                
            
        
        
    

02 index.js 文件 

//01定义组件
var model = {
    template: `

    

        
我是弹框标题
        x
        

            
        
    

`,
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
};

 代码运行

 

具名插槽

当一个组件中有很多地方要使用插槽时，就用具名插槽来区分

子组件

父组件      <组件名>

 简写

 案例代码

    
        
        
        
        
        
    
    
        

            
具名插槽（起名字的多个插槽）
            
$100
            
￥100⚪
            

            
                
                
            
            

            
                
                
            
        
        
    

结果运行

插槽的作用域 

 父组件要使用子组件中的值来改变插槽的内容

课堂案例

    
        
        
        
        
        
    
    
        

            
插槽的作用域（父组件自定义渲染子组件局部内容）
            
scope就是作用域包含的数据
            
                
            
            
                
            
            
                
            
        
        
    

运行结果

动画

两个状态的过渡

 transition 单个动画元素

• v-enter-active进入整个状态
• v-enter 进入开始
• v-enter-to 进入结束
• v-leave-active离开整个状态
• v-leave 离开开始
• v-leave-to 离开结束

方法1 

方法2

 方法3

 今天的分享就结束了~