Vue基础二

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

表单操作

1.input单行文本

2.textarea多行文本

3.select下拉对选

4.radio单选框

5.checkbox多选框

6.表单修饰符

 - number 转化为数值
 - trim去掉开头和结尾的空格
 - lazy将input事件切换为change事件  change事件每次失去焦点的时候会触发 input输入内容的时候就会触发
<input v-model.number="age" type="number">

自定义指令

内置指令不满足需求
自定义指令语法规则（获取元素焦点）
Vue.directive('focus',{
inserted:function(el) {
//获取元素的焦点
el.focus();
}
})
自定义指令用法
<input type="text" v-focus>

带参数的自定义指令（改变元素背景色）
Vue.directive('color'),{
inserted:function(el,binding) {
el.style.backgroundColor=binding.value.color;
}
}
指令的用法
<input type="text" v-color='{color:"orange"}'>
局部指令  只能在本组件中使用
directives: [
focus: {
//指令的定义
inserted:function(el) {
el.focus()
}
}
}

计算属性

表达式的计算逻辑可能比较复杂，使用模板内容更加简洁
计算属性的用法
<div>{{reversedMessage}}</div>

computed: {
 reversedMessage: function() {
  return this.msg.split('').reverse().join('')
}
}
计算属性和方法的区别

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

 

过滤器

过滤器作用为格式化数据，比如该字符串格式化为首字母大写，将日期格式化为指定的格式等
 -自定义过滤器
 Vue.filter('过滤器名称',function(value){
 //过滤器业务逻辑
 
 })
 过滤器的使用
 <div>{{mag|upper}}</div>
<div>{{mag|upper|lower}}</div>
<div v-bind:id="id|formatId"></div>
局部过滤器
filters: {
capitalize:function(){
}
}

侦听器

 侦听器
 数据一旦发生变化就通知侦听器所绑定的方法
 侦听器的应用场景
 数据变化时执行异步或者开销较大的操作
 侦听器的用法
 watch: {
 	firstName: function(val){
 	this.fullName=val+''+this.lastName;
},
lastName：function(val){
this.fullName=this.fristName+''+val;
}
}
 数据的变化主要是通过val的变化 来改变的
 案例分析
验证用户名是否存在
1、通过v-model实现数据的绑定
2、需要提供提示信息
3、需要提供侦听器监听输入信息的变化
4、需要改变触发的事件
  侦听器侦听用户名的变化
  调用后台接口进行验证
  根据验证的结果调整提示信息
  

生命周期

主要阶段

 - 挂载（初始化相关属性）
   beforeCreate 
   create
   beforeMount
   mounted
 - 更新(元素或者是组件的变更操作)
   beforeUpdate
   updated
 -销毁(销毁相关属性)
  beforeDestroy
  destroyed
  
 - 

 - 

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

数组先关的API

变异方法（修改原有数据）

 - push()
 - pop()
 - shift()
 - unshift()
 - splice()
 - sort()
 - reverse()
 替换数组(生成新的数组)
 - filter()
 - concat()
 - slice()
 数组的响应式数据变化
  - Vue.set(vm.itms,indexOflten,newValue)
  - Vm.$set(vm.items,indexOfltem,newValue)Vue实例对象调用
   参数一表示要处理的数组名称
   参数二表示要处理的参数索引
   参数三表示要处理的数组的值