房产类网站建设费用,广东住房和城乡建设部网站,鲜花网站建设规模设想,网络代码怎么学目录 1_computed计算属性使用1.1_复杂data的处理方式1.2_计算属性computed1.3_计算属性 vs methods1.4_计算属性的setter和getter#xff08;了解#xff09; 2_侦听器watch2.1_认识2.2_侦听器watch的配置选项 1_computed计算属性使用 1.1_复杂data的处理方式 在模板中可以… 目录 1_computed计算属性使用1.1_复杂data的处理方式1.2_计算属性computed1.3_计算属性 vs methods1.4_计算属性的setter和getter了解 2_侦听器watch2.1_认识2.2_侦听器watch的配置选项 1_computed计算属性使用 1.1_复杂data的处理方式 在模板中可以直接通过插值语法显示一些data中的数据比如下面的代码 bodydiv idapp!-- 插值语法表达式直接进行拼接 --!-- 1.拼接名字 --h2{{ firstName lastName }}/h2h2{{ firstName lastName }}/h2h2{{ firstName lastName }}/h2!-- 2.显示分数等级 --h2{{ score 60 ? 及格: 不及格 }}/h2!-- 3.反转单词显示文本 --h2{{ message.split( ).reverse().join( ) }}/h2/divscript src../lib/vue.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata() {return {// 1.姓名firstName: kobe,lastName: bryant,// 2.分数: 及格/不及格score: 80,// 3.一串文本: 对文本中的单词进行反转显示message: my name is hhh}},})// 2.挂载appapp.mount(#app)/script /body在某些情况需要对数据进行一些转化后再显示或者将多个数据结合起来进行显示 比如需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示在模板中使用表达式可以非常方便的实现但是设计它们的初衷是用于简单的运算在模板中放入太多的逻辑会让模板过重和难以维护并且如果多个地方都使用到那么会有大量重复的代码 将逻辑抽离出去的方法 一种方式就是将逻辑抽取到一个method中放到methods的options中但是这种做法有一个直观的弊端就是所有的data使用过程都会变成了一个方法的调用 bodydiv idapp!-- 插值语法表达式直接进行拼接 --!-- 1.拼接名字 --h2{{ getFullname() }}/h2h2{{ getFullname() }}/h2h2{{ getFullname() }}/h2!-- 2.显示分数等级 --h2{{ getScoreLevel() }}/h2!-- 3.反转单词显示文本 --h2{{ reverseMessage() }}/h2/divscript src../lib/vue.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata() {return {// 1.姓名firstName: kobe,lastName: bryant,// 2.分数: 及格/不及格score: 80,// 3.一串文本: 对文本中的单词进行反转显示message: my name is hhh}},methods: {getFullname() {return this.firstName this.lastName},getScoreLevel() {return this.score 60 ? 及格: 不及格},reverseMessage() {return this.message.split( ).reverse().join( )}}})// 2.挂载appapp.mount(#app)/script /body另外一种方式就是使用计算属性computed 1.2_计算属性computed 如何理解 官方并没有给出直接的概念解释而是说对于任何包含响应式数据的复杂逻辑你都应该使用计算属性计算属性将被混入到组件实例中 所有 getter 和 setter 的 this 上下文自动地绑定为组件实例 计算属性的用法 选项computed类型{ [key: string]: Function | { get: Function, set: Function } } 按照1.1的代码使用computed属性 bodydiv idapp!-- 1.拼接名字 --h2{{ fullname }}/h2h2{{ fullname }}/h2h2{{ fullname }}/h2!-- 2.显示分数等级 --h2{{ scoreLevel }}/h2!-- 3.反转单词显示文本 --h2{{ reverseMessage }}/h2/divscript src../lib/vue.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata() {return {// 1.姓名firstName: kobe,lastName: bryant,// 2.分数: 及格/不及格score: 80,// 3.一串文本: 对文本中的单词进行反转显示message: my name is hhh}},computed: {// 1.计算属性默认对应的是一个函数fullname() {return this.firstName this.lastName},scoreLevel() {return this.score 60 ? 及格: 不及格},reverseMessage() {return this.message.split( ).reverse().join( )}}})// 2.挂载appapp.mount(#app)/script /body1.3_计算属性 vs methods 虽然计算属性和methods的实现代码看起来差别不大但是计算属性有缓存的。 计算属性会基于它们的依赖关系进行缓存 在数据不发生变化时计算属性是不需要重新计算的但是methods是调用一次就计算一次对比之下比较消耗性能。但是如果依赖的数据发生变化在使用时计算属性依然会重新进行计算 所以建议优先使用计算属性computed 1.4_计算属性的setter和getter了解 计算属性在大多数情况下只需要一个getter方法即可所以会将计算属性直接写成一个函数。 bodydiv idapph2{{ fullname }}/h2button clicksetFullname设置fullname/button/divscript src../lib/vue.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata() {return {firstname: coder,lastname: hhh}},computed: {// 语法糖的写法// fullname() {// return this.firstname this.lastname// },// 完整的写法:fullname: {get: function() {return this.firstname this.lastname},set: function(value) {const names value.split( )this.firstname names[0]this.lastname names[1]}}},methods: {setFullname() {this.fullname kobe bryant}}})// 2.挂载appapp.mount(#app)/script /body2_侦听器watch 2.1_认识 侦听器 开发中在data返回的对象中定义了数据这个数据通过插值语法等方式绑定到template中当数据变化时template会自动进行更新来显示最新的数据但是在某些情况下希望在代码逻辑中监听某个数据的变化这时就需要侦听器watch来完成了 侦听器的用法如下 选项watch类型{ [key: string]: string | Function | Object | Array} 案例 比如现在希望用户在input中输入一个问题每当用户输入了最新的内容就获取到最新的内容并且使用该问题去服务器查询答案那么就需要实时的去获取最新的数据变化 bodydiv idapph2{{message}}/h2button clickchangeMessage修改message/button/divscript src../lib/vue.js/scriptscript// Proxy - Reflect// 1.创建appconst app Vue.createApp({// data: option apidata() {return {message: Hello Vue,info: { name: hhh, age: 18 }}},methods: {changeMessage() {this.message 你好啊, 李银河!this.info { name: kobe }}},watch: {// 1.默认有两个参数: newValue/oldValuemessage(newValue, oldValue) {console.log(message数据发生了变化:, newValue, oldValue)},info(newValue, oldValue) {// 2.如果是对象类型, 那么拿到的是代理对象 Proxyconsole.log(info数据发生了变化:, newValue, oldValue)// Proxy(Object) {name: kobe} // Proxy(Object) {name: hhh, age: 18}console.log(newValue.name, oldValue.name) //kobe hhh// 3.获取原生对象console.log({ ...newValue }) //{name: kobe}console.log(Vue.toRaw(newValue)) //{name: kobe}}}})// 2.挂载appapp.mount(#app)/script /body2.2_侦听器watch的配置选项 一个例子 当点击按钮的时候会修改info.name的值这个时候使用watch来侦听info可以侦听到吗答案是不可以。 因为默认情况下watch只是在侦听info的引用变化对于内部属性的变化是不会做出响应的 这个时候可以使用一个选项deep进行更深层的侦听注意watch里面侦听的属性对应的也可以是一个Object immediate属性一开始的就会立即执行一次 这个时候使用immediate选项这个时候无论后面数据是否有变化侦听的函数都会执行一次 bodydiv idapph2{{ info.name }}/h2button clickchangeInfo修改info/button/divscript src../lib/vue.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata() {return {info: { name: hhh, age: 18 }}},methods: {changeInfo() {// 1.创建一个新对象, 赋值给info// this.info { name: kobe }// 2.直接修改原对象某一个属性this.info.name kobe}},watch: {// 默认watch监听不会进行深度监听// info(newValue, oldValue) {// console.log(侦听到info改变:, newValue, oldValue)// }// 修改代码进行深度监听info: {handler(newValue, oldValue) {console.log(侦听到info改变:, newValue, oldValue)console.log(newValue oldValue)},// 监听器选项:// info进行深度监听deep: true,// 第一次渲染直接执行一次监听器immediate: true},info.name: function(newValue, oldValue) {console.log(name发生改变:, newValue, oldValue)}}})// 2.挂载appapp.mount(#app)/script /body