vue-cli学习笔记-常用属性与方法

事件绑定监听

事件通常以v-on开头例如 v-on:xxx=“func” v-on:click=“function” 鼠标点击事件可以简写为 @click=“function” 也可以携带参数：例如 @click=“function(test)”

默认事件形参: event 隐含属性对象: event 在原生事件中， event是事件对象在自定义事件中，

代码语言：javascript复制

<template>
        <div>
            <button @click="clickBtn($event)">点击</button>
        </div>
</template>

<script>
    export default {
        name: "DealEvent",
        methods:{
            clickBtn(event){
                alert(event)
            }
        }
    }
</script>

<style scoped>

</style>

事件修饰符

.prevent 阻止事件的默认行为 event.preventDefault()
.stop 停止事件冒泡 event.stopPropagation()

具体的可以参考官方文档

示例：

.prevent

.stop 沒有添加.stop之前父div和子div都有click事件当点击父级div的时候子级不会触发，当点击子级click事件的时候父级或被触发（事件冒泡）

在子级加上@click.stop后父级就不会被触发了

按键修饰符

.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right 详见官方文档

示例：键盘事件：回车

获取keycode 回车的keycode是 13

金钱过滤案例

局部过滤

代码语言：javascript复制

<template>
    <div>
        <h3>格式化人民币</h3>
        <p>{{money| moneyFormat}}</p>
        <p>{{price| moneyFormat}}</p>
    </div>
</template>

<script>
    export default {
        name: "money",
        data(){
            return{
                money:22222,
                price:189.121
            }
        },
        filters:{//局部过滤
            moneyFormat(value){//过滤金钱
                 return '￥' Number(value).toFixed(2) //过滤保留两位小数   toFixed()
            }
        }
    }
</script>

全局过滤在main.js配置

时间格式化案例

引入第三方插件 cmd命令行：npm i moment --save

模板

格式化日期：

拓展：每隔一秒刷新日期

过度与动画

过渡示例：

代码语言：javascript复制

<template>
    <div>
        <button @click="show=!show">切换</button>
        <transition name="fade">
        <div class="box" v-if="show">过渡动画</div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "TrancesitionAnimate",
        data(){
            return{
                show:false
            }
        }
    }
</script>

<style scoped>
    .box{
        width: 200px;
        height: 200px;
        background-color: #8bee54;
    }
    .fade-enter, .fade-leave-to{/*v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。*/
        opacity: 0;
        transform: translateX(200px);
    }
    /*v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，
    在元素被插入之前生效，在过渡/动画完成之后移除。
    这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。*/
    /*
    v-leave-active：定义离开过渡生效时的状态。
    在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，
    在过渡/动画完成之后移除。
    这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。*/
    .fade-enter-active, .fade-leave-active{
        transition: all 2s;
    }
</style>

动画

代码语言：javascript复制

<template>
    <div>
        <button @click="flag=!flag">图片跳动</button>
        <p></p>
        <transition name="bounce">
            <img :src="pic" alt="" width="300" v-if="flag">
        </transition>
    </div>
</template>

<script>
    import pic from '@/assets/24.png' //动态引入图片
    export default {
        name: "TrancesitionAnimate2",
        data(){
            return{
                pic:pic,
                flag:true
            }
        }

    }
</script>

<style scoped>
    .bounce-enter-active{
        animation: brunce 1.5s;
    }
    .bounce-leave-active{
        animation: brunce 1.5s reverse;
    }
    @keyframes brunce {
        0%{
            transform: scale(0);
        }
        25%{
            transform: scale(0.2);
        }
        50%{
            transform: scale(0.5);
        }
        75%{
            transform: scale(0.7);
        }
        100%{
            transform: scale(1);
        }
    }
</style>

集成animate.css第三方动画 cmd命令：npm install animate.css --save

或者用cdn引入

代码语言：javascript复制

<template>

    <div>
        <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
        <button @click="flag=!flag">图片跳动</button>
        <p></p>
        <transition
                name="custom-classes-transition"
                enter-active-class="animated tada"
                leave-active-class="animated bounceOutRight"
        >
            <img :src="pic" alt="" width="300" v-if="flag">
        </transition>
    </div>
</template>

<script>

    import pic from '@/assets/24.png' //动态引入图片
    //import animate from 'animate.css'
    export default {
        name: "TrancesitionAnimate3",
        data(){
            return{
                pic:pic,
                flag:true
            }
        }

    }
</script>

<style scoped>


</style>

animate github地址：链接

生命周期

图例：

2. 钩子函数

初始化显示只会调用一次 beforeCreate() created() beforeMount() mounted()
更新状态调用多次 beforeUpdate() updated()
销毁 vue 实例只会调用一次 beforeDestory() destoryed()
常用的生命周期方法
1. created()/mounted() 发送ajax请求，启动定时器等异步任务
2. beforeDestory() 收尾操作，比如: 清除定时器、数据缓存

cli 动画函数事件学习笔记

0 人点赞