Vue基础-day-02（表单操作，自定义指令，计算属性，生命周期，过滤器，生命周期）

常用特性概览

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

表单操作

获取单选框中的值

• 通过v-model

   
   男

   
   女

获取复选框中的值

• 通过v-model
• 和获取单选框中一样的
• 复选框CheckBox这种的组合时，data和hobby我们把数据定义为数组 否则无法实现多选

    


   爱好：
   
   篮球
   
   唱歌
   
   写代码
 

获取下拉框和文本的值

• 通过v-model

 

      职业：
       
       
      
          请选择职业...
          教师
          软件工程师
          律师
      
         
        
  

表单修饰符

.number 转换为数值

• 注意点：
• 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
• 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

//自动将用户的输入值转为数值类型

.trim自动过滤用户输入的首尾空白符

• 只能去掉首尾的 不能去除中间的空格

//自动过滤用户输入的首尾空白字符

.lazy 将input事件切换成change事件

• .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
• 在失去焦点 或者 按下回车键时才更新

自定义指令

内置指令不能满足我们特殊的需求
Vue.directive注册全局指令

//使用自定义的指令，只需要在对用的元素中，加上“v-” 的前缀形成类似于内部指令“v-if”,"v-text"形式

自定义带参数的指令

//自定义带参数的指令
Vue.directive("color",{
bind:function(el,binding){
console.log(binding.value.color)
el.style.backgroundColor=binding.value.color
}
})

var vm=new Vue({
el:'#app',
data:{
msg:{
color:"orange"
        }
    }
})

自定义局部指令

• 局部指令，需要定义在 directives 的选项 用法和全局用法一样
• 局部指令只能在当前组件里面使用
• 当全局指令和局部指令同名时以局部指令为准

计算属性 computed

计算属性的用法
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

{{reverseString}}


var vm = new Vue({
      el: '#app',
      data: {
        msg: "hello"
      },

computed:{
reverseString:function(){
return this.msg.split("").reverse().join("")
}
}

计算属性与 方法的区别
计算属性是依赖于数据的缓存
方法不存在缓存

{{reverseString}}


var vm = new Vue({
      el: '#app',
      data: {
        msg: "hello"
      },

computed:{
reverseString:function(){
// return this.msg.split("").reverse().join("")
var total=0;
for(var i=0;i<=100,i++){
total=total+i
// console.log(total)
// 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果    
return total
}
},
methods:{
reverseMessage:function(){
return this.msg.split("").reverse().join("")
}
}

侦听器 watch

侦听器是侦听data里面的属性值的变化
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

 

        

            名：
            
        
      
        
        

            姓：
            
        
      
        
        
{{fullName}}
    

  

过滤器

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

• Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
• 过滤器可以用在两个地方：双花括号插值和v-bind表达式。
• 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
• 支持级联操作
• 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本
• 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

自定义过滤器
过滤器的使用

{{msg|upper}}

{{msg|upper|lower}}

局部过滤器
filters:{
capitalize:function(){}
}

  

    
      
    
{{msg | upper}}
    
    
{{msg | upper | lower}}
    
测试数据
  

过滤器传递参数

    

        
        {{ message | filterA('arg1', 'arg2') }}
    
    

带参数的时间过滤器

    

        
{{data|format('yyyy-MM-dd hh-mm-ssss')}}
    
    
    

生命周期

• 事物从出生到死亡的过程
• Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

beforeCreate
在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了

created
在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来

beforeMount
在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已

mounted
el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件

beforeUpdate
数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的

updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的

beforeDestroy
实例销毁之前调用

destroyed
实例销毁后调用

数组变异方法

• 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
• 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push()
往数组最后面添加一个元素，成功返回当前数组的长度

pop()
删除数组的最后一个元素，成功返回删除元素的值

shift()
删除数组的第一个元素，成功返回删除元素的值

unshift()
往数组最前面添加一个元素，成功返回当前数组的长度

splice()
有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值

sort()
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组

reverse()
reverse() 将数组倒序，成功返回倒序后的数组

替换数组

• 不会改变原始数组，但总是返回一个新数组

filter
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组

slice
slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

动态数组响应式数据

• Vue.set(vm.items,index,newValue) 让 触发视图重新更新一遍，数据动态起来
• 第一项是要处理的数组的名称 、
• 第二项是要处理的数组的索引、
• 第三项是要处理的数组的值
• vm.$set(vm.items,index,newValue) 让 触发视图重新更新一遍，数据动态起来