Vue 3 从创建项目到基础语法---01

V U E 3

1. 项目创建

创建vue3项目，先确保电脑安装了Node环境：

有多种方式可以创建vue3项目：

1. npm create vue@latest
2. npm init vue
3. ...

这些个命令会引导你创建一个新的 Vue 3 项目，包含基本的项目结构和配置。

创建完的项目，可以将文件夹直接拖到vscode打开

下面来讲讲vue中的基本语法操作

2. 插值表达式

插值表达式使用**{``{ }}**语法，用于在模板中显示数据。

基础用法

<script setup lang="ts">
const name = 'L'
const age = 18
const gender = true
const list = [1, 2, 3]
const obj = { name: name, age: age }
</script>

<template>
  <!-- 文本插值 -->
  <div>
    <div>name:{{ name }}</div>
    <div>age:{{ age }}</div>
    <div>gender:{{ gender ? '男' : '女' }}</div>
    <div>list:{{ list }}</div>
    <div>obj:{{ obj }}</div>
  </div>
</template>

特点

• 只能在元素的内容区域使用
• 支持简单的 JavaScript 表达式

---

3. v-bind （动态绑定）

v-bind用于动态绑定元素的属性，可以简写为 :

基础用法

<script setup lang="ts">
const className = 'box'
const classObj = {
  box: true,
  active: true
}

const style = {
  fontSize: '30px',
  color: 'rgba(0,0,0,0.5)'
}
</script>

<template>
  <div>
    <!-- 动态绑定 -->
    <div v-bind:name="name">动态绑定name</div>
    <div v-bind:class="className">动态绑定className</div>
    <div :class="className">动态绑定className（简写）</div>
    <div :class="classObj">动态绑定classObj</div>
    <div :style="style">动态绑定style</div>
  </div>
</template>

常见绑定场景

• class 绑定 ：:class="className" 或 :class="{active: true}"
• style 绑定 ：:style="{color: 'red', fontSize: '14px'}"
• 其他属性 ：:id="dynamicId"

---

4. 条件渲染语法

Vue 提供了 v-if 和 v-show 两种条件渲染方式。

v-if 系列指令

v-if系列指令会根据条件真正地添加或移除 DOM 元素。

<script setup lang="ts">
const gender = true
const age = 18
</script>

<template>
  <div>
    <!-- v-if v-else -->
    <span v-if="gender">男</span>
    <span v-else>女</span>

    <!-- v-if v-else-if v-else -->
    <span v-if="age >= 35">优化</span>
    <span v-else-if="age >= 18">已成年</span>
    <span v-else>未成年</span>
  </div>
</template>

v-show 指令

v-show 通过 CSS 的**display**属性控制元素的显示与隐藏。

<template>
  <div>
    <span v-show="gender">男</span>
    <span v-show="!gender">女</span>
  </div>
</template>

v-if 与 v-show 对比

|-------|--------|--------|
| 特性 | v-if | v-show |
| 初始渲染 | 条件性 | 总是 |
| Dom操作 | 真实添加 | css隐藏 |
| 性能 | 切换开销大 | 切换开销小 |
| 切换频率 | 低 | 高 |
| 适用场景 | 条件很少改变 | 频繁切换显示 |

---

5. v-text 与 v-html 语法

v-text - 文本渲染

**v-text**会将内容作为纯文本插入元素中。

<script setup lang="ts">
const msg = '我知道，知道你知道我知道'
const html = `<span style="color: #00bd7e">你好</span>`
</script>

<template>
  <div>
    <!-- v-text 会覆盖元素内容，并且不解析HTML -->
    <div v-text="msg"></div>
    <div v-text="'xxxx' + msg"></div>
    <div v-text="`|${msg}|`"></div>
    <div v-text="html"></div> <!-- 这里会显示原始HTML字符串 -->
  </div>
</template>

v-html - HTML 渲染

**v-html**会将内容作为 HTML 插入元素中。

<template>
  <div>
    <!-- v-html 会解析HTML标签 -->
    <div v-html="msg"></div> <!-- 显示纯文本 -->
    <div v-html="html"></div> <!-- 解析并渲染HTML标签 -->
  </div>
</template>

---

语法对比总结

|--------|-----------|--------|--------|
| 特性 | 插值表达式{{}} | v-text | v-html |
| HTML解析 | 否 | 否 | 是 |
| 转义处理 | 是 | 是 | 否 |
| 性能 | 高 | 高 | 中 |
| 安全性 | 高 | 高 | 中（需注意） |

---