Vue实例各个选项详解

最新推荐文章于 2022-10-05 09:24:12 发布

技术的搬运工

最新推荐文章于 2022-10-05 09:24:12 发布

阅读量505

点赞数

分类专栏： 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>

详解 Vue 实例中的各个选项

el

用于指定一个页面中已存在的 DOM 元素来挂载 Vue 实例，它可以是 HTMLElement，也可以是 CSS 选择器。

data （数据属性）

通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内声明，这样不至于将数据散落在业务逻辑中，难以维护。

methods （方法属性）

computed （计算属性）

计算属性在处理一些复杂逻辑时是很有用的。

watch （监听属性）

components (组件属性）

created

实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可以用。需要初始化处理一些数据时会比较有用。

mounted

el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。

beforeDestroy

实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

PS：“你只管悄悄努力，然后惊艳所有人”

技术的搬运工

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue实例各个选项详解

前言在学习Vue的过程中，我会把我遇到过的Vue实例中的选项都记录在下面的代码中，每个选项的具体使用会在单独的文章中给出示例。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue实例各个选项详解</title>  <script src="h
复制链接

扫一扫

专栏目录