Vue详解-CSDN博客

本文链接：https://blog.csdn.net/qq_64038133/article/details/135184960

概念: VUE是一个用于构建用户界面的渐进式框架(有响应式特性)

VUE包括: 声明式渲染组件系统客户端路由(VueRouter) 大规模状态管理(Vuex) 构建工具(Webpack/Vite)

Vue的两种使用方式:

1.Vue核心包开发场景: 局部模块改造
2.Vue核心包&Vue插件工程化开发场景: 整站开发

快速开发:

1.准备容器(也就是创建盒子啊这些,在上面案例中就是div)
2.引包(官网)-开发版本(有提示/警告这些,自己写的时候用)/生产版本(更简单,上线时用)
3.创建Vue实例 new Vue()
4.指定配置项 el data =>渲染数据(el代表控制的是哪个盒子,data提供数据)

插值表达式 {{ }}

作用: 利用表达式(是可以被求值的代码, JS引擎会将其计算出一个结果)进行插值, 渲染到页面中

语法: {{ 表达式 }}

注意:1.使用的数据必须存在,就是必须要先声明
2.支持的是表达式,而非语句, 比如: if for ...
3.不能在标签属性中使用{{ }}插值

Vue指令

Vue会根据不同的指令, 针对标签实现不同的功能

指令: 带有v-前缀 的特殊 标签属性

1.v-html

作用: 动态设置元素innerHTML
语法: v-html = "表达式"

2.v-show

作用: 控制元素显示隐藏
语法: v-show="表达式" 表达式值true 显示 , false 隐藏
原理: 切换display:none 控制显示隐藏
场景: 频繁切换显示隐藏的场景

3.v-if

作用: 控制元素显示隐藏(条件渲染)
语法: v-if="表达式" 表达式值true 显示 , false 隐藏
原理: 基于条件判断, 是否创建或移除元素节点
场景: 要么显示, 要么隐藏, 不频繁切换的场景

4.v-if v-else v-else-if

作用: 和java里的if else一样的效果
语法: v-if="表达式" v-else-if="表达式" v-else="表达式"
注意点: v-else和v-else-if必须紧挨着v-if一起使用

5.v-on

作用: 注册事件 = 添加监听 + 提供处理逻辑
语法: v-on:事件名="内联语句"/"methods中的函数名"

语法简写就是: @事件名

6.v-bind

作用: 动态的设置html的标签属性比如src,url,title等
语法: v-bind:属性名="表达式"

语法简写就是: :属性名="表达式"

v-bind对于样式控制的增强 - 操作class

语法: :class="对象/数组"

对象 ➡ 键就是类名,值是布尔值,如果值为true,有这个类,否则没有
使用场景: 一个类名,来回切换

数组 ➡ 数组中所有的类,都会添加到盒子上,本质就是一个class列表
使用场景: 批量添加或删除类

v-bind 对于样式控制的增强 - 操作style

语法: :style="样式对象"

7.v-for

作用: 基于数据循环, 多次渲染整个元素 (数组,对象,数字等)
语法: v-for = "(item, index) in 数组" item: 每一项 index: 下标

注意: v-for一般还要加一个key,key的作用是给元素添加唯一标识,便于Vue进行列表项的正确排序复用, key的值只能是字符串或数字类型,并且key的值必须具有唯一性,推荐使用id,不推荐index

8.v-model

作用: 给表单元素使用, 双向数据绑定 ➡ 可以快速获取或设置表单元素内容
①数据变化 ➡ 视图自动更新
②视图变化 ➡ 数据自动更新

常见的表单元素也都可以用v-model绑定关联➡快速获取或设置表单元素的值,它会根据控件类型自动选取正确的方法来更新元素
比如: 输入框 input:text ➡ value 文本域 textarea ➡ value 单选框 input:radio ➡ checked

语法: v-model='变量'