Vue知识点

Vue知识点

概述

前端框架三驾马车 Vue React Angular
Vue是一款渐进式JavaScript前端框架
作者：尤雨溪
官网： link
插件案例： link
特点：
1.简单，上手方便
2.结合angular指令与react组件思维
3.生态丰富（插件多）api文档完善

实例化参数 new Vue

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

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()} } }}

< input v-focus=“flag”>

过滤-管道

1） 格式化数据
2） 使用 ：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的方式隐藏节点

列表渲染

1. v-for=“item in list” list 要遍历的数组 item 当前遍历的项目
2. v-for="(item,index) in list" index 当前遍历项的索引 从0开始
3. 使用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’:false}" key1的值为真，key1会被绑定，key2不会
3.数组方式 ：class="[c1,c2,c3]"

样式绑定

属性名去掉’-’ 下个字母大写 :

style="{‘fontSize’:‘48px’,‘color’:‘red’}"

动画

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

内置组件

transition
name 名称
mode:模式 in-out：先进再出 out-in：先出再进
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个css创建
2.keyframes关键帧 .fade-enter-avtive{animate:fadeIn ease 1s} .fade-leave-active{animate:fadeOut ease 1s}

/* 通过关键帧动画实现 */
@keyframes fadeIn{
from{opacity: 0;}
to{opacity: 1;}
}
@keyframes fadeOut{
0%{opacity: 1;}
100%{opacity: 0;}
}
.fade-enter-active{
animation: fadeIn 1s ease;
}
.fade-leave-active{
animation: fadeOut 0.7s ease;
}

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

< transition enter-active-class=“slideIn animated” enter-leave-class=“hinge animated” >

组件

1.一段可以重复利用的代码块
全剧组件 Vue.component("组件名“，{template：``}}

局部组件 const steper = {template: ``}
注册组件 new Vue({ components:{steper} })
使用组件 < steper>< /steper>