Vue知识总结

一.概述
前端框架的三驾马车

1. Vue

是一款渐进式js前端框架

作者：尤雨溪

官网: cn.vuejs.org

插件下载 https://github.com/opendigg/awesome-github-vue

2. React

3. Angular

二.实例化参数
new Vue({

el:"" 选择目标标签

data:{} 传入数据

methods:{} 绑定事件

computed:{} 计算

watch:{} 监听

})

三.指令
1.属性绑定

v-bind:属性="指令值"

v-model="x" 表单绑定指令

2.修改默认文字

{{}}

v-text

v-html

3.显示隐藏

v-show

v-if

v-else-if

v-else

4.遍历

v-for="item in list" 遍历元素

v-for="(item,index) in list" 遍历元素和下标

v-for="item in 10" 遍历数字

5.自定义指令

directives:{

bind 绑定执行一次

insert 插入执行一次

update 每更新执行一次

6.过滤管道

格式化数据

1.{{num|x}}

2.{{}num|x(2)}

3.v-text="num|fix"

}

四.事件指令
1.事件指令

(1). .stop阻止事件冒泡

(2). .prevent阻止默认事件

(3). .once只执行一次

(4). .done是否完成

(5). .unshift添加到头部

2.键盘指令

.up上 .down下 .right右 .left左 .entet回车

.delete删除 .space空格 .esc退出

3.事件对象

(1).$event 当前事件的对象

(2).@keyup 监听键盘的抬起

(3). .trim 去除输入框两端的空格

五.表单绑定指令
v-model 表单的值与数据绑定在一起

<input type="checkbox"> 默认选中true或者不选中false

<input type="checkbox" name="x" v-model="list"> 如果是多个把选中的值动态添加到list数组中

六.类绑定
1.属性 :class="值"

2.对象 :class="{'x':true,'y':false}"

3.数组 :class="[c1,c2,c3]"

七.样式绑定
:style="{color:'red','fontSize':'48px'}" 行内样式

八.动画
1.内置组建

transition:{

name 名称

mode 模式

enter-active-class 指定进入类名

leave-active-class 指定离开类名

}

2.动画类

v-enter-active 进入过程

v-enter 进入前

v-enter-to 进入后

v-leave-active 离开过程

v-leave 离开前

v-leave-to 离开后

3.创建动画形式

keyframes 关键帧
.fade-enter-active{animate:fadeIn ease 1s}
.fade-leave-active{animate:fadeOut ease 1s}

引用第三方动画库
指定进入的class与离开的class
<transition enter-active-class="slideIn aimated" leave-active-class="hinge animated">

九.组件

1. 一段可以重复利用的代码块
2.全局组件 Vue.component("组件名",{template:''})
3.局部组件 const steper={template:``}
4.注册组件 new Vue({components:{steper}})
5. 使用组件 <steper></steper>
————————————————
版权声明：本文为CSDN博主「努力的博博」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/like_eat_cabbage/article/details/121086760