【全栈】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>