Vue学习笔记(一)—— 常用特性

简介

Vue的常用特性其实也是Vue语法的一部分,只是为了学习方便,所以单独拿出来进行说明,学习上也显得更清晰。
对于基础部分,可用参考官网上的介绍。

Vue 常用特性

  • 表单操作
  • 自定义指令
  • 计算属性
  • 侦听器
  • 生命周期

1.1 表单操作

1、基于表单的操作

  • Input 单行文本
  • textarea 多行文本
  • select 下拉多选
  • radio 单选框
  • checkbox 多选框

2、表单域修饰符

  • number :转化为数值
  • trim : 去掉开始和结尾的空格
  • lazy : 将input事件切换为change事件
<input v-model.number="age" type="number" />

input事件输入的时候就触发,而change事件到失去焦点时才触发

1.2 自定义指令

1、为什么需要自定义指令?

内置指令不满足需求,关于内置指令可参考此处说明。

2、自定义指令的语法规则(获取元素焦点)

也可进入自定义指令的官网的地址查看详细说明。

Vue.directive('focus', {
    inserted: function(el){
        // 获取元素焦点
        el.foucus();
    }
})

3、自定义指令用法

<input type="text" v-focus />

4、带参数的自定义指令(改变元素背景色)

Vue.directive('color', {
    bind: function(el,binding){
        // 改变元素背景色
        el.style.backgroundeColor = binding.value.color;
    }
})

5、指令用法

<input type="text" v-color='{color:"orange"}' />

6、局部指令

局部指令是在组件中定义的,定义后只能在此组件中使用。而上面定义的全局指令可用在任何地方使用。

directives: {
    focus: {
        // 指令的定义
        inserted: function(el) {
            el.focus();
        }
    }//可用定义多个局部指令
    ...
}

1.2 计算属性

1、为何需要计算属性?

表达式的计算逻辑可能会比较复杂,使用计算属性可用使模板内容更加简介。

2、计算属性的用法

computed: {
    reversedMessage : function (){
        return this.msg.split('').reverse().join('')
    }
}
<input type="text" value='{{reversedMessage}}' />

使用计算属性,直接使用函数名,不需要加小括号;计算属性是基于data中定义的数据的,如果数据改变了,计算属性也会改变;必须有返回值。

3、计算属性与方法的区别

  • 计算属性是基于他们的依赖进行缓存的
  • 方法不存在缓存

1.3 侦听器

1、侦听器的应用场景

数据变化时执行异步或开销较大的操作。

2、侦听器的用法

watch : {
    firstName: function(val) {
        // val表示变化后的值
        this.fullName = val + ' ' + this.lastName;
    },
    lastName: function(val) {
        this.fulllName = this.firstName + ' ' + val;
    }
}

3、案例场景

  • 验证用户名称是否可用(比如注册用户时)
    • 通过v-model实现数据的绑定
    • 需要提供提示信息
    • 需要侦听器监听输入信息的变化
    • 需要修改触发的事件

1.4 过滤器

1、过滤器的作用是什么?

格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等。

2、自定义过滤器

Vue.filter('过滤器名称', function(value) {
    // 过滤器的业务逻辑
})

3、过滤器的使用

// 插值表达式
<div> {{msg | upper}}div>

// 级联处理,upper过滤器的结果作为lower过滤器的输入
<div> {{msg | upper | lower}}div>

// 属性绑定的值
<div v-bind:id="id | formatId">div>

4、局部过滤器

局部过滤器是在组件中定义的,定义后只能在此组件中使用。而上面定义的全局过滤器可用在任何地方使用。

filters: {
    upper: function (val){
        return val.charAt(0).toUpperCase() + val.slice(1);
    }
}

5、带参数的过滤器

Vue.filter('format',function(value, arg1) {
    // value就是过滤器传递过来的参数,如下面的date,后面的参数才是需要处理的
})

6、使用方式

{{date | format('yyyy-MM-dd')}}

此部分内容也可参考官网说明了解更多内容。

1.5 生命周期

1、 主要阶段

  • 挂载(初始化相关属性)
    • beforeCreate
    • created
    • beforeMount
    • mounted
  • 更新(元素或组件的变更操作)
    • beforeUpdate
    • updated
  • 销毁(销毁相关属性)
    • beforeDestroy
    • destroyed

mouted钩子函数被触发,表示页面已经初始化完成,模板已经存在。初始化页面数据可在此处完成。

生命周期图片

2、Vue示例的生产过程

  • beforeCreate :在示例初始化之后,数据观测和事件配置之前被调用。
  • created :在示例创建完成后别立刻调用。
  • beforeMount :在挂载开始之前被调用。
  • mountedel被新创建的vm.$el替换,并挂载到实例上之后调用该钩子。
  • beforeUpdate :数据更新时调用,发生在虚拟DOM打补丁之前。
  • updated :由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
  • beforeDestroy :实例销毁之前调用。
  • destroyed :实例销毁后调用。

总结

以上就是Vue的常用特性的简单介绍,以帮助对知识的巩固和梳理。也是对自己学习过程的一个小小总结。接下来将学习的是Vue的组件开发。

你可能感兴趣的:(管理/方法/理论,web前端)