• 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
          阻止默认事件
      • 系统修饰符
        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
Logo

前往低代码交流专区

更多推荐