方法

Vue的属性、方法、生命周期

Vue入门系列基础:属性、方法、生命周期讲解

2018-07-03侠课岛    初级拔高       

前端/前端必修/Vue快速入门 14     0     3743

Vue实例

    const App = new Vue({
        // 选择器
        el: '#main',
        // 数据
        data: {
            message: 'Hello Vue',
            number: 10,
        },
        // 计算属性
        computed: {
            getSqure: function () {
                return this.number * this.number * this.number;
            }
        },
        // 函数
        methods: {
            changeNumber: function() {
                this.number ++;
            },
        },
        // 监听器
        watch: {
            number: function(val, preVal) {
                console.log('我是新的值', val);
                console.log('我是旧的值', preVal);
            },
        }
    });
    console.log(App.getSqure);
    window.App = App;

生命周期(钩子函数)

    beforeCreate() {
        console.log('%cbeforeCreate', 'color: red', this.number);
        console.log('%cbeforeCreate', 'color: red', this.$el);
    },
    created() {
        console.log('%ccreated', 'color: green', this.number);
        console.log('%ccreated', 'color: green', this.$el);
    },
    mounted() {
        console.log('%cmounted', 'color: orange', this.number);
        console.log('%cmounted', 'color: orange', this.$el);
    },
    beforeUpdate() {
        console.log('%cbeforeUpdate', 'color: yellow', this.number);
        console.log('%cbeforeUpdate', 'color: yellow', this.$el);
    },
    updated() {
        console.log('%cupdated', 'color: blue', this.number);
        console.log('%cupdated', 'color: blue', this.$el);
    },
    beforeDestroy() {
        console.log('beforeDestroy', this.number);
        console.log('beforeDestroy', this.$el);
    },
    destroyed() {
        console.log('destroyed', this.number);
        console.log('destroyed', this.$el);
    }

    function destroy() {
        App.$destroy();
    }

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

14

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?