Vue基础--常用特性

常用特性与表单操作

1. 表单操作

• 1. 基于Vue的表单操作

常见的表单元素：

input 单行文本，textarea 多行文本，select 下拉多选，radio 单选框，checkbox 多选框

• 单选框实现单选

1、 两个单选框需要同时通过v-model 双向绑定 一个值
2、 每一个单选框必须要有value属性 且value 值不能一样
3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据

• 复选框实现复选

1、 复选框需要同时通过v-model 双向绑定 一个值
2、 每一个复选框必须要有value属性 且value 值不能一样
3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据

• 实现获取下拉框的选中状态

1、 需要给select 通过v-model 双向绑定 一个值
2、 每一个option 必须要有value属性 且value 值不能一样
3、 当某一个option选中的时候 v-model 会将当前的 value值 改变 data 中的 数据

• 获取文本域中的值

通过v-model 绑定一个值

• 2. 表单域修饰符

number：转化为数值
trim：去前后空格
lazy：将input事件切换change事件

2. 自定义指令

• Vue.directive 注册全局指令
• directives定义局部指令

• 自定义指令（获取元素焦点）

			Vue.directive('focus'{
                inserted:function(el){
                    el.focus();
                }
            })

自定义指令中如何携带参数

• 通过v-指令名= “参数”

3. 计算属性(把模板中的计算逻辑抽取出来)

• 在组件中添加

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

• 计算属性与方法的区别

计算属性基于它们的依赖（数据）进行缓存的 方法不存在缓存

4. 过滤器

• 过滤器作用

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

• 自定义过滤器

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

• 使用：

{{msg | 过滤器1 (| 过滤器2)}} :id=“id | 过滤器名”

• 局部过滤器

 			filter:{
                upper:function(value){  }
            }

• 带参数的过滤器

		Vue.filter('format',function(value,arg1){})
		//使用：
		{{data | format('yyyy-MM-dd')}}

5. 侦听器

• 应用场景：

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

• 侦听器的用法：

		 watch:{
                firstName:function(val){
                    this.fullName = val + this.lastName;
                },
                lastName:function(val){
                    this.fullName = this.firstName + val;
                }
            }

6. 生命周期

• 主要阶段

• 挂载（初始化相关属性）
  1.beforeCreate
  2.created
  3.beforeMount
  **4.mounted : 从这里就可以调用后台接口，填充在模板数据中
• 更新（元素或组件的变更操作）
  1.beforeUpdate
  2.updated
• 销毁（销毁相关属性）
  1.beforeDestroy
  2.destroyed