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、使用方式

<div>{{date | format('yyyy-MM-dd')}} </div>

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

1.5 生命周期

1、 主要阶段

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

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

2、Vue示例的生产过程

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

总结

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