前端框架Vue学习(2)指令修饰符,计算属性,watch监听器

目录

指令修饰符

v-bind对于样式控制的增强

对于类的增强-操作class

对于样式的增强-操作style

v-model应用于其他表单元素

计算属性

概念:

语法:

computed计算属性和methods方法的区别

computed计算属性:

语法:

缓存特性(提升性能):

mehods方法:

语法:

计算属性完整写法

watch侦听器(监视器)

        语法:

---

指令修饰符

通过"."指明一些指令后缀,不同后缀封装了不同的处理操作  ->简化代码

(1) 指令修饰符

        @keyup.enter  ->键盘回车符监听

(2)v-model修饰符

        v-model.trim  ->去除首尾空格

        v-model.number  ->转数字

(3)事件修饰符

        @事件名.stop  ->组织冒泡

                等同于给函数设定 e.stopPropagandation()

        @事件名.prevent  ->组织默认行为

v-bind对于样式控制的增强

        为了方便开发者进行样式控制,Vue扩展了v-bind的语法,可以针对class类名和style行内样式进行控制

对于类的增强-操作class

        语法 :class  = "对象/数组"

(1)对象 ->键就是类名,值是布尔值.如果值为true,有这个类,否则没有这个类

<div class="box" :class="{类名1:布尔值 , 类名2:布尔值}"></div>

适用场景:一个类名,来回切换(tab栏切换)

(2)数组 ->数组中所有的类,都会添加到盒子上,本质就是一个class列表

<div class="box" :class="[ 类名1,类名2,类名3 ]"></div>

适用场景:批量添加或删除类

对于样式的增强-操作style

语法: :style = "样式对象"

<div class = "box" :style="{css属性名1:css属性值,css属性名2:css属性值}"></div>

注意:不支持短横线的css属性,例如background-color需要改成'background-color'加个引号或者backgroundColor驼峰命名

适用场景:某个具体属性的动态设置

v-model应用于其他表单元素

常见的表单元素都可以用v-model绑定关联 ->快速 获取 或设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法来更新元素

输入框 input : text  -->value

文本域 textarea  -->value

复选框 input:checkbox  -->checked

单选框 input:radio -->checked

下拉菜单 select  -->value

计算属性

概念:

        基于现有的数据,计算出来的新属性.依赖的数据变化,自动重新计算.

语法:

        (1)声明在computed配置项中,一个计算属性对应一个函数

        (2)使用起来和普通属性一样使用{{ 计算属性名 }}

this.list.reduce((sum,item) => sum +item.score,0)计算数组求和

computed计算属性和methods方法的区别

computed计算属性:

作用:封装了一段对于数据的处理,求得一个结果

语法:

(1)写在computed配置项中

(2)作为属性,直接使用  ->this.计算属性 {{ 计算属性 }}

缓存特性(提升性能):

计算属性会对计算出来的结果缓存,再次使用直接读取缓存,依赖项变化了,会自动重新计算  ->并再次缓存

mehods方法:

作用:给实例提供一个方法,调用以处理业务逻辑

语法:

(1)写在methods配置项中

(2)作为方法,需要调用  ->this.方法名()  {{ 方法名() }}  @事件名 ="方法名"

计算属性完整写法

计算属性默认的简写,只能读取访问,不能"修改"

如果要"修改" ->需要写计算属性的完整写法

computed: {

        // 简写 -> 获取,没有配置设置的逻辑

        //fullName () {

        //        return this.firstName + this.lastName

        //}

        //完整写法 -> 获取 +设置

        fillName: {

                //(1) 当fullName计算属性,被获取求值时,执行get (有缓存优先执行缓存里的方法)

                //        会将返回值作为,求值的结果

                get () {

                        return this.firstName + this.lastName

                }

                //        (2)当fullName计算属性,被修改赋值时,执行set

                //        修改的值,传递给set方法的形参

                set (value) {

                        console.log(value)

                }

}

watch侦听器(监视器)

        作用:监视数据变化,执行一些业务逻辑 或异步操作.

        语法:

        (1)简单写法 ->简单类型数据,直接监视

        (2)完整写法 ->添加额外配置项

                1.deep:true 对复杂类型深度监视

                2.immediate:true 初始化立即执行一次handler方法