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

迈不过友情╰ 2024-02-17 10:14 9阅读 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>