data和methods-CSDN博客

本文链接：https://blog.csdn.net/qq_41283785/article/details/130663348

data属性：提供响应式数据
methods属性：定义方法

vue组件和vue实例是同一个概念，
vue组件实例和vue应用实例

Vue组件实例

const vm = app.mount("#app")

在这里插入图片描述

2 组件的data属性
返回值是一个对象
data是一个函数
$d a t a 形式，存在组件实例中 d a t a 的調用，通過实例 v m . 一级属性名或者 v m .$ data.一级属性名被访问

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
    <div id="app"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {count:4};
            },
        });
        const vm = app.mount("#app") // vm 是Vue实例

        console.log(vm.$data.count);
        console.log(vm.count);

        //修改vm.count的值
        vm.count = 5;
        console.log(vm.$data.count)
    </script>
</body>
</html>

在这里插入图片描述

data返回对象的变量，可以通过$data或者组件实例vm直接访问和修改
对未提供所需值的属性要占位，因为实例属性在实例首次创建时添加

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
    <div id="app">
    <h1>count: {{count}}</h1>
    <h1>x: {{x}}</h1></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    count:1
                };
            },
        });
        const vm = app.mount('#app')
        console.log(vm.$data.count)
        console.log(vm.count)

        vm.$data.x = 0;
        console.log(vm.$data.x); // 0
        console.log(vm.x);  // undefined

        // 定时器
        setInterval(() => {
            vm.$data.count++;
            vm.$data.x++;
            console.log("定时器count" + vm.$data.count);
            console.log("定时器x:" + vm.$data.x);
        },1000)
    </script>
</body>
</html>

报错信息：x在实例中找不到，渲染时被访问
在这里插入图片描述

x是创建实例后添加的属性，是$data的私有属性。

3 组件的method属性

methods 属性向组件实例添加方法
使用组件实例去直接调用这些方法

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="app"></div>
<script>
    const app = Vue.createApp({
        data() {
            return {count:4};
        },
        methods: {
            increment() {
                // this 指向组件实例
                this.count++;
            }
        }
    });
    const vm = app.mount("#app");
    console.log(vm.count);// 4 
    vm.increment();
    console.log(vm.count); //5
</script>
</body>
</html>