2021-11-01

目录

• 概述

• 实例化参数

• 计算

• 监听

• 自定义指令

• 过滤管道

• 指令

• 列表渲染

• 事件指令

• 表单绑定指令

• 类绑定

• 样式绑定

• 动画

• 组件

•  概述

前端的三架马车 Vue 、 React 、 Angular
vue是一款渐进式JavaScript前端框架
特点：
简单，上手方便
结合Angular指令与react组件思维
生态丰富（插件多）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()}
}
}
}
过滤（管道）
格式化数据
使用
{{ num | fix }}
{{ num | fix ( 2 ) }}
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   移除两端空白
类绑定 
 属性    :class="值"
对象 当对象的属性为真实，该属性作为class绑定
:class="{'key1':true,'key2':true}"
key1的值为真，key会被绑定，key2不会
数组方式
: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   离开后

创建动画的形式
动画类的6个关键帧
.keyframes关键帧
.slide-enter-active{transition: all 1s ease;}
.slide-leave-active{transition: all .3s ease;}
 
引用第三方动画库指定进入的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>