Vue实例各个选项详解

最新推荐文章于 2021-09-26 15:34:08 发布

技术的搬运工

最新推荐文章于 2021-09-26 15:34:08 发布

阅读量537

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/it_boy_/article/details/107225324

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

在学习Vue的过程中，我会把我遇到过的Vue实例中的选项都记录在下面的代码中，每个选项的具体使用会在单独的文章中给出示例。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例各个选项详解</title>
    <!-- 在线 vue.js -->
    <!--    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>-->
    <!-- 本地 vue.js，需要下载 vue.js 后放入本地中 -->
    <script src="vue.js"></script>
</head>

<body>
<div id="app">
    <h1>这里展示Vue实例中的各个选项</h1>
    <p>{{message}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: { // 数据属性
            //
            message: 'Hello Vue.js!'
        },
        methods: { // 方法属性
            //
        },
        computed: { // 计算属性
            //
        },
        watch: { // 监听属性
            //
        },
        components: { // 组件属性
            // 
        },

        created: function () { // Vue 的生命周期钩子：created、mounted、beforeDestroy
            //
        },
        mounted: function () {
            //
        },
        beforeDestroy: function () {
            //
        }
    });
</script>
</body>
</html>