2021-11-01

Vue

1.Vue的概述

1.前端框架三架马车
Vue
React
Angular
2.vue是一款渐进式js框架
3.插件案列：
https://github.com/opendigg/awesome-github-vue
4.特点：
1.简单 上手方便
2.结合Angular指令与react组件思维
3.生态丰富（插件多）API文档完善

2.实例化参数 new Vue

1.el：“#app”
选择目标标签
2.data：{}
指定数据
data（）{return {}}
一个函数返回一个对象
3.methods 定义事件
4.computed计算
5.watch 监听

3.computed计算

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

computed：{
rmsg（）{
return this.msg.split（‘ ’）.reverse（）.join（‘ ’）
}
}

4.watch 监听

监听数据的变化 并执行回调函数handler
watch：{
“num”：{
handler（nval，oval）{}，
deep：true
}
}

5.自定义指令 directives

bind 绑定执行一次
inserted 插入执行一次
update 每更新执行一次
directives：{
‘v-focus’：{
update（el，binding）{
if(binding.value){el.focus()}
}
}
}

6.过滤-管道

格式化数据
使用

1.{{num|fix}}
2.{{num|fix（2）}}
3.v-text=‘num|fix’
filters:{
// 过滤名称 value过滤前的值 arg管道的参数
fix(value,arg=2){
//返回转换为小数的值
return value.toFixed(arg)
},
}

7 指令

1.指令的值是可以是简单的js命令
2.文本渲染指令
{{}}
v-text
v-html
（渲染html文本）
3. 属性绑定
v-bind：属性=“指令值”
：属性=“指令值”
4.条件渲染
v-show
css方式隐藏
v-if
v-else-if
v-else
注意：频繁切换 v-show一次性切换v-if
v-show隐藏是通过css的方式隐藏节点

5.列表渲染
v-for=“item in list”
// list 要遍历的数组
// item 当前遍历的项目
v-for=“(item,index) in list”
// index 当前遍历项的索引 从0开始
使用v-for 务必
v-bink：key=“”
：key=“值”

值必须是唯一

添加key属性可以优化v-for的渲染
让vue更好识别当前渲染的节点
特别是在排序，过滤等操作的时候

不建议key的值使用循环的索引

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

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

默认选中值是true
不选中值是false

如果死多个被选中的值动态添加到list数组中

修饰符
	.numbei 数字

.trim 移除两端空白

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

9.样式绑定
属性名去掉-下个字母大写
:style="{‘color’:‘red’,‘fontSize’:‘48px’}"

动画

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

2.内置组件
1. transition
name名称
mode：模式
in-out 先进再出
out-in 先出再进
enter-active-class
指定进入类名
leave-active-class
指定离开类名
2.transition-group
3…动画的类名
1. v-enter-active 进入过程
v-enter 进入前
v-enter-to 进入后
2.v-leave-active 离开过程
v-leave 离开前
v-leave-to 离开后
4.创建动画形式
1.动画类6个css创建
2.keyframes关键帧
.fade-enter-active{animate：fadeIn ease 1s}
.fade-leave-active{animate：fadeOut ease 1s}
3.引用第三方动画库
指定进入的class与离开的class

组件

一段可以重复利用的代码块
全剧组件
	Vue.component('组件名',{template:' '})
局部组件
	const steper={template:' '}
//注册组件

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

		})
使用组件