【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法

【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法

在进行前端开发之前，需要熟悉vue的一些基本用法，这里举例了一些常见的基本用法

1. v-if, v-else, v-else-if

用于条件渲染元素。当条件为真时，元素会被渲染；否则不会渲染。

示例

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Not A/B</div>

2. v-show

也用于条件渲染，但它总是会渲染并保留，只是通过 CSS 的 display 属性控制可见性。

示例

<p v-show="isVisible">显示/隐藏这段文字</p>

3. v-for

用于循环渲染列表数据。可以遍历数组、对象或数字。

示例

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

<!-- 遍历对象 -->
<ul>
  <li v-for="(value, key, index) in object" :key="index">{{ key }}: {{ value }}</li>
</ul>

4. v-bind

为HTML标签绑定如href、css样式等属性值

示例

<!-- 动态设置 class -->
<div v-bind:class="{ active: isActive }"></div>

<!-- 简写为 :class -->
<div :class="{ active: isActive }"></div>

<!-- 绑定 href 属性 -->
<a :href="url">链接</a>

5. v-model

用于创建双向数据绑定，通常与表单输入控件一起使用。

示例

<input v-model="message" placeholder="编辑我">

<textarea v-model="description"></textarea>

<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

6. v-on

用于监听事件，并触发相应的处理函数。

示例

<button v-on:click="handleClick">点击我</button>

<!-- 简写为 @click -->
<button @click="handleClick">点击我</button>

<!-- 带参数的事件处理器 -->
<button @click="increment(1)">增加</button>