Vue初级知识点

Vue初级知识点总结

概述

前端三框架

• Vue
• react
• Angular

Vue特点：

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

官网

Vue官网

实例化参数

• el：" #app" 选择目标标签
• data：{ } 指定数据
• methods：{ } 方法
• computed：{ } 计算
• watch：{ } 监听
• directives：{ } 自定义指令

指令

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

文本渲染指令

{{}}
v-text
v-html

（渲染html文本）

属性绑定

v-bind:属性=“指令值”
简写    :属性 = ‘值’

条件渲染

1.v-show 

2.	v-if
	v-else
	v-else-if

频繁切换用v-show
一次性切换用v-if
v-show隐藏是通过css的方式隐藏节点

列表渲染

v-for=“item in list”
  list 要遍历的数组
  item 当前遍历的项目

v-for=“（ietm，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"=false}
key1的值为真，key1会被绑定，key2不会

• 数组方式

:class="[c1,c2,c3]"

样式绑定

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

：style=“{color：‘red’ , 'fontSize'：'48px'}”

动画

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:fadeIn ease 1s }
.fade-enter-active{ animate:fadeOut ease 1s }
3.引用第三方动画库
指定进入的class与离开的class
<transition
enter-active-class=“slideIn animated”
leave-active-class=“hinge animated” .>

组件

• 一段可以重复利用的代码块
• 全局组件
  Vue.component(“组件名”，{remplate：`` } )
• 局部组件
  const steper= { template:`` }
• 注册组件

new Vue({
  components:{steper}
})

• 使用组件

<steper></steper>

ENDING…