- 调用方式: 对象.属性1.属性2()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <button onclick="obj3.a7.a8()">点击我调用方法5</button> </div> <script type="text/javascript"> // 第五种 对象里面包含对象(内嵌方法) var obj3 = { a7:{ a8: function a9() { console.log(5) } } } </script> </body> </html>
第六种: var 函数名=(参数)=>{},调用方式: 函数名()
- 调用方式: 函数名()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <button onclick="obj4()">点击我调用方法6</button> </div> <script type="text/javascript"> // 第六种:箭头函数 var obj4=()=>{ console.log(6); } </script> </body> </html>
第七种:var 对象={属性名(){}}。调用方式: 对象.属性名()
- 可以省略 :function
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <button onclick="a()">点击我调用方法1</button> <button onclick="a2()">点击我调用方法2</button> <button onclick="obj.a3()">点击我调用方法3</button> <button onclick="obj2.a5()">点击我调用方法4</button> <button onclick="obj3.a7.a8()">点击我调用方法5</button> <button onclick="obj4()">点击我调用方法6</button> <button onclick="obj5.a10()">点击我调用方法7</button> </div> <script type="text/javascript"> // 第一种 属性名 a1: function a() { console.log(1) } // 第二种 普通方法 function a2() { console.log(2) } // 第三种 对象里面的属性是方法 无函数名 var obj = { a3: function a4() { console.log(3) } } // 第四种 对象里面的属性是方法 有函数名 var obj2 = { a5: function a6() { console.log(4) } } // 第五种 对象里面包含对象(内嵌方法) var obj3 = { a7:{ a8: function a9() { console.log(5) } } } // 第六种 :箭头函数 var obj4=()=>{ console.log(6); } var obj5={ a10(){ console.log(7) } } </script> </body> </html>
5.data的两种方法(对象和方法)⭐
第一种:利用对象的写法进行存储 (常用写法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>{{message}}</h1> </div> <script> // 第一种利用对象的方式进行存储。 new Vue({ el:'#root', data:{ message:'你好，吉士先生' } }); </script> </body> </html>
第二种: 利用方法的写法进行存储 返回的是对象
- 方法返回的数据是对象
- 可以简写为 data(){return {} } 省略function
- 方法不要使用箭头函数，否则会导致this转变成window
- 组件中用的多
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>{{message}}</h1> </div> <script> // 第一种利用对象的方式进行存储。 /* new Vue({ el:'#root', data:{ message:'你好，吉士先生' } }); */ //第二种利用函数的方式进行存储，返回值是 对象 new Vue({ el:'#root', data:function(){ //可以简写为 data(){return {} }.data尽量不要使用箭头函数，我们要使用普通函数。否则this指向的是window,而不是Vue return{ message:'你好，吉士先生' } } }); </script> </body> </html>
(七)、Vue中的数据代理(_date)
1.数据代理模式基本介绍
- 我们首先在data的对象中传入数据
- 然后再_data中进行收集数据
- 再然后_data寻找代理vm,vm帮助我们进行代理数据
- 最重要的一点是: 代理对象不仅拥有读取的功能，也有更改的功能。
2.查看数据核实信息
发现数据引用的数据是true
console.log(vm.name===vm._data.name) true • 1
