(十)、姓名案列_分析_计算属性
1.插值语法进行实现
<!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"> 姓:<input type="text" v-model:value="xing"> <br><br> 名:<input type="text" v-model:value="ming"> <br><br> 全名:<span>{{xing}}-{{ming}}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { xing:'李', ming:'明' } }); </script> </body> </html>
2.methods方法实现
- methods 里面的方法只要在绑定的容器里就可以直接利用{{}}调用
- 这里的this指的是vm的实列。
- 这里面的小括号我们必须要加，
如果不加就会去找data区域不会找methods区域
<!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>使用methods进行实现</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model:value="xing"> <br><br> 名:<input type="text" v-model:value="ming"> <br><br> 全名:<span>{{fullName()}}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', data: { xing:'李', dia:'-', ming:'川' }, methods: { fullName(){ return this.xing + this.dia+this.ming; } } }); </script> </body> </html>
⭐3.JS原生代码进行实现⭐
- 利用添加属性的操作 Object.defineProperty()
- 当我们调用fulltime属性的时候，就获取 first+name
- 当我们改变fulltime的时候，我们获取到更改后的值。并且对值进行截取两部分。根据(-)
- 字符串.split(’ ')截取数据
<!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> <script type="text/javascript"> let p = { firstName: '张', lastName: '三' // fullName= this.firstName + ' ' + this.lastName 不能这样写 因为这样写的话我们的this指的是window并不是p }; Object.defineProperty(p,'fullName',{ set(value) { //当p被改变的时候，会自动调用set的值 var arr =value.split('-'); this.firstName=arr[0]; this.lastName=arr[1]; }, get() { //当p被调用的时候，会自动调用get的值 return this.firstName + '-' + this.lastName; } }); </script> </body> </html>
4.computed计算属性实现 (简写 只读)
什么时候调用计算属性 fullName?
- ⭐初次渲染会调用
- ⭐当依赖的属性值发生变化(本程序中依赖的属性是xing ming 和 fullName)
- ⭐当自己的属性被调用的时候
- 本质上是属性，不是方法。嗲用的时候不能加小括号
为什么不能用简写的方法改全名? - 因为计算属性中 ，内涵了一个get()方法。没有包含set()方法
- computed 的底层用的还是 get 和 set
计算属性的本质是: - 添加属性并且赋值
1.计算属性: 要显示的数据不存在.要通过计算得来 2.fullName函数底层用到得是对象setter() 和 getter()方法 3.执行得时机: (1).初始显示会执行一次，得到的初始值去显示 (2).当以来得数据发生改变时会被再次调用 4.优势: 与methods实现相比，内部缓存机制 效率更高。
<!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"> 姓:<input type="text" v-model:value="xing"> <br><br> 名:<input type="text" v-model:value="ming"> <br><br> 全名:<input type="text" v-model:value="fullName"> </div> <script type="text/javascript"> new Vue({ el: '#root', data:{ xing:'李', ming:'明' }, computed:{ // 计算属性，重要的是属性。也就是说在这个区域中的方法也就是属性，换句话说就是添加属性 // * ! computed 的底层用的还是 get 和 set // * !fullName什么时候调用? (简写) // * ?⭐初次渲染会调用。⭐当依赖的属性值发生变化(本程序中依赖的属性是xing ming 和 fullName) fullName(){ return this.xing + '-' + this.ming } }); </script> </body> </html>
5.computed计算属性实现 (完整 读写)
- 这里我们对添加的属性进行手动添加get 和 set方法
<!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"> 姓:<input type="text" v-model:value="xing"> <br><br> 名:<input type="text" v-model:value="ming"> <br><br> 全名:<input type="text" v-model:value="fullName"> </div> <script type="text/javascript"> new Vue({ el: '#root', data:{ xing:'李', ming:'明' }, computed:{ // 完整写法 fullName:{ set(Value){ //当fullName被修改的时候，会调用这个方法 var arr=Value.split('-'); this.xing=arr[0]; this.ming=arr[1]; }, get(){ return this.xing + '-' +this.ming; } } } }); </script> </body> </html>
⭐6.插值语法里面的参数⭐
1.假如说插值语法里面的参数没有小括号
(1).可能时data储存区里的
(2).也可能时computed储存区里的
2.假如说插值语法里面的参数有小括号
(1).一定时methods方法区域里面的
(十一)、data methods computed总结
1.基本简要
- 方法和计算属性直接归vm所有 不用代理
- 全场的this都是vue的实列
- 方法名不能和属性名相一致，否则会冲突
- 计算属性会在初始化渲染的时候进行调用一次（前提是用到）
- 计算属性优点是: 具有缓存的操作
- 在data中 里面的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"> <h2>{{x}}</h2> <br> <h2>{{y()}}</h2> <br> <h2>{{z}}</h2> <br> <button @click="y">点我调用y方法</button> <br><br> 展示x的值是:<input type="text" :value="x"> </div> <script type="text/javascript"> var vm = new Vue({ el: '#root', //绑定哪个容器 为那个容器服务 data: { //驱动页面显示的数据都放在这里 x: 'Hello, World!' // 最终会通过数据代理的方法放入 vm }, methods: { // 方法名和属性名不能一致，否则会造成冲突 y(){ //这里没有利用数据代理。直接被放在vm身上。 console.log(100+'被调用'); return 100; } }, computed:{ z:{ //z直接被放在vm身上了 set(value){ //z的值被改变时mset执行，set中的this是vm,set会修改改变的值 console.log('有人修改了z值，修改的值是:',value); }, get(){ //z的值被读取的时候或z依赖的值，get执行。 return 300; } } } }); </script> </body> </html>
