vue概念及基础

wendongsheng1

已于 2022-10-11 20:27:44 修改

阅读量2.5k

点赞数

文章标签： vue.js 前端 javascript es6 前端框架

于 2022-09-19 16:53:04 首次发布

本文链接：https://blog.csdn.net/c_l_a_n_n_d/article/details/126936701

版权

vue
- 特点
  - 渐进式javas框架
- 优点
  - 中文文档，生态丰富（插件多），上手简单
  - 指令，组件，虚拟化dom
- 导入与实例化
  - 模板
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
    <title>第一个vue程序</title>
    </head>
    <body>
    <div id="app"> {{msg}} </div>
    <script src="./js/vue.js"></script>
    <script>
    new Vue({
    el:"#app",//指定vue的模板css选择器
    data:{msg:"hello Vue!"}// 指定data数据 })
    </script>
    </body>
    </html>
- 指令与模板
  - 特点
    - 指令就是v开头的特殊属性它的值预期为JavaScript单行表达式
    - 可以渲染实例的值
      v-text=‘msg’
    - 数学运算
      v-text=‘2+3’
    - 使用js表达式
      v-text=‘msg.lenght’
    - 如果是文本需要加‘’
      v-text="'你,'+msg"
- vue的实例
  - var vm=new Vue（{}）
  - vm就是new Vue创建的实例
- 文本渲染指令
  - {{}}
  - v-text
    文本渲染指令
  - v-html
    html文本渲染指令
- 条件渲染指令
  - v-if
    以dom方式隐藏
    少量切换使用
  - v-else
  - v-show
  - v-show
    以css方式隐藏
    频繁切换使用
- 遍历指令
  - v-for
    - 字符串，数字，列表，对象进行遍历
    - <p v-for="(item,index) in list">{{index+1}}--{{item}}</p>
      item 遍历的元素（自定义名称）
      index遍历的下标（键名）
      list 被遍历的数据
  - v-bind:key
    - 值必须唯一
    - vue在渲染列表的时候更加优化
- 属性绑定
  - v-bind:title=“”
  - :class :id :disabled
  - :title=""
- 事件
  - v-on:click=“”
    @click=“”
  - 事件的参数
    - @click="a"
      默认传入事件对象
      @click="a(3)"传入实参3
      @click="a($event 3)"
      传入事件对象，和参数3
  - 事件修饰符
    - once
      只执行一次
    - stop
      阻止事件冒泡
    - prevent
      阻止默认事件
  - 按键修饰符
    - 事件处理 — Vue.js (vuejs.org)
  - 系统修饰符
    ctrl
    shift
    ......
  - 鼠标修饰符
    left
    right
    middle
    ......
- 表单
  - v-model=“num”
    将num数据和表单绑定
  - 单行多行
  - 多选
    - 选中true 未选择false
    - 多个值，绑定的数组动态添加/移除当前元素的value
  - 单选
  - 下拉selsct
  - 表单修饰符
    - lazy
      change事件触发数据更新
    - number
      强制转换为数字
  - v-model='num'
    简写
    - :value='num'
    - @input='num=$event.target.value'
- vue操作
  - 让指令联接数据与dom
  - 业务操作数据，实现自动更新dom
- class
  - 文本
    :class='active'
    没有加单引号的active是一个变量不是字符串
  - 对象
    :class='{'active':flag}'
  - 数组
    ：class='list'
- style
  - :style="{color:'red',fontSize:'32px'}"
- vue选项
  - el 模板
  - data 数据
  - methods 方法
  - directives 指令
  - filters 过滤
  - watch 监听
    - 监听数据的变化执行回调函数
    - watch:{
      'obj':{
      handler(nval){
      
      }
      depp:true
      }
      }
  - computed 计算
    - 从现有数据计算出新的数据（只读）
    - computed:{
      'total':function(){
      return XXX
      }
      }
  - props 属性
  - created 创建完毕
  - componets 组件
    - 作用
      - 组件是vue的一个重要的特点
      - 实现多人协作开发
      - 通过组件划分降低开发难度
      - 实现复用，降低重复劳动
    - 组件解释
      - 组件就是定义好的一功能模块
        建议多用props，少在组件中用打他（降低组件的耦合性）
    - 定义与使用
      - 定义
        注意：template有且只有一个根节点
        
        const steper={
        template:`<span></span>`
        }
      - 在父组件中注册
        components：{steper:steper}
      - 在组件的模板中使用
        <steper></steper>
    - 传参
      - 父传子
      - 子传父
        子
        this.$emit('update:visible',false)
        
        父
        监听事件，修改值
        <modal @update:visible='visible=$event'>
    - 插槽
      - 插槽：组件的嵌套内容
      - 父
        <moeal>
        <input/>
        <button>确定</button>
- 动画
  - 两个状态形成过渡
  - 进入离开
    v-show v-if
  - transition
    单个动画
    - 属性
      - name 名称
      - enter-active-class="" 指定进入class
      - leave-active-class=“” 指定离开class
    - 产生状态与类
      - v-enter-active
        进入整个状态
        v-enter
        进入开始状态
        
        v-enter-to
        进入结束状态
- 回顾
  - 数组
    - indexOf()
      查找对应下标
    - 删除
      - shift
        前删除
      - pop
        后删除
      - splice
        中间删除
    - 添加
      - unshift
        前
      - push
        后
      - splice
    - 翻转
      revese
    - 转字符串
      join（）
    - 连接数组
      concatenate（）
    - 高阶
      - filter 过滤
      - forEach 遍历
      - map 映射
      - reduce 累计
      - some 有一个
      - every 每一个
      - find 查找符合条件的元素
      - findindex 查找符合条件的元素下标
      - sort 排序
  - 字符串
    - indexOf lastindexOf
      查询字符串下标，无返回-1
    - split('')
      分割为数组
    - slice(a,b)
      切割字符
    - subString（a,b）
      截取字符串（按下标）
    - subStr（a,b）
      截取字符串（按长度）
  - json
    - eval()
      把字符串当作js执行
    - JSON.parse(str)
      json字符串转换为js对象
    - JSON.stringify(obj)
      把js对象转化为json字符串
  - 本地存储
    localStorage
    - getItem(key)
      获取
    - setItem(key,value)
      存储
    - removeItem(key)
      删除
    - clear()
      清空
- 生命周期
  - 概念
    - 组件/vue在创建到销毁会经历一系列特殊过程，称为生命周期
    - 在过程中执行的回调函数称为生命周期钩子函数
  - 作用
    - 可以让我们在恰当的时期，做一些自动操作
      网络请求数据
      监听dom事件
      执行定时器
      清除定时器
      解除监听
  - - before
    - create创建
    - mount 挂载
    - update更新
    - destroy销毁
  - 创建前后
    - beforeCreate
      - 特点：有this 没有data 没有$el
    - created
      - 特点：有data 没有$el
      - 作用：
        ajax请求
        本地数据读取
        window事件监听
        定时器开启
  - 挂载前后
    - beforeMount
      - 特点：有$el 没有渲染
    - mounted
      - 特点：页面有渲染
      - 作用：
        可以和created重复
        可以操作dom
  - 更新前后
    - beforeUpdate
      - 特点：数据已更新，没有渲染
    - updated
      - 特点：数据更新 dom已渲染
  - 销毁前后
    - beforeDestroy
      - 特点：有this ，能方法实例的data
      - 作用：
        移除事件监听
        清除定时器
    - destroyed
      - 特点：切断组件与dom的联系
  - 全局方法/属性
    - $el组件/vue的dom节点
    - $destroy()销毁当前组件/vue的方法
    - $nextTick(callback)
      数据更新，等待dom更新后执行callback回调函数
    - $set()
    - $rsfs
    - $mount()手动挂载el