2021-11-1 Vue基础认知

目录

• 概述
• 实例化参数
• 计算
• 监听
• 自定义指令
• 过滤管道
• 指令
• 列表渲染
• 事件指令
• 表单绑定指令
• 类绑定
• 样式绑定
• 动画
• 组件

 概述

• 前端的三架马车 Vue 、 React 、 Angular
• vue是一款渐进式JavaScript前端框架
• 特点：

1. 简单，上手方便
2. 结合Angular指令与react组件思维
3. 生态丰富（插件多）API文档完善

实例华参数 new  Vue

el："#app"	选择目标标签
data:{}	指定数据
data:(){return{}}	一个函数返回一个对象
computed	计算
watch	监听

计算computed

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

  computed:{
  rmsg(){
  return  this.msg.split("").reverse().join("")
  }
  }

 监听watch

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

  watch:{
  "num":{
  handler(nval,oval){}
  deep:true
  }
  }

自定义指令 directives

bind	绑定执行一次
insert	插入执行一次
update	每更新执行一次

directives:{
"v-focus":{
update(el,binding){
if(binding.value){el.focus()}
}
}
}

过滤（管道）

• 格式化数据
• 使用

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  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="值"    “值”必须是唯一
• 添加key属性可以优化v-for的渲染，让Vue更好识别当前渲染的节点，特别是在排序，过滤等操作的时候；不建议key的值使用循环的索引

 事件指令

v-on:事件类型="响应函数"	v-on:click="say()"
@click="say()"	事件的简写
@click="num++"	行内事件响应
事件修饰符	.stop 阻止事件冒泡 .prevent 阻止默认事件 .once 只执行一次
@click.stop.once.prevent="num++"	事件的修饰符可以同时写多个
按键修饰符	.up .down .left .right .delete .enter .space .esc等
事件对象	$event

表单绑定指令

• v-model    让表单的值与数据绑定在一起
• <input type="checkbox">    默认选中值是true，不选中是false
• <input type="checkbox" name="fruit" v-model="list">     如果是多个把选中的值添加到list数组中
• 修饰符有：.number 数组     .trim   移除两端空白

类绑定 

1.  属性    :class="值"
2. 对象 当对象的属性为真实，该属性作为class绑定
   :class="{'key1':true,'key2':true}"
   key1的值为真，key会被绑定，key2不会
3. 数组方式
   :class="['c1','c2','c3',...]"

样式绑定 

• 属性名去掉“-”，下个字母大写
  style="{'color':'red','fontSize':'48px'}" 

动画 

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

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

• 动画的类名

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

• 创建动画的形式

1. 动画类的6个关键帧
   .keyframes关键帧

   .slide-enter-active{transition: all 1s ease;}
   .slide-leave-active{transition: all .3s ease;}

    
2. 引用第三方动画库指定进入的class与离开的class

   <transition enter-active-class="bounceInRight animated" leave-active-class="hinge animated">

组件 

• 是一段可以重复利用的代码段
• 全局组件

  Vue.component("btn",{
  	template:`<button @click="num++">{{num}}</button>`,
  	data(){
  	    return {num:1}
  		}
  })

   
• 注册组件

  new Vue({
  	el:"#app",
  	components:{steper}
  })

• 使用组件

  <steper></steper>