网站关闭流程,泗县建设局网站,红盾工商信息查询网,晋江模板建站03. Vue 指令拓展
3.1 指令修饰符
可以通过 . 来指明一些指令的后缀#xff0c;不同的后缀中封装了不同的操作#xff0c;可以帮助我们简化代码#xff0c;比如之前使用过的监听 enter 键的弹起#xff0c;我们需要操作事件对象#xff0c;来检测用户使用了哪个键#…03. Vue 指令拓展
3.1 指令修饰符
可以通过 . 来指明一些指令的后缀不同的后缀中封装了不同的操作可以帮助我们简化代码比如之前使用过的监听 enter 键的弹起我们需要操作事件对象来检测用户使用了哪个键但是 Vue 替我们封装了直接检测回车的方式keyup.enter 就是在我们上面的 v-on 语句后面再加一个 . 修饰。
下面来给出具体的代码的示例 div idapph3keyup.enter → 监听键盘回车事件/h3input keyup.enterfn v-modelusername typetext/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: },methods: {fn(e) {if (e.key Enter) {alert(回车);}}}})/script这样就是实现了搜索框监听回车的操作
其他常用的修饰符比如 v-model.trim 去除空格也就是绑定完后获取到的内容是去除空格的v-model.number 会尝试将获取的信息转换为数组如果无法转化为数字的比如我们输入 abc 就会保留原本的字符串的形式
div idapph3v-model修饰符 .trim .number/h3姓名input v-model.trimusername typetextbr年纪input v-model.numberage typetextbr
/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,age: ,}, })/script效果 具体修改后的属性内容可以通过前面提到的 Vue 调试工具查看
另外的还有 EVENT.stop 阻止事件冒泡和 EVENT.prevent 阻止默认行为比如表单的提交或者超链接的跳转行为 !-- 阻止事件冒泡 --
h3事件名.stop → 阻止冒泡/h3
div clickfatherFn classfather
div click.stopsonFn classson儿子/div!-- 阻止默认行为 --
h3事件名.prevent → 阻止默认行为/h3
a click.prevent hrefhttp://www.baidu.com阻止默认行为/a3.2 v-bind 指令对于样式控制的增强 我们之前要控制 DOM 元素的样式是通过 ClassList.add( ) 等方式实现对 DOM 元素类的操控那通过 Vue 我么可以怎么实现呢
语法:class对象/数组
对象通过布尔值来判断是否将这个类名加到盒子上
适用于一个类名来回切换的情况比如 TAB 栏高亮
div classbox :class{ 类名1: 布尔值, 类名2: 布尔值}/div数组数组中的所有类都会加到盒子上本质是一个 list 列表
适用于批量添加或者删除类的情况
div classbox :class[ ‘类名1’, ‘类名2’, ‘类名3’]/div来看一个实例
div idappdiv classbox :class{pink: true, big: true}黑马程序员/divdiv classbox :class[pink]黑马程序员/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})
/script3.3 v-model 作用于其他的表单元素
常见的表单元素都可以通过 v-model 去关联来快速的获取和设定表单元素的值这里直接给出例子 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletextarea {display: block;width: 240px;height: 100px;margin: 10px 0;}/style
/head
bodydiv idapph3小黑学习网/h3姓名input typetext v-modelusername brbr是否单身input typecheckbox v-modelisSingle brbr!-- 前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别: input typeradio v-modelgender value男男input typeradio v-modelgender value女女brbr!-- 前置理解1. option 需要设置 value 值提交给后台2. select 的 value 值关联了选中的 option 的 value 值结合 Vue 使用 → v-model--所在城市:select v-modellocationoption北京/optionoption上海/optionoption成都/optionoption南京/option/selectbrbr自我描述textarea v-modeltext/textarea button立即注册/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,isSingle: true,gender: 男,location: 上海,text: }})/script
/body
/html需要注意的是 v-model 会为单选框加上 name 属性将其绑定为一组
04. 计算属性
4.1 基本使用
基于现有的数据计算出来的新的属性依赖数据的 变化自动 重新计算
语法声明在 computer 中一个计算属性对应一个函数
使用起来和普通属性相同比如插值表达式 {{ 计算属性 }}
div idapph3小黑的礼物清单/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/table!-- 目标统计求和求得礼物总数 --p礼物总数{{totalCount}} 个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 1 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {totalCount() { // 求和return this.list.reduce((sum, item) sum item.num, 0);}}})/script4.2 计算属性 VS Method
computed 计算属性封装了对一段数据的处理求得一个结果其具有缓存特性即对计算出来的结果进行缓存再次使用的时候就直接读取缓存当其依赖项变化的时候会重新计算并且读取缓存。
methods 方法如果把计算逻辑写在 methods 中每次调用都需要重新计算可以想象对性能有怎样的损耗
div idapph3小黑的礼物清单span{{ totalCountFn() }}/span/h3h3小黑的礼物清单span{{ totalCountFn() }}/span/h3h3小黑的礼物清单span{{ totalCountFn() }}/span/h3h3小黑的礼物清单span{{ totalCountFn() }}/span/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/tablep礼物总数{{ totalCountFn() }} 个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 3 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},methods: {totalCountFn () {console.log(methods方法执行了)let total this.list.reduce((sum, item) sum item.num, 0)return total}},computed: {// 计算属性有缓存的一旦计算出来结果就会立刻缓存// 下一次读取 → 直接读缓存就行 → 性能特别高// totalCount () {// console.log(计算属性执行了)// let total this.list.reduce((sum, item) sum item.num, 0)// return total// }}})/script上面每个 10 的计算都需要再次调用函数所以对于这种情况应该使用 computed
4.3 完整写法 既然上面一直说这个 computed 里面的内容是属性属性是可读写的那计算属性是否是可读写的应该如何写呢 如果我们希望这个计算属性的改变会影响绑定的这一段数据就需要自己编写逻辑去实现。 这时候就需要完整的配置对象了其中的 get() 方法是我们读的操作set 是写的操作通过在内部去书写方法就可以实现对读写的配置。
div idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span{{ fullName }}/spanbrbrbutton clickchangeName改名卡/button/divscriptconst app new Vue({el: #app,data: {firstName: 刘,lastName: 备,},methods: {changeName () {this.fullName 黄忠}},computed: {fullName: {// (1) 当fullName计算属性被获取求值时执行get有缓存优先读缓存// 会将返回值作为求值的结果get () {return this.firstName this.lastName},// (2) 当fullName计算属性被修改赋值时执行set// 修改的值传递给set方法的形参set (value) {// console.log(value.slice(0, 1)) // console.log(value.slice(1)) this.firstName value.slice(0, 1)this.lastName value.slice(1)}}}})/script当我们进行修改的时候等号后面的值会作为 value 传给 set 函数上面实现了通过修改姓名来修改绑定的名和姓的操作。 05. watch 监听器
5.1 基本使用
watch 监听器的可以实现对数据变化的监听比如网页翻译的场景我们在左边的框中输入需要翻译的文字后没有做任何操作但是右边的翻译的内容改变了这就是因为监听了我们的输入操作。 语法
const app new Vue({data: {message: Hello},watch: {// 监听 message 属性的变化message(newValue, oldValue) {console.log(message 从 ${oldValue} 变为 ${newValue});// 在这里执行其他操作...}}
});里面接收两个属性 newValue 和 oldValue 来存储更改前和更改后的值
watch 中可以监听多个属性
const app new Vue({data: {firstName: John,lastName: Doe,fullName: },watch: {// 监听 firstName 和 lastName 两个属性的变化firstName(newFirstName, oldFirstName) {this.fullName newFirstName this.lastName;// 在这里执行其他操作...},lastName(newLastName, oldLastName) {this.fullName this.firstName newLastName;// 在这里执行其他操作...}}
});5.2 完整写法
可以在watch选项中添加配置项这些配置项包括handler和deep。
handler是一个函数用于处理属性值变化时的逻辑。它接收两个参数新值和旧值。deep是一个布尔值用于表示是否深度监听对象内部值的变化默认为false。
这里就需要写成配置对象而不是上面的单个函数的形式上面的函数写在对象的 handler() 函数中
const app new Vue({el: #app,data: {message: Hello,count: 0,user: {name: John,age: 30}},watch: {message: {handler(newValue, oldValue) {console.log(message 从 ${oldValue} 变为 ${newValue});// 在这里执行其他操作...},deep: true // 深度监听如果message是对象则也监听对象内部值的变化},count(newValue, oldValue) {console.log(count 从 ${oldValue} 变为 ${newValue});// 在这里执行其他操作...},user.name(newValue, oldValue) { // 监听嵌套属性console.log(用户姓名从 ${oldValue} 变为 ${newValue});// 在这里执行其他操作...}},methods: {increment() {this.count;},changeUserName() {this.user.name Alice; // 改变嵌套属性触发监听}}
});
