重生之我在学Vue--第3天 Vue 3 模板语法与指令

重生之我在学Vue–第3天 Vue 3 模板语法与指令


  
前言

在 Vue 3 中，模板语法是构建用户界面的焦点部门，它团结了 HTML 和 Vue 的指令，用于动态绑定命据和处理处罚用户交互。以下是关于模板语法和常用指令的快速入门，具体解说请参考官方文档。
Vue3 官方中文文档传送点： 简介 | Vue.js
   Vue3 的中文官方文档学习条记很全尚有训练场，保举去官网学习
  Vue前端成仙之路：Vue 前端成仙之路_野生的步调媛的博客-CSDN博客
GO后端成神之路：Go 后端成神之路_野生的步调媛的博客-CSDN博客
<hr> 一、数据绑定

1.1 单向绑定

单向绑定是指将数据从 Vue 的实例绑定到模板中，数据流是单向的（从数据到视图）。
语法

  

• 利用 {    {}} 插值语法。  
  
• 利用 v-bind 指令绑定属性。
  

示例

1. <template>
2.   <div>
3.     <!-- 插值语法 -->
4.     <p>欢迎，{
5.   
6.   { username }}！</p>
7.    
8.     <!-- 属性绑定 -->
9.     <img :src="imageUrl" alt="图片描述">
10.   </div>
11. </template>
13. <script>
14. export default {
15.   data() {
16.     return {
17.       username: 'Vue 学习者',
18.       imageUrl: 'https://example.com/image.jpg'
19.     };
20.   }
21. };
22. </script>

复制代码

注意

  

• 插值语法 {    { }} 只能用于文本内容。  
  
• 假如必要绑定到 HTML 属性（如 src、class 等），必须利用 v-bind。
  

<hr> 1.2 双向绑定

双向绑定是指数据和视图之间可以相互影响。Vue 提供了 v-model 指令来实现双向绑定，常用于表单控件。
语法

  

• 利用 v-model 指令。
  

示例

1. <templ

复制代码