Vue简介

m0_64366317

已于 2022-09-24 14:51:33 修改

阅读量503

点赞数

文章标签： vue.js 前端 javascript

于 2022-09-19 17:29:57 首次发布

本文链接：https://blog.csdn.net/m0_64366317/article/details/126936744

版权

前端三大框架

1.Vue

2.React

3.Angular

特点

尤雨溪创造，v2与v3两个版本

结合angular的指令与react的组件，虚拟dom

渐进式JavaScript框架

Vue安装

直接引用<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

创建应用实例

new Vue 函数创建一个新的应用实例

var vm = new Vue({

        el:"#app",//指定vue的模板css选择器

        data:{msg:"hello Vue!"}// 指定data数据

    })

模板

<div id="app">

hello Vue!

</div>

文本渲染指令

1.{{}}

2.v-text

3.v-html

条件渲染器指令

1.v-if

2.v-else

3.v-else-if

4.v-show

隐藏元素以css的方式

频繁切换用v-show

少量切换用v-if

面试题

v-if和v-show的区别

1.都是用来控制显示和隐藏

2.v-if通过dom操作来实现，v-show通过css来操作

3.频繁切换用v-show,反之用v-if.

遍历指令
- v-for
  - 字符串数字对象列表进行遍历
  - <p v-for="(item,index) in list" v-key="item">{{item}}-{{index}}</p>
  - item 遍历的元素
  - index 遍历的下表
  - list被遍历的数组
- v-bind:key
  - 值必须是唯一的
  - 为了让vue更好的优化渲染列表

属性绑定

v-bind:title=“msg”

：title=“msg” 属性绑定简写形式

事件

v-on:click=“num++”

事件指令

@click=“num++”

事件绑定简写

@click="sayNum"

默认传入事件对象

@click="sayNum(3)"

传入实参3

@click=“sayNum($event,3)”

传入事件对象和实参3

事件修饰符

.stop

阻止事件冒泡

.prevent

阻止默认事件

.once

只响应一次

.enter回车

.up上

.down下

.esc取消

.del删除

按键修饰符

keydown,keyup

系统修饰符

.ctrl

.shift

鼠标修饰符

.left

.middle

.right

表单

v-model=“num”

把num的数据和表单的值绑定到一起

单行，多行

多选

一个默认值

选中为true

未选中为false

多个值，绑定的数组动态添加/移除当前元素的value值

表单修饰

.lazy .change事件触发更新数据

.number强制转换为数字

v-model=“mum”简写

：value=“mum”

@input=“num=$event.target.value”

Vue操作

让指令链接数据和dom

业务操作数据实现自动更新dom

computed计算

从现有数据计算出新的数据（只读）

conputed:{
name:function(){
return xxxxx
}
}

watch监听

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

watch:{

obj:{

handler(){

//执行回调函数

}，

deep:true

}

class

文本

：class="active"

没有加单引号的active是一个变量不是字符串

对象

:class="{'active':flase}"

数组

:class="list"

style

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

css属性驼峰式写法

自定义指令 directtives

作用：操作dom；实例化第三方基于dom的插件

directives：{

“focus”：

update（el，binding）{

//el指令所在节点

//binding.value指令的值

}

}

<input v-foucs=“true”>

update 更新就执行

bind绑定一次

inserted插入

filters 过滤，管道

{{3.1415926|fix}}

{{3.1415926|fix（4）}}

filters：{

fix（val，len=2）{

renturn Number(val).toFixed(len)

}}

val是过滤前的值

return过滤后的值

len fix过滤器的参数

作用：格式化数据

Vue选项

el 模板

data 数据

methods方法

directives指令

filters过滤

watch监听

computed计算

props属性

created创建完毕

template模板

componets组件

动画

两个状态形成过渡

进入和离开 v-show v-if

transition 单个动画元素

属性

name 名称

enter-active-class=“fadein animated” 指定进去class

leava-active-class=”“ 指定离开class

产生状态与类

v-enter-active

v-enter 进去开始状态

v-enter-to进入结束状态

v-leava-active

v-leava

v-leava-to

traansition-group 动画组

属性

tag 用什么标签包裹所有的动画组元素

产生状态与类

通 transition

v-move正在移动中的元素