vue基础简单介绍

Posted 2023-03-08

参考技术A

vue是一款渐进式JavaScript前端框架，三大mvvm框架 vue , react ,angular

el: 选择目标标签
data: 数据
methods: 方法
computed: 计算
directives: 指令
watch: 监听

v-text
v-html(渲染html文本)

v-bind:属性="指令的值"
例：

缩写：:属性="值"

指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 真 值的时候被渲染。

用于根据条件展示元素的选项是v-show指令

v-if隐藏时直接移除节点，v-show是通过css方式隐藏
频繁切换用v-show，一次性切换用v-if

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in list 形式的特殊语法，list是源数据数组

v-on:事件类型="响应函数"
简写：@click="say()"
行内事件响应：@click="num++"

.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 只执行一次

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

v-model 让表单的值与数据绑定在一起。他会根据空间类型自动选取正确的方法来更新元素
多选
checked

:class="值"

:class="\'key1\':true,\'key2\':false"
key1的值为真，key1会被绑定，key2不会

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

:style="color:\'red\',\'fontSize\':\'44px\'"
注意： 此时的属性名要去掉-连接符，且下一个字母要大写
例：fontSize字体大小

bind: 只调用一次，指令第一次绑定到元素时执行
inserted: 被绑定元素插入父节点时执行
update: 每更新执行一次

格式化数据
使用：
1、num | fix
2、num | fix(2)
3、v-text="num | fix"

两个状态间的过渡变化
vue动画需要在内置组件 <transition></transition> 包裹，会自动在动画的进入过程与离开过程添加类名，真正要实现动画，还需要自己写css

transition
name 名称
model 模式
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 关键帧

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

Vue.component("组件名",template:``)

const steper = template:``
组件有且只能有一个根节点

<steper></steper>