重生之我在学Vue--第3天 Vue 3 模板语法与指令
文章目录
- [重生之我在学Vue--第3天 Vue 3 模板语法与指令](#重生之我在学Vue--第3天 Vue 3 模板语法与指令)
-
- 前言
- 一、数据绑定
-
- [1.1 单向绑定](#1.1 单向绑定)
- [1.2 双向绑定](#1.2 双向绑定)
- 二、常用指令
-
- [2.1 v-bind](#2.1 v-bind)
- [2.2 v-model](#2.2 v-model)
- [2.3 v-if](#2.3 v-if)
- [2.4 v-show](#2.4 v-show)
- [2.5 v-for](#2.5 v-for)
- [2.6 v-on](#2.6 v-on)
- 三、事件处理与表单绑定
-
- [3.1 事件处理](#3.1 事件处理)
- [3.2 表单绑定](#3.2 表单绑定)
前言
在 Vue 3 中,模板语法是构建用户界面的核心部分,它结合了 HTML 和 Vue 的指令,用于动态绑定数据和处理用户交互。以下是关于模板语法和常用指令的快速入门,详细讲解请参考官方文档。
Vue3 官方中文文档传送点: 简介 | Vue.js
Vue3 的中文官方文档学习笔记很全还有练习场,推荐去官网学习
Vue前端成仙之路:Vue 前端成仙之路_野生的程序媛的博客-CSDN博客
GO后端成神之路:Go 后端成神之路_野生的程序媛的博客-CSDN博客
一、数据绑定
1.1 单向绑定
单向绑定是指将数据从 Vue 的实例绑定到模板中,数据流是单向的(从数据到视图)。
语法
- 使用
{``{}}
插值语法。 - 使用
v-bind
指令绑定属性。
示例
vue
<template>
<div>
<!-- 插值语法 -->
<p>欢迎,{{ username }}!</p>
<!-- 属性绑定 -->
<img :src="imageUrl" alt="图片描述">
</div>
</template>
<script>
export default {
data() {
return {
username: 'Vue 学习者',
imageUrl: 'https://example.com/image.jpg'
};
}
};
</script>
注意
- 插值语法
{``{ }}
只能用于文本内容。 - 如果需要绑定到 HTML 属性(如
src
、class
等),必须使用v-bind
。
1.2 双向绑定
双向绑定是指数据和视图之间可以互相影响。Vue 提供了 v-model
指令来实现双向绑定,常用于表单控件。
语法
- 使用
v-model
指令。
示例
vue
<template>
<div>
<p>输入框内容:{{ inputValue }}</p>
<input v-model="inputValue" placeholder="请输入内容">
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>
注意
v-model
适用于<input>
、<textarea>
、<select>
等表单元素。- 在 Vue 3 中,
v-model
支持自定义修饰符和组件。
二、常用指令
2.1 v-bind
- 功能:动态绑定 HTML 属性或组件的 prop。
- 语法 :
v-bind:属性名="表达式"
,可以简写为:属性名="表达式"
。
示例
vue
<template>
<div>
<a :href="url">点击跳转</a>
<img :src="imageUrl" alt="动态图片">
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://example.com',
imageUrl: 'https://example.com/image.jpg'
};
}
};
</script>
2.2 v-model
- 功能:实现双向绑定。
- 语法 :
v-model="变量名"
。
示例
vue
<template>
<div>
<input v-model="message" placeholder="输入你的信息">
<p>你输入的信息是:{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
};
</script>
2.3 v-if
- 功能:条件渲染,元素是否渲染由表达式的真假决定。
- 语法 :
v-if="表达式"
。
示例
vue
<template>
<div>
<p v-if="isLoggedIn">欢迎回来,用户!</p>
<p v-else>请先登录。</p>
</div>
</template>
<script>
export default {
data() {
return {
isLoggedIn: false
};
}
};
</script>
注意
- 如果需要多个条件判断,可以使用
v-else-if
和v-else
。
2.4 v-show
- 功能:控制元素的显示与隐藏,但不会从 DOM 中移除元素。
- 语法 :
v-show="表达式"
。
示例
vue
<template>
<div>
<p v-show="isVisible">这是一段可见的文字。</p>
<button @click="toggleVisibility">切换显示</button>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
};
</script>
区别
v-if
是条件渲染,元素会被添加或移除。v-show
是显示与隐藏,元素始终存在于 DOM 中,只是通过 CSS 控制display
。
2.5 v-for
- 功能:渲染列表。
- 语法 :
v-for="(item, index) in 列表"
。
示例
vue
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index + 1 }}. {{ item }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['苹果', '香蕉', '橙子']
};
}
};
</script>
注意
- 必须为每个列表项提供唯一的
key
值,通常使用:key="唯一标识"
。
2.6 v-on
- 功能:绑定事件监听器。
- 语法 :
v-on:事件名="方法名"
,可以简写为@事件名="方法名"
。
示例
vue
<template>
<div>
<button @click="handleClick">点击我</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
alert('按钮被点击了!');
}
}
};
</script>
修饰符
.stop
:阻止事件冒泡。.prevent
:阻止默认行为。.once
:只触发一次事件。.capture
:使用捕获模式。.self
:只在事件目标是当前元素时触发。.passive
:提升滚动性能。
示例
vue
<template>
<button @click.stop="handleClick">阻止冒泡</button>
</template>
三、事件处理与表单绑定
3.1 事件处理
通过 v-on
或 @
绑定事件,可以直接调用方法,也可以传递参数。
示例
vue
<template>
<button @click="sayHello('Vue')">点击我</button>
</template>
<script>
export default {
methods: {
sayHello(name) {
alert(`你好,${name}!`);
}
}
};
</script>
3.2 表单绑定
Vue 提供了强大的表单绑定功能,通过 v-model
可以轻松绑定各种表单控件。
文本输入框
vue
<input v-model="textValue">
复选框
vue
<input type="checkbox" v-model="isChecked">
单选框
vue
<input type="radio" v-model="selectedOption" value="A">
<input type="radio" v-model="selectedOption" value="B">
下拉菜单
vue
<select v-model="selected">
<option value="A">选项 A</option>
<option value="B">选项 B</option>
</select>