搜索到
26
篇与
的结果
-
计算属性 定义：要用的属性不存在，要通过已有属性计算得来原理：底层借助了Object.defineproperty方法提供的getter和setterget什么时候执行：初次读取时当依赖的属性发生改变时会被再次调用优点：与methods相比，内部有缓存机制（复用），效率更高，方便调试注：计算属性最终会出现在vm身上，直接读取使用即可； 如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>姓名案例_计算属性实现（简写）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 姓名：<span>{{fullName}}</span> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', }, computed: { //完整写法 /* fullName: { get() { console.log("get被调用了") return this.firstName + this.lastName; }, set(value) { console.log('set--->', value); const arr = value.split('-'); this.firstName = arr[0]; this.lastName = arr[1] } } */ //简写（考虑读取，不考虑修改时，才用简写方式） fullName() { console.log("get被调用了") return this.firstName + this.lastName; } } }) </script> </body> </html> -
数据代理 Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）优点：方便操作data中的数据基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上，同时指定getter/setter，在getter/setter内部去操作（读/写）data中对应的属性（1）数据代理<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据代理</title> </head> <body> <!-- 通过一个对象代理另一个对象中属性的操作 --> <script type="text/javascript"> let obj = {x:100} let obj1 = {y:200} Object.defineProperty(obj1, 'x', { get() { return obj.x }, set(value) { obj.x = value } }) </script> </body> </html>（2）Vue中的数据代理<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的数据代理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false /* let data = { name: '孙笑川' } //创建Vue实例 const vm = new Vue({ el: '#root', //vm._data = options.data = data //vm._data === data true data }) */ const vm = new Vue({ el: '#root', data: { name: '孙笑川' } }) </script> </body> </html>（3）Object.defineProperty方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据代理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> </div> <script type="text/javascript"> let num = 33; let person = { name: '孙笑川' } Object.defineProperty(person, 'age', { // value: 33, // //控制属性是否可以枚举，默认值false // enumerable: true, // //控制属性是否可以被修改，默认值false // writable: true, // //控制属性是否可以被删除，默认值false // configurable: true //当读取age属性时，get函数(getter)就会被调用，且返回值就是age的值 get() { console.log("age属性被读取了"); return num; }, //当修改age属性时，set函数(setter)就会被调用，同时收到修改的具体值 set(value) { console.log("age属性被修改了，值为：", value); num = value }, }) console.log(person) </script> </body> </html>
-
-
数据绑定 单向绑定v-bind：数据只能从data流向页面双向绑定v-model：data <===> 页面，双向注：双向绑定一般应用在表单类元素上（input、select等） v-model:value可以简写为v-model，因为它默认收集的就是value的值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据绑定</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 普通写法 --> <!-- 单向数据绑定：<input type="text" v-bind:value="name">--> <!-- <br>--> <!-- 双向数据绑定：<input type="text" v-model:value="name">--> <!-- 简写 --> 单向数据绑定：<input type="text" :value="name"> <br> 双向数据绑定：<input type="text" v-model="name"> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ //指定当前实例为哪个容器服务 el: '#root', data: { name: '孙笑川' } }) </script> </body> </html>
-
el与data的两种写法 el的两种写法：new Vue时配置el属性先创建Vue实例，之后通过vm.$mount('#root')指定el的值data的两种写法：对象式函数式（使用组件时，必须使用函数式）注：由Vue管理的函数，不能写箭头函数（作用域）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4.el与data的两种写法</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 //el的两种写法 /* const vm = new Vue({ //指定当前实例为哪个容器服务 //写法一 // el: '#root', data: { name: '孙笑川' } }) //写法二 vm.$mount('#root') */ new Vue({ el: '#root', //写法一：对象式 // data: { // name: '孙笑川' // } //写法二：函数式 data: function () { console.log(this) //此处的this是Vue实例 return{ name: '孙笑川' } } }) </script> </body> </html>
-
模板语法 插值语法用于解析标签体内容，{{xxx}} xxx是js表达式，且可以直接读取到data中的所有属性指令语法用于解析标签（包括：标签属性、标签体内容、绑定事件）例：v-bind:href="xxx" 或简写为:href="xxx"<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> <hr> <h1>指令语法</h1> <a v-bind:href="url">点我跳转</a> <a :href="url">你好，{{person.name}}</a> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ //指定当前实例为哪个容器服务 el: '#root', data: { name: '孙笑川', url: 'https://www.wangchouchou.com', person: { name: '药水哥' } } }) </script> </body> </html>
