Vue el与data的两种写法 && Object.defineProperty方法

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <title>el与data的两种写法</title>
 6         <script type="text/javascript" src="../js/vue.js"></script>
 7     </head>
 8     <body>
 9 <!--         
10     el的两种写法：
11         1.new Vue时候配置el属性
12         2.线创建Vue实例，随后再通过vm.$mount('#root')指定el的值
13     data的两种写法：
14         1.对象式
15         2.函数式
16         如何选择：在组件里，data必须使用函数式，否则会报错
17     还有一个重要的原则：有Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue对象，而是window，或者父对象
18  -->
19         <div id="root">
20             <h1>hello， {{name}}</h1>
21         </div>
22     </body>
23 
24     <script type="text/javascript" >
25         Vue.config.productionTip = false;//     阻止 vue 在启动时生成生产提示。
26         v = new Vue({
27             // el: '#root', // el的第一种写法
28             // data:{ // data的第一种写法
29             //     name: 'jack'
30             // }
31             data: function() {
32                 // this  这里的this就是Vue对象
33                 return {
34                     name: 'jack'
35                 }
36             }
37         })
38         v.$mount('#root') // el的第二种写法
39     </script>
40 </html>

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <title>Object.defineProperty方法</title>
 6     </head>
 7     <body>
 8         <script type="text/javascript" >
 9             let number = 18
10             let person = {
11                 name: 'jack',
12                 sex: 'man',
13             }
14             Object.defineProperties(person, 'age', {
15                 value: number,  // 设置age属性的值
16                 enumberable: true,  // 控制属性是否可以被枚举（遍历）,默认false
17                 writeable: true,    // 控制属性是否可以被修改，默认false
18                 configurable: true, // 控制属性是否可以被删除，默认false
19                 // 当读取person.age属性的时候调用该方法（在原型中该方法名叫getter）
20                 get: function(){
21                     return number;
22                 },
23                 // 当对person.age=19属性赋值的时候滴啊用（在原型中该方法名叫setter）
24                 set(value){
25                     number = value;
26                 }
27             })
28         </script>
29 
30     </body>
31 
32     
33 </html>

 

posted @ 2022-05-19 17:27  看一百次夜空里的深蓝  阅读(102)  评论(0)    收藏  举报