vue基础之常用特性

vue 常用特性

表单基本操作

• 获取单选框中的值

  通过v-model

  
  
  
  
  
  
      男
      
      女
      
  
  
  

• 获取复选框中的值
  1. 通过v-model
2. 和获取单选框中的值一样
3. 复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选

  
   
  
      爱好：
     
     篮球
     
     唱歌
     
     写代码
  
  
  
  ```

  • 获取下拉框和文本框中的值

  通过v-model

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

  • 表单修饰符

  1 .number 转换为数值

       **注意：**
       
       1. 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
       2. 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串
       
   
    `2  .trim  自动过滤用户输入的首尾空白字符`
       **注意：**
       
       1. 只能去掉首尾的 不能去除中间的空格
   
    `3  .lazy   将input事件切换成change事件`
           **注意：**
           
           1. lazy 修饰符延迟了同步更新属性值的时机。
           2. 即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上（失去焦点后才会触发）

  • 自定义指令

  1. 内置指令不能满足我们特殊的需求
2. Vue 允许我们自定义指令

  • Vue.directive 注册全局指令

  • Vue.directive 注册全局指令 带参数

  • 自定义指令局部指令

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

  • 计算属性 computed

  1. 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
2. 计算属性是基于它们的响应式依赖进行缓存的
3. computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

  
      商品数量：
      
      商品单价：
      
      总价:{{totalPrice}}
  
  
  

  • 计算属性与方法的区别

    `1. 计算属性与方法的区别:计算属性是基于依赖(依赖数据)进行缓存的，而方法不缓存`

    2. 依赖的数据不变化计算属性的方法是不执行第二次的
3. 如果计算属性的方法是一个耗时的话 数据不变的情况下可以直接拿出第一次计算的结果可以解决资源

  • 侦听器 watch

  1.使用watch来响应数据的变化
2. 一般用于异步或者开销较大的操作
3. watch 中的属性 一定是data 中 已经存在的数据
4. 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

  
          
  
              名：
              
                      
               
          
          
  
              姓：
              
                      
             
          
          
  {{fullName}}
  
  
  

  • 过滤器

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

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

  • 过滤器中传递参数

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

  • 生命周期

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

  beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
  created	在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
  beforeMount	在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
  mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
  beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
  updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
  beforeDestroy	实例销毁之前调用
  destroyed	实例销毁后调用

  • 数组变异方法

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

  push()	往数组最后面添加一个元素，成功返回当前数组的长度
  pop()	删除数组的最后一个元素，成功返回删除元素的值
  shift()	删除数组的第一个元素，成功返回删除元素的值
  unshift()	往数组最前面添加一个元素，成功返回当前数组的长度
  splice()	有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
  sort()	sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
  reverse()	reverse() 将数组倒序，成功返回倒序后的数组

  • 替换数组

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

  filter	filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  concat	concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
  slice	slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

  • 动态数组响应式数据

  Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来
a是要更改的数据 、 b是数据的第几项、 c是更改后的数据