Vue.js框架基础与实战-优快云博客

本文是Vue学习的总结，涵盖了Vue的特点、实例化参数、计算属性、监听、自定义指令、过滤器、内置组件、动画及组件复用等核心概念，详细介绍了各个特性的用法和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

Vue是一款渐进式的javescript前端框架，作者是尤雨溪，官网：cn.vuejs.org

特点：1.简单，上手方便

2.结合angular指令与react思维

3.生态丰富（插件多）API文档完善

实例化参数（new Vue）

el:"#app"	选择目标标签
data:{} data(){return{}}	指定数据一个函数返回一个对象
methods	方法集合
computed	计算
watch	监听

计算(computed)：从现有数据计算出新的数据

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

监听(watch):监听数据的变化，并执行回调函数handler

watch:{
    "ber":{
        handler(navl,oval){},
        deep:true
    }
}

自定义指令(directives)

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

directives:{
    "v-sosn":{
           update(el,binding){
                 if(binding.value){el.focus()
                 }
           }
    }
}

过滤（管道）：格式化数据

使用方式：1.{{ber|tas}}

2.{{ber|tas(2)}}

3.v-text="der|tas"

filters:{
    tas(value,arg){
            return value.toFixed(arg)
    }
}

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

文本渲染指令
{{}}
v-text
v-html
属性绑定指令
v-bind:属性="指令值"
:属性="值"
条件渲染

v-show

（通过css的方式隐藏节点；频繁切换时使用；）

v-if

（一次性切换使用）

v-else
v-else-if

列表渲染

v-for="iten in list"

list是要遍历的数组

item为当前遍历的项目

v-for="(item,index) in list"

index为当前遍历项的索引（从0开始）

使用v-for最好加上v-bind:key=""或者是:key="值"

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

事件指令

v-on:事件类型="响应函数"

v-on:click="sue()"

@click="sue()"

事件的简写

@click="num++"

行内事件响应

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

@click.stop.prevent.once="num++" （事件的修饰符可以同时写多个）

按键修饰符： .up .down .left .right .space .enter .delete .esc ....

事件对象： $event

表单绑定指令

v-model	让表单的值与数据绑定在一起
<input type="checkbox">
<input type="checkbox" name="fu" v-model="list">	如果是多个选项把选中的值动态地添加到list数组中
修饰符： .number数字 .trim移除两端空白

类绑定

属性 :class="值"

对象 :class="{'key1':true,'key2':false}"

key1的值为真，key1会被绑定，key2不会绑定

当对象的属性值为真，该属性作为class绑定

数组 :class="a1,a2,a3"

样式绑定

:style="{color:'red','fontSize':'36px'}"

动画

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 离开后

创建动画形式

动画类六个class创建

enter-active-class

enter

enter-to

leave-active-class

leave

leave-to

keyframes关键帧

// 01
.fade-enter-active{animate:fadeIn 1s ease}

//02
.fade-enter-active{animate:fadeOut 1s ease}

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

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

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

Vue.component("组件名",{template:``})	全局组件
const steper = {template:``}	局部组件
new Vue({ components:{steper} })	注册组件
<steper></steper>	使用组件