2021-11-01

vue知识点初总结

概述

前端框架

• Vue
• React
• Angular

vue是一款渐进式JavaScript前端框架

vue官网

插件案例

特点

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

实例化参数

el:"#app",
选择目标标签
data{}
指定数据
data(){return{}}
应函数返回一个对象
methods:
定义事件
conputed
计算
watch
监听
directives
指令

指令

指令的值可以是简单JavaScript命令

文本渲染指令

{{}}
v-text
v-html

属性绑定指令

v-bind：属性=“指令值”
简写：    ：属性=“值”

条件渲染指令

v-show
通过css方式隐藏
v-if
通过隐藏dom节点隐藏
v-else
v-else-if

频繁切换使用v-show，一次性切换使用v-if

列表渲染指令

v-for="item in list"
list 为要便利的数组
item为当前遍历的项

v-for="(item,index) in list"
idnex 当前便利的项的索引  从0开始

使用v-for务必使用    ：key="值"，值必须是唯一

添加key 属性可以优化v-for的渲染，让vue更好的识别当前的节点，
特别是在排序，过滤等操作的时候
不建议key的值使用循环的索引

事件指令

v-on:事件类型="响应函数"
v-on:click="say()"

@click="say()"//事件的简写

@click="num++"//行内事件的响应

事件修饰符

.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 只执行一次
@click.stop.prevent.once="num++"
事件的修饰符可以同时写多个

按键修饰符

• .up
• .down
• .left
• .right
• .delete
• .enter
• .space
• .esc

事件对象：$event

表单绑定指令

vmodel 让表单的值与数据绑定在一起

<input type="checkbox">//默认选中为true不选中为false

<input type-"checckbox" 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="{color:'red','fontSize':'48px'}"

computed 计算

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

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

watch 监听

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

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

自定义指令 directives

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

> 	directives:{ "v-focus":{ update(el,bingding){
> if(binding.value){el.focus() } 
> 			} 
> 		}
> 	} 	
> <input v-focus="flag">

过滤-管道

格式化数据

使用：

1.{{num|fix}}
2. {{num|fix(arg)}}
3. v-text=“num|fix”

filters:{
fix(value,arg){
return value.toFixed(arg)
}
}
//保留小数点两位

动画

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-active{animate:foreach ease 1s}
  .fade-elave-active{animate:foreach ease 1s}

3. 引用第三方动画库

指定进入的calss与离开的class

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

组件

一段可以重复利用的代码块

全局组件

Vue.conponents("组件名"，{template:``})

局部组件

const steper = {template：``}

注册组件

new Vue({
components:{steper}
})

使用组件

<steper></steper>

That’s all what I have learned recently,and I will keep undating.Thanks for your watching.