@文章来源：拉钩大前端就业训练营-念念

vue

vue 简介

• 前端流行框架
• 渐进式框架

vue 的核心特性

• 数据驱动视图
  • MVVM model view viewmodel
  • model 数据
  • view 视图模板
  • viewmodel 业务逻辑处理代码
  • 优缺点：
    • 解放了 dom 操作。view 和 model 处理分离，降低了代码的耦合度
    • 双向绑定的 bug 调试难度增大
    • 大型项目的的 view 和 model 过多，维护成本高
• 组件化开发

vue 基础语法

vue 实例

• vue 实例是通过 vue 函数创建的对象，是使用 vue 功能的基础

const app = new Vue({
  el: "#app",
  data: {
    msg: "例子",
  },
});

基础选项

• el 选项 选取一个 dom 元素作为 vue 实例的挂载目标

  • 只要挂载元素内部才会被 vue 进行处理，外部为普通 html 元素
  • MVVM view 层
  • 可以是 css 选择器格式的字符串也可以是 HTMElement 实例，但不能是 html 或 body
  • vm.$el 可以查看当前元素是否挂载成功
  • 未设置 el 的 vue 实例，可以通过 vm.$mount()进行挂载，参数与 el 规则相同

• 插值表达式 {{}}

  • 只能书写在标签内容区域，可以与其他内容混合
  • 内部只能书写 javascript 表达式，不能书写语句

• data 选择

  • 用于存储 vue 实例需要使用的数据，值为对象类型
  • data 中的数据为响应式数据，在发生改变时，视图会自动更新
  • data 中存在数组时，索引操作与 length 操作无法自动更新视图，可以借助 vue.set()代替操作

• methods 选项

  • 用于存储需要在 vue 实例中使用的函数
  • methods 中方法可以通过 vm.方法名访问
  • 方法中的 this 为 vm 实例，可以便捷访问 vm 数据等功能

指令

• 指令的本质就是 html 的自定义属性

内容处理

• v-once 指令
  • 数据只会渲染一次，后续不会随着数据的变化而变化
• v-text 指令
  • 元素内容整体替换为指定纯文本数据
  • 不会识别 html 元素标签
  • 会替换标签的原始内容
• v-html
  • 元素内容整体替换为指定的 html 文本
  • 识别 html 元素标签
  • 同样会替换标签的原始内容
• v-bind 指令
  • 语法糖： :title
  • 用于动态绑定 html 属性
  • 绑定 class 属性，通过 v-bind 绑定的 class 可以与普通 class 属性共存
  • 绑定 style 属性
    • 推荐将样式写在 data 中，不建议写在行内

渲染指令

• v-for 指令

  • 用于遍历数据渲染结构，常用的数组与对象均可遍历
  • 绑定 key 属性的目的
    • index 不是唯一不能改变
    • 一般设置 item，必须保证 key 值的唯一
    • 通过<template>标签设置模板占位符，可以将部分元素或内容作为整体进行操作

  <li v-for="item in obj">{{item}}</li>
  <li v-for="(item,index) in obj">{{index}}--{{item}}</li>
  

• v-show 控制元素的显示和隐藏

  • 可以直接是布尔值也可以是条件表达式，可以通过 data 中的数据处理
  • template 无法使用 v-show 指令
  • 通过 css 中的 display 来控制元素的显示隐藏

• v-if

  • 用于条件控制元素的创建与移除

• v-else 和 v-if 联用

• v-else-if

事件处理

• v-on 事件绑定

  • 语法糖： @click
  • 事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序
  • 可以从参数中接收事件对象，事件对象可以不用传递，如果传递参数第一个参数是事件对象，第二次才是我们需要传递的对象
  • 在视图中可以通过$event 访问事件对象

• 修饰符

  • 事件修饰符
    • .prevent 修饰符
      • 用于阻止默认行为
    • .stop 修饰符
      • 阻止冒泡 事件传播
    • .once 修饰符
      • 设置事件只能执行一次
  • 按键修饰符
    • .keyup.按键
      • 可以直接是键盘上的符号，也可以是 ASCII 码
      • 按键修饰符可以连写
    • 特殊按键 esc enter delete 功能按键
  • 系统修饰符
    • ctrl alt shift 等按键
    • 单独点击系统操作符无法操作
    • 通过与其他按键组合使用
    • .ctrl 修饰符
      • @keyup.ctrl.q
  • 鼠标修饰符
    • .left
    • .right
    • .middle
  • v-model 的修饰符
    • .trim 清除当前用户输入的首尾两端空格清除
    • .lazy 懒加载修饰符
    • .number 设定用户输入的只能是数字

表单输入绑定

-v-model

• input，textarea select 元素设置双向数据绑定

• 单选按钮绑定 type="radio"

  • 通过 v-model 绑定为同一个值实现单选

• 复选框绑定

  • 单个复选框
    • 设置 data 中的值为一个空字符串
    • 值为 boolean 值
  • 多个复选框
    • 设置 data 中的值为一个空数组
    • 值为复选框的 value 值

• 选择框的绑定

  • v-model 绑定给 select
  • 单选
    • 设置 data 中的值为一个空字符串
    • 值为 option 中选中的 value
  • 多选
    • 设置 data 中的值为一个空数组
    • 值为 option 中选中的 value

• 小结

  • input 输入框：绑定字符串值
  • textarea：绑定字符串的值
  • radio: 绑定字符串值
  • 复选框： 单个绑定布尔值，多个绑定数组
  • 选择框： 单选绑定字符串，多选绑定数组

进阶语法

自定义指令

• 指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装

• 自定义全局指令

  • 可以被任意 vue 实例或组件使用的指令

  Vue.directive("focus", {
    inserted(el, binding) {
      el.focus();
    },
  });
  

• 自定义局部指令

  new Vue({
    el: "#app",
    data: {},
    directives: {
      focus: {
        //插入以后进行
        inserted(el) {
          el.focus();
        },
        bind(){
          // 只绑定一次
        },
        update(){
          // 更新时执行
        },
        unbind(){
          // 与元素解绑时执行
        }
      }
    }
  });
  

过滤器

• 用于进行文本内容格式化处理

• 全局过滤器

    <p :title="value | 过滤器名称"></p>
  

    Vue.filter('过滤器名称',(value)=>{
      return '处理结果'
    });
  

• 局部过滤器

    new Vue({
      ...
      filter:{
        filterA(value){
          return 'value处理后结果'
        }
      }
    })
  

计算属性

• vue.js的视图不建议书写复杂的逻辑，不利于维护
• 计算属性使用时为属性形式，访问时会自动执行对应的函数
• computed具有缓存行，methods没有
• computed通过属性名访问，methods需要调用
• computed仅适用于计算属性

  new Vue({
    ...
    computed:{
      getResult(){
        console.log('计算属性被执行了')
      }
    }
  })

• 计算属性的setter

  new Vue({
    ...
    computed:{
      getResult:{
        getter(){
          return this.firstName + this.lastName;
        },
        setter(newValue){

        }
      }
    }
  })

侦听器

• 侦听器用于监听数据变化并执行指定操作
• 为了监听对象内部值的变化，需要将watch书写为对象，并设置deep:true。这时通过handler设置处理函数
• 当更改(非替换)数组或对象时，回调函数中的新值与旧值相同，因为他们的引用都指向同一个数组，对象
• 注意:数组操作不要使用索引与length,无法触发侦听器函数

  new Vue({
    ...
    watch:{
      value(newValue,oldValue){
         
      },
      obj:{
        deep:true,
        handler(val,oldval){
          console.log('obj被修改了',val,oldval)
        }
      },
      arr(val,oldval){
        console.log(val,oldval);
      }
    }
  })

Vue devTools

• vue.js官方提供的用来调试vue应用工具
• 去谷歌应用商品下载到扩展程序
• 注意
  • 网页必须应用了vue.js功能才能看到vue DevTools
  • 网页必须使用vue.js 不是vue.min.js
  • 网页需要在http协议下打开，而不是file协议下打开

vue.js生命周期

• vue.js生命周期指的是vue实例的生命周期
• vue实例的生命周期指的是实例从创建到运行再到销毁的过程
• 创建阶段：
  • beforeCreate:实例实例初始化之前调用 -- 很少用
  • created: 实例创建后调用
  • beforeMount: 实例挂载之前调用
  • mounted: 实例挂载完毕
• 运行阶段：
  • beforeUpdate: 数据更新后，视图更新前调用 -- 操作DOM访问的是更新前的数据
  • updated: 视图更新后调用
  • 特点：按需调用
• 销毁阶段：
  • beforeDestroy:实例销毁之前调用
  • destroyed: 实例销毁后调用