用前面文章的姓名案例, 但是以watch来实现, 以此来对比通过watch来监视first和last当first和last发生改变时 修改full的值在计算属性中是通过retrurn返回值的形式来实现的假设有一个需求是: 延时1秒后再显示, 这里就不能用计算属性了, 就必须使用watch 姓: 名: 姓名:{{full}} 总结computed和watch之间的区别:computed能完成的功能,watch都可以完成watch能完成的功能,computed不一定能完成. 例如: watch可以进行异步操作两个重要的小原则所有被vue管理的函数, 最好写成普通函数, 这样this的指向才是vm或组件实例对象所有不被vue所管理的函数 (定时器的回调函数, ajax的回调函数 , promise的回调函数等) 最好写成箭头函数,这样this的指向才是vm 或 组件实例对象
先写一个这样的界面注意: 要读取和操作numbers里面的a或者b 要写成numbers.a 的形式 a的值是:{{numbers.a}} 点我让a+1 b的值是:{{numbers.b}} 点我让b+1 data:{ isHot:true, numbers:{ a:1, b:1 } },监视多级结构中某个属性的变化使用watch注意 监视多级结构中某个属性的变化的时候, 需要用引号将属性引起来watch:{ //监视多级结构中某个属性的变化 'numbers.a':{ handler(){ console.log('a被更改了') } },监视多级结构中所有属性的变化因为numbers中存在多级结构, 要监视所有属性的变化情况, 属于深度监测 使用deep:true 开启深度监测watch:{ //监视多级结构中所有属性的变化 numbers:{ deep:true, handler(){ console.log("numbers改变了") } }}如果不开启deep:true 那么只有在numbers本身发生变化的时候才会被监测到 例如: 彻底替换掉numbers 总结深度监测:(1)Vue中的watch默认不监测对象内部值的改变(一层)(2)配置deep:true可以监测对象内部值改变(多层)备注:(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以(2)使用watch时根据数据的具体结构,决定是否采用深度监测代码 深度监视 今天天气很{{info}} 切换天气 a的值是:{{numbers.a}} 点我让a+1 b的值是:{{numbers.b}} 点我让b+1 彻底替换掉numbers
有这样的一个需求, 点击切换天气后文字会在炎热或凉爽中切换利用computed和methods用前面文章提到的computed和methods 天气案例 今天天气很{{info}} 切换天气 监视属性watch此时又有一个需求, 需要监视isHot属性, 当它发生改变的时候要通知就需要用到watch使用handler我们可以写上两个参数, 用于接受修改后的值和之前的值,使用console.log输出watch:{ isHot:{ //这里也可以监视computed里面的 // immediate:true, //初始化时让handler调用一下 //handler什么时候调用? 当isHot发生改变时. handler(newValue,oldValue){ console.log("isHot被修改了",newValue,oldValue) } } }另外一种监视方法是写在Vue实例外面vm.$watch('isHot',{ handler(newValue,oldValue){ console.log("isHot被修改了",newValue,oldValue) } })总结监视属性watch:当被监视的属性变化时, 回调函数自动调用, 进行相关操作监视的属性必须存在, 才能进行监视监视的两种写法:(1) new vue时传入watch配置(2) 通过vm.$watch监视代码 天气案例 今天天气很{{info}} 切换天气 监视属性的简写当配置项中只有handler的时候可以用简写形式在watch中, 可以省略到handlerwatch:{ //正常写法 isHot:{ //这里也可以监视computed里面的 // immediate:true, //初始化时让handler调用一下 //handler什么时候调用? 当isHot发生改变时. handler(newValue,oldValue){ console.log("isHot被修改了",newValue,oldValue) } }, //简写 //当配置项中只有handler的时候可以用简写形式 isHot(newValue,oldValue){ console.log("isHot被修改了",newValue,oldValue) } }在Vue实例外的这种形式的简写//正常写法 vm.$watch('isHot',{ handler(newValue,oldValue){ console.log("isHot被修改了",newValue,oldValue) } }) //简写 vm.$watch('isHot',function(newValue,oldValue){ console.log("isHot被修改了",newValue,oldValue) })
需求: 一个文本框输入姓, 一个文本框输入名 ,在用户键入姓或名的时候, 以 姓-名的格式输出文本插值语法实现使用v-model双向绑定 姓名案例_插值语法实现 姓: 名: 姓名:{{first}}-{{last}} 使用mothods实现 姓名案例_methods实现 姓: 名: 姓名:{{fullName()}} 使用计算属性实现基础版计算属性:定义: 要用的属性不存在, 要通过已有属性计算得来原理: 底层借助了Objcet.defineproperty方法提供的getter和setterget函数什么时候执行?(1) 初次读取时会执行一次(2) 当依赖的数据发生改变时会被再次调用优势: 与methods实现相比, 内部有缓存机制(复用), 效率更高, 调试方便备注:(1)计算属性最终会出现在vm上,直接读取使用即可(2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化在Vue实例中添加computed 姓: 名: 姓名:{{name}} 简版
键盘事件我们想实现按下键盘某个按键后执行某某操作的时候,就需要用到键盘事件建立一个文本框 在键盘事件中有个keydown 表示键盘按下就会触发keyup 表示键盘松手时就会触发一般常用keyup常用按键别名我们想实现按下enter键执行showInfo使用@keyup.enter 当按下回车的时候就会把文本框的值输出到控制台在这里enter是可以替换的回车 => enter删除 => delete (捕获"删除"和"退格"键)退出 => esc空格 => space换行 => tab (特殊 必须配合keydown使用)上 => up下 => down左 => left右 => right原始key值绑定上面提到的这些是Vue为了便于代码编写提前设计好的一些值我们也可以使用原始的key值进行绑定, 但要注意转为kebab-case(短横线全小写命名)例如: 键盘上的大小写切换按键我们使用console.log(e.key)输出一下大小写切换键的key值如图所示为CapsLock对于这种两个单词组成的,在这里我们需要按照规则把它修改为caps-lock 系统修饰键系统修饰键的用法较为特殊:ctrl alt shift meta(1) 配合keyup使用: 按下修饰键的同时, 再按下其他键, 随后释放其他键, 事件才被触发例如ctrl键(2) 配合keydown使用: 正常触发事件例如: tab键 (如果使用keyup就不能正常触发)系统修饰符也可以连写,假设我想按下ctrl s的时候才执行showInfo 我就可以这样写: 自定义键名Vue.config.keyCodes.自定义键名 = 键码可以定制按键别名例如Vue.config.keyCodes.huiche=13 //定义了一个别名按键名字叫huiche 对应的键码是13总结Vue中常用的按键别名回车 => enter删除 => delete (捕获"删除"和"退格"键)退出 => esc空格 => space换行 => tab (特殊 必须配合keydown使用)上 => up下 => down左 => left右 => rightVue中提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)系统修饰键(用法特殊): ctrl alt shift meta(1) 配合keyup使用: 按下修饰键的同时, 再按下其他键, 随后释放其他键, 事件才被触发(2) 配合keydown使用: 正常触发事件 (tab键)也可以使用keycode去指定具体的按键(不推荐)Vue.config.keyCodes.自定义键名 = 键码, 可以去定制按键别名代码 键盘事件 <!-- 1. Vue中常用的按键别名 回车 => enter 删除 => delete (捕获"删除"和"退格"键) 退出 => esc 空格 => space 换行 => tab (特殊 必须配合keydown使用) 上 => up 下 => down 左 => left 右 => right 2. Vue中提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名) 3. 系统修饰键(用法特殊): ctrl alt shift meta (1) 配合keyup使用: 按下修饰键的同时, 再按下其他键, 随后释放其他键, 事件才被触发 (2) 配合keydown使用: 正常触发事件 (tab键) 4. 也可以使用keycode去指定具体的按键(不推荐) 5. Vue.config.keyCodes.自定义键名 = 键码, 可以去定制按键别名 -->
prevent: 阻止默认事件(常用)prevent用于阻止默认事件,例如: 本来是个a标签点击后应该打开网页,使用prevent后就可以阻止原本的"打开网页"在click后面跟上prevent 点我提示信息 并在showInfo中写上弹出信息框的代码 此时 a标签不会跳转网页,只会弹出信息框stop: 阻止事件冒泡(常用)在一个div里有一个按钮, 给div添加被点击后执行showInfo , 给按钮添加被点击后执行showInfo1 点我提示信息 点击按钮后会依次弹出两个信息框第一个:第二个:说明是先执行的showInfo1 再执行的showInfo (像冒泡一样,从内到外)如果我想阻止这种冒泡, 只需要添加stop 点我提示信息 此时就只会执行按钮的showInfo1事件once: 事件只触发一次(常用)正常我们点击按钮的时候, 每次点击都会执行一遍click对应的showInfo 例如: 点我提示信息 如果我们只想 第一次点击的时候执行showInfo,之后就不再执行了,只需要添加once 点我提示信息 capture: 使用事件的捕获模式运行下面一段代码 观察控制台 div1 div2 当点击div2时,控制台分别输出 2 1 说明先触发的box2 再触发的box1 这也是上面提到的冒泡如果我们想先触发box1 再触发box2 ,这就需要使用实际的捕获模式capture div1 div2 此时再点击,就是先输出的1 再输出2self: 只有event.target是当前操作的元素时才触发事件除了使用.stop修饰符，还有一种修饰符self，意思是只有点击自己的时候才会被执行。 只不过加的位置要加在外层DOM元素的事件上。 点我提示信息 passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕当滑动鼠标滚轮的时候, 执行demo ,而此时demo有一个需要很长时间执行的循环, 只有当循环执行完毕以后滚轮才会滑动 1 2 3 4 如果想立即执行滚轮滚动这个工作, 无需等待循环执行完毕.那么就加上passive 1 2 3 4 总结Vue中的事件修饰符:prevent: 阻止默认事件(常用)stop: 阻止事件冒泡(常用)once: 事件只触发一次(常用)capture: 使用事件的捕获模式self: 只有event.target是当前操作的元素时才触发事件passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕代码 07事件修饰符 欢迎来到{{name}}学习 点我提示信息 点我提示信息 点我提示信息 div1 div2 点我提示信息 1 2 3 4 补充修饰符可以连写 例如:测试
v-on想要实现点击按钮后执行事件使用v-on:click绑定事件,后面跟事件名 欢迎来到{{name}}学习 点我提示信息 然后在Vue实例中写下methods方法,本例中弹出信息框 简写v-on:click的简写形式是@click 点我提示信息 传参我们也可以在执行事件的时候传入一个参数在事件名后跟括号 欢迎来到{{name}}学习 点我提示信息2(传参) 所有代码 07事件处理 欢迎来到{{name}}学习 点我提示信息(不传参) 点我提示信息2(传参) 总结事件的基本使用:使用v-on:xxx 或 @xxx 绑定事件 其中xxx是事件名事件的回调需要配置在methods对象中,最终会在vm上methods中配置的函数,不要用箭头函数,否则this就不是vm了methods中配置的函数,都是被vue所管理的函数,this的指向是vm 或组件实例对象@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参
数据代理: 通过一个对象代理对另一个对象中属性的操作 读/写 在这段代码中,obj2没有x但是通过get() 我们让访问obj2.x的时候返回obj的x在设置obj2.x的值的时候 让obj.x等于设置的值
defineProperty用于给一个对象定义属性三个参数Object.defineProperty(obj,property,descriptor)参数一: obj绑定属性的目标对象参数二: property绑定的属性名参数三: descriptor属性描述(配置),且此参数本身为一个对象属性值1：value设置属性默认值属性值2：writable设置属性是否能够修改属性值3：enumerable设置属性是否可以枚举，即是否允许遍历属性值4：configurable设置属性是否可以删除或编辑属性值5：get获取属性的值属性值6：set设置属性的值例子下面这个例子就给了person ,age这个属性,并且age的值是18 我们可以使用console.log(person)来看看但是注意 age这里的颜色和其他属性的颜色不一样是因为age默认是不可以修改的只需要添加属性值writable:true 就可以被修改了Object.defineProperty(person,'age',{ value:18, writable:true })其他几个属性值同理Object.defineProperty(person,'age',{ value:18, enumerable:true,// 控制属性是否可以枚举,默认值是false writable:true ,// 控制属性是否可以被修改,默认值是false configurable:true, //控制属性是否可以被删除,默认值是false })get 和set当设置get方法时不能有value和writeable否则会报错Object.defineProperty(person,'age',{ // value:18, // enumerable:true,// 控制属性是否可以枚举,默认值是false // writable:true ,// 控制属性是否可以被修改,默认值是false // configurable:true, //控制属性是否可以被删除,默认值是false //当有人读取person的age属性时,get函数就会被调用,其返回值就是age的值 get(){ //可以简写为get console.log('有人读取age属性了') return number; }, //当有人修改person的age属性时,set函数就会被调用,且会受到修改的具体值 set(value){ console.log("有人修改了age属性,其值是",value) number = value } }) //console.log(person) 回顾Object.defineProperty
什么是MVMM模型MVVM（Model–view–viewmodel）是一种软件架构模式。MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。M：模型（model）：data中的数据V：视图（View）：模板代码VM：视图模型（ViewModel）：Vue实例ViewModel相当于是一个桥梁数据（model）放在一个位置，然后写好模板代码（View），用桥梁（ViewModel）建立起连接在Vue官方文档中：提到通常使用VM来代表Vue实例。所以以后使用如果再拿变量接受Vue实例，使用VM观察发现：data中所有的属性，最后都出现在了vm身上vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用