Vue2_1

lihuibear

Vue快速上手

什么是Vue

概念:Vue (读音 /vjuː/,类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架

Vue2官网:

1.什么是构建用户界面

基于数据渲染出用户可以看到的界面

image-20240402141226150

2.什么是渐进式

所谓渐进式就是循序渐进,不一定非得把Vue中的所有API都学完才能开发Vue,可以学一点开发一点

Vue的两种开发方式:

  1. Vue核心包开发

    场景:局部模块改造

  2. Vue核心包&Vue插件&工程化

    场景:整站开发

3.什么是框架

所谓框架:就是一套完整的解决方案

举个栗子

如果把一个完整的项目比喻为一个装修好的房子,那么框架就是一个毛坯房。

我们只需要在“毛坯房”的基础上,增加功能代码即可。

提到框架,不得不提一下库。

  • 库,类似工具箱,是一堆方法的集合,比如 axios、lodash、echarts等
  • 框架,是一套完整的解决方案,实现了大部分功能,我们只需要按照一定的规则去编码即可。

下图是 库 和 框架的对比。

image-20240402141213623

框架的特点:有一套必须让开发者遵守的规则或者约束

咱们学框架就是学习的这些规则 官网

创建Vue实例

核心步骤(4步):

  1. 准备容器
  2. 引包(官网) — 开发版本/生产版本
  3. 创建Vue实例 new Vue()
  4. 指定配置项,渲染数据
    1. el:指定挂载点
    2. data提供数据

插值表达式

插值表达式是一种Vue的模板语法

我们可以用插值表达式渲染出Vue提供的数据

image-20240402155828232

1
2
3
4
5
6
7
8
插值表达式:Vue的一种模板语法
作用:利用 表达式 进行插值渲染
语法:{{ 表达式 }}

注意点:
1. 使用的数据要存在
2. 支持的是表达式,不是语句 if for
3. 不能在标签属性中使用 `{{ }}`

响应式

image-20240528144854074

  1. 什么是响应式呢?数据改变,视图自动更新
    使用Vue开发→专注于业务核心逻辑即可
  2. 如何访问或修改数据呢?
    data中的数据,最终会被添加到实例上
    访问数据:”实例.属性名
    修改数据:”实例.属性名”=”值”

开发者工具

image-20240528150139720

Vue指令

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

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

v-html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>

<div id="app">
<div v-html="msg"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

const app = new Vue({
el: '#app',
data: {
msg: `
<h3>学前端~来黑马!</h3>
`
}
})

</script>

</body>

v-show v-if

v-show

v-show底层原理:切换 css 的 display: none 来控制显示隐藏

v-if

​ v-if 底层原理:根据 判断条件 控制元素的 创建 和 移除(条件渲染)

image-20240528154747302

v-elsev-else-if

image-20240528155223390

v-on

image-20240528155515068

image-20240529085924533

image-20240529090353061

v-bind

image-20240529091031536

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-show="index > 0" @click="index--">上一页</button>
<div>
<img :src="list[index]" alt="">
</div>
<button v-show="index < list.length - 1" @click="index++">下一页</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
index: 0,
list: [
'./imgs/11-00.gif',
'./imgs/11-01.gif',
'./imgs/11-02.gif',
'./imgs/11-03.gif',
'./imgs/11-04.png',
'./imgs/11-05.png',
]
}
})
</script>
</body>
</html>

v-for

image-20240529092514264

v-for 的key

image-20240529094955181

v-model

  1. 作用:给表单元素使用,双向数据绑定→可以快速获取或设置表单元素内容
  2. v-model 可以让数据和视图,形成双向数据绑定
    1. 数据变化,视图自动更新
    2. 视图变化,数据自动更新
  3. 可以快速[获取]或[设置]表单元素的内容

image-20240529212006714

  • 标题: Vue2_1
  • 作者: lihuibear
  • 创建于: 2024-05-28 14:23:35
  • 更新于: 2024-06-02 16:02:29
  • 链接: https://lihuibear.cn/posts/259118514/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
 评论