VUE框架_data和$data机制解析------VUE框架

旧约Alatus

已于 2023-11-25 18:15:48 修改

阅读量511

点赞数 15

分类专栏： # VUE框架前端文章标签： javascript 开发语言 ecmascript vue.js 前端前端框架 vue

于 2023-11-25 11:20:14 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134612174

版权

前端同时被 2 个专栏收录

328 篇文章 2 订阅

订阅专栏

VUE框架

249 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            // 这个data可以是一个函数，但是需要返回对象
            // data : function()
            //     {
            //         //我们返回一个对象
            //         //如果是函数的话，必须使用return返回一个对象
            //         //对象格式必须是{}
            //         return {msg : "Hello"};
            //     }
            data()
            {
                // 什么时候选择对象，什么时候选择函数
                // 这种写法也行
                return {msg : "Hello"};
            }
        });
        // 关于配置项，enumerable和configurable
        let phone = {
            name : "mate60Pro"
        };
        // 给phone对象新增一个color属性
        Object.defineProperty(phone,"color",{
            value : "太空灰",
            // enumerable的值为true，表示该属性可以遍历枚举迭代
            // false，表示该属性不可以遍历枚举迭代
            enumerable : false,
            // Object.keys(对象)是就无法枚举遍历出来了
            configurable : false
            // configurable为true可以删除，false不能删除
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="app">

<h1>{{msg}}</h1>

</div>

<script>

const vm = new Vue({

el : "#app",

// 这个data可以是一个函数，但是需要返回对象

// data : function()

// {

// //我们返回一个对象

// //如果是函数的话，必须使用return返回一个对象

// //对象格式必须是{}

// return {msg : "Hello"};

// }

data()

{

// 什么时候选择对象，什么时候选择函数

// 这种写法也行

return {msg : "Hello"};

}

});

// 关于配置项，enumerable和configurable

let phone = {

name : "mate60Pro"

};

// 给phone对象新增一个color属性

Object.defineProperty(phone,"color",{

value : "太空灰",

// enumerable的值为true，表示该属性可以遍历枚举迭代

// false，表示该属性不可以遍历枚举迭代

enumerable : false,

// Object.keys(对象)是就无法枚举遍历出来了

configurable : false

// configurable为true可以删除，false不能删除

});

</script>

</body>

</html>