2021-11-01

学习Vue

• 概述
• 基础
• 指令
• 动画
• 组件

概述

• 前端三架马车

1. vue
2. React
3. 3.Angular

• vue 是一款渐进式JavaScript前端框架
• 作者：尤雨溪
• 官网：cn.vuejs.org
• 插件案例：
  https://github.com/opendigg/awesome-github-vue
• 特点：
  简单，上手方便
  结合Angular指令与react组件思维
  生态丰富（插件多）API文档完善

基础

实例化参数

• el:"#app"
  选择目标标签
• data:{}
  指定数据
• methods
  定义事件
• computed
  计算
• watch
  监听

computed计算

从现有数据计算出新的数据

watch监听

监听数据变化，并执行回调函数handler

过滤-管道

格式化数据

• 使用
  1.{{num|fix}}
  2.{{num|fix(2)}}
  3.v-text=“num|fix”
  filters:{

fix(value,arg){
  return value.toFixed(arg)
    }
}
//保留两位小数

指令

• 指令的值是可以简单的JavaScript命令

• 文本渲染指令
  {{}}
  v-text
  v-html（渲染html文本）

• 属性绑定
  v-bind：属性=“指令值”
  ：属性=“值”

• 条件渲染
  v-show css方式隐藏
  v-if
  v-else-if
  v-else
  频繁切换使用v-show
  一次切换用v-if
  v-show隐藏是通过css的方式隐藏节点

• 列表渲染
  v-for=“item in list” list要遍历的数组item 当前遍历的项目
  v-for=“（item，index）in list” index 当前遍历项的索引从0开始
  使用v-for务必 v-bind：key="" :key=“值”

• 事件指令
  v-on：事件类型=“响应函数”
  v-on：click=“say()”
  @click="“say()” 事件的简写

• 事件修饰符
  .stop阻止事件冒泡
  .prevent阻止默认事件
  .once 只执行一次

• 按键修饰符
  .up
  .down
  .left
  .right
  .deter
  .enter
  .space
  .esc

• 事件对象
  $event

• 表单绑定指令
  v-model 让表单的值与数据绑定在一起
  默认值是true 不选中值是false
  <input type=“checkbox” name="fruit"v-model=“list”> 如果是多个把选项中的值动态添加到list数组中

• 修饰符
  1.number数字
  2…trim移除两端空白

• 类绑定
  1.属性：class=“值”
  2.对象
  当对象的属性值为真，该属性作为class绑顶：class="{‘key1’:true,‘key2’:false}"
  key的值为真，key1会被绑定，key2不会
  3.数组方式
  ：class="[c1,c2,c3]"

• 样式绑定
  属性去掉-下个字母大写 ：style=""

动画

vue动画在内置组件transition包裹
会自动在动画的进入过程与离开过程添加类名

内置组件

1. transition
   - name名称
   - mode：模式
   - in-out：先进再出
   - out-in先出后进
   - enter-active-class 指定进入类名
   - leave-active-class 指定离开类名
2. transition-group

• 动画类

1. v-enter-active进入过程
   - v-enter进入前
   - v-enter-to 进入后
2. v-leave-active 离开过程
   - v-leave 离开前
   - v-leave-to 离开后

• 创建动画形式
  - 动画类6个css创建
  - keyframes关键帧
  .fade-enter-active{animate:fadeIn ease Is}
  .fade-leave-active{animate:fadeOut ease Is}
  - 应用第三方动画库指定进入的class与离开的class

<transiton>
enter-active-class="slideIn aimated"
leave-active-class="hinge aimated"
</transiton>

组件

• 一段可以重复利用的代码块

• 全局组件
  Vue.components（“组件名”，{template：``}）

• 局部组件
  const steper={template:``})

• 注册组件
  new Vue（{
  components:{steper}
  })

• 使用组件

<steper></steper>