Vue学习笔记（一）—— 经常使用特性

简介

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

Vue 经常使用特性

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

1.1 表单操做

一、基于表单的操做

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

二、表单域修饰符

• number ：转化为数值
• trim ： 去掉开始和结尾的空格
• lazy ： 将input事件切换为change事件

<input v-model.number="age" type="number" />

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

1.2 自定义指令

一、为何须要自定义指令？

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

二、自定义指令的语法规则（获取元素焦点）

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

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

三、自定义指令用法

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

四、带参数的自定义指令（改变元素背景色）

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

五、指令用法

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

六、局部指令

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

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

1.2 计算属性

一、为什么须要计算属性？

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

二、计算属性的用法

computed: {
    reversedMessage : function (){
        return this.msg.split('').reverse().join('')
    }
}

<input type="text" value='{{reversedMessage}}' />

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

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

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

1.3 侦听器

一、侦听器的应用场景

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

二、侦听器的用法

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

三、案例场景

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

1.4 过滤器

一、过滤器的做用是什么？

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

二、自定义过滤器

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

三、过滤器的使用

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

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

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

四、局部过滤器

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

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

五、带参数的过滤器

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

六、使用方式

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

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

1.5 生命周期

一、 主要阶段

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

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

二、Vue示例的生产过程

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

总结

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