VUE框架VM对象的属性和Object对象的defineProperty方法------VUE框架

男娘i 2024-02-17 09:20 40阅读 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>
>             // Vue实例可以访问哪些属性
>             // Vue的属性有的以$开始,有的以_开始
>             // 所有以$开始的属性,可以视为公开的属性即public,这些属性供我们程序员调用
>             // 所有以_开始的属性,可以看作是私有的属性,这些是框架底层的
>             // 我们一般不调用
>             const vm = new Vue({
>                 el : "#app",
>                 data : {
>                     // 为什么这里的msg属性可以被vm对象调用
>                     // 因为vue底层使用了数据代理机制
>                     msg : "Hello"
>                 }
>             });
>         </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>
> 
> // Vue实例可以访问哪些属性
> 
> // Vue的属性有的以$开始,有的以\_开始
> 
> // 所有以$开始的属性,可以视为公开的属性即public,这些属性供我们程序员调用
> 
> // 所有以\_开始的属性,可以看作是私有的属性,这些是框架底层的
> 
> // 我们一般不调用
> 
> const vm = new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> // 为什么这里的msg属性可以被vm对象调用
> 
> // 因为vue底层使用了数据代理机制
> 
> msg : "Hello"
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <script src="../js/vue.js"></script>
>         <title>Document</title>
>     </head>
>     <body>
>         <div id="app">
>             <h1>{
>         {msg}}</h1>
>         </div>
>         <script>
>             // defineProperty是ES5新增的方法
>             // 这个方法的作用是给对象新增属性,或者设置对象原有的属性
>             // Object.defineProperty(给那个对象赋值,属性名,{配置项:值})
>             // 第三个参数是属性相关的配置项,配置项有哪些,每个配置项的作用都是什么?
>             // value配置项,给属性赋值
>             // writable用于设置该属性的值是否可被修改
>             // getter方法配置项
>             // setter方法配置项
>             // 这两个方法都不需要我们手动调用
>             let phone = {};
>             // 临时变量
>             let temp;
>             // 一个普通对象
>             Object.defineProperty(phone,"color",{
>                 // 当我们使用了get和set方法的时候,我们的value和writable方法就都不可用了
>                 // value : "太空灰",
>                 // 设置该属性的值是否可以被修改
>                 // true表示可以修改,false表示不能修改
>                 // writable : true,
>                 // getter方法配置项
>                 get : function()
>                 {
>                     return temp;
>                 },
>                 // setter方法配置项
>                 // setter方法上有一个值,用来接收传递的值
>                 set : function(value)
>                 {
>                     temp = value;
>                 }
>             });
>             console.log(phone.color);
>             const vm = new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Hello Vue"
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <script src="../js/vue.js"></script>
> 
> <title>Document</title>
> 
> </head>
> 
> <body>
> 
> <div id="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> </div>
> 
> <script>
> 
> // defineProperty是ES5新增的方法
> 
> // 这个方法的作用是给对象新增属性,或者设置对象原有的属性
> 
> // Object.defineProperty(给那个对象赋值,属性名,\{配置项:值\})
> 
> // 第三个参数是属性相关的配置项,配置项有哪些,每个配置项的作用都是什么?
> 
> // value配置项,给属性赋值
> 
> // writable用于设置该属性的值是否可被修改
> 
> // getter方法配置项
> 
> // setter方法配置项
> 
> // 这两个方法都不需要我们手动调用
> 
> let phone = \{\};
> 
> // 临时变量
> 
> let temp;
> 
> // 一个普通对象
> 
> Object.defineProperty(phone,"color",\{
> 
> // 当我们使用了get和set方法的时候,我们的value和writable方法就都不可用了
> 
> // value : "太空灰",
> 
> // 设置该属性的值是否可以被修改
> 
> // true表示可以修改,false表示不能修改
> 
> // writable : true,
> 
> // getter方法配置项
> 
> get : function()
> 
> \{
> 
> return temp;
> 
> \},
> 
> // setter方法配置项
> 
> // setter方法上有一个值,用来接收传递的值
> 
> set : function(value)
> 
> \{
> 
> temp = value;
> 
> \}
> 
> \});
> 
> console.log(phone.color);
> 
> const vm = new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Hello Vue"
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>