Vue(6)

最新推荐文章于 2024-08-03 20:57:01 发布

蓝搜香菇

最新推荐文章于 2024-08-03 20:57:01 发布

阅读量663

点赞数 15

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/daiism/article/details/137723177

版权

过滤器

局部过滤器new Vue( { filters : { 名称(value){ } } } )，全局过滤器Vue.filter( “名称”,function ( value ) { } )
返回一个新的数据
使用时|名称, 多个过滤器串联，拿取的值是前一个

<body>
    <div id="app">
        <h1>{{time}}</h1>
        <h2>{{times}}</h2>
        <h3>{{time|newDates()}}</h3>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                time:Date.now(),
                times:new Date(),
            }
        },
        methods: {
            
        },
        // 过滤器
        filters:{
            newDates(value,str="YYYY年MM月DD日 HH:mm:ss"){
                let a = parseInt(value/1000/60/60/24/366);
                let b = parseInt((value/1000/60/60/24/366-a)*(12));
                let c = (value/1000/60/60/24/366-a)*366-b*30;
                            // 小数月*365 = 天
                console.log(a+1970);
                console.log(b);
                console.log(c);
            }
        },
        // 自定义指令
        directives:{

        },
        // 计算属性
        computed:{

        },
        // 监听属性
        watch:{

        },
    })
</script>

生命周期

生命周期函数，钩子函数
生命周期函数命名不能修改
this指向Vue实例(vm)

<body>
    <div id="app">
        <h1>{{time}}</h1>
        <h1>{{time|times}}</h1>
        <h1>{{time|times|myTime}}</h1>
        <h1 v-show="bool" class="box">{{userName}}</h1>
        <button @click="func()">点击</button>
        <hr>
        <h1 :style="{opacity}">我是测试文本</h1>
        <button @click="opacity=1">点击显示</button>
        <button @click="stop()">停止</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    Vue.filter("myTime",function(value){
        return value.substr(0,11);
    })
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                time:Date.now(),
                userName:"张三",
                bool:true,
                opacity:1,
                timeValue:"",
            }
        },
        methods: {
            sum(){
                return 100;
            },
            func(){
                this.userName = "9999"
            },
            stop(){
                this.$destroy();
            }
        },
        beforeCreate() {
        },
        created() {
        },
        beforeMount() {
           
        },
        mounted() {
            this.timeValue = setInterval(()=>{
                this.opacity-=0.01;
                if(this.opacity<=0){
                    this.opacity=1;
                }
            },10)
        },
        beforeUpdate() {
        },
        updated() {
        },
        beforeDestroy() {
            clearInterval(this.timeValue);
            console.log("触发了销毁前");
        },
        destroyed() {
            console.log("触发了销毁后");
        },
    console.log(vm);
</script>

常用的值	作用
beforeCreate	初始化之前,不能获取data中的数据
created	初始化之后,获取data中的数据
beforeMount	解析前 \ 挂载前
mounted	解析后 \ 挂载后
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后