Vue的属性、方法、生命周期实例代码详解

Vue是一种流行的JavaScript框架，在前端开发中被广泛使用。在Vue的学习过程中，理解Vue的属性、方法以及生命周期是非常重要的。下面是Vue的属性、方法以及生命周期的详细讲解。

属性

el

el属性是Vue实例挂载的元素。可以是CSS选择器、HTML元素或DOM对象。

<div id="app"></div>

var vm = new Vue({
    el: '#app'
});

在上面的例子中，Vue实例被挂载在id为"app"的div元素上。

data

data属性定义了Vue实例的数据对象。Vue会将data对象中的所有属性代理到Vue实例上，所以我们可以直接通过this访问data对象中的属性。

<div id="app">{{ message }}</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!'
    }
});

在上面的例子中，Vue实例的data属性包含了一个名为message的属性，并将其单向绑定到HTML中。

computed

computed属性定义了Vue实例计算属性对象。计算属性是一种在属性被访问时自动计算的属性。

<div id="app">{{ reversedMessage }}</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!'
    },
    computed: {
        reversedMessage: function() {
            return this.message.split('').reverse().join('');
        }
    }
});

在上面的例子中，Vue实例的computed属性包含了一个名为reversedMessage的计算属性，返回反转后的消息字符串。

methods

methods属性定义了Vue实例的方法对象。Vue实例的方法可以在模板中被调用。

<div id="app">
    <button v-on:click="reverseMessage">Reverse Message</button>
    <p>{{ message }}</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!'
    },
    methods: {
        reverseMessage: function() {
            this.message = this.message.split('').reverse().join('');
        }
    }
});

在上面的例子中，Vue实例的methods属性包含了一个名为reverseMessage的方法，用来反转消息字符串。

生命周期

Vue实例有一些特定的生命周期钩子函数，可以在实例生命周期的不同阶段执行自定义代码。

created

created生命周期钩子函数在实例创建之后立即调用。在这个阶段，实例已经完成了数据绑定、计算属性初始化以及DOM元素的挂载。

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!'
    },
    created: function() {
        console.log('Vue实例已创建！');
    }
});

在上面的例子中，在Vue实例被创建后，created生命周期钩子函数会被调用，并输出一条日志。

mounted

mounted生命周期钩子函数在实例挂载后调用。在这个阶段，Vue实例已经完成了真实DOM挂载，可以访问DOM元素。

<div id="app"></div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!'
    },
    mounted: function() {
        console.log('Vue实例已挂载！');
        console.log(document.getElementById('app'));
    }
});

在上面的例子中，当Vue实例被挂载后，mounted生命周期钩子函数会被调用，并输出一条日志以及挂载的DOM元素。

以上就是Vue的属性、方法、生命周期的详细讲解，包含了el、data、computed、methods以及created、mounted两个生命周期钩子函数的示例说明。