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

重生之我在学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 属性(如 srcclass 等),必须使用 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-ifv-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>
相关推荐
只会HelloWorld的华娃6 分钟前
【Excel学习记录】03-查找、替换与定位
学习·excel
码蜂窝编程官方11 分钟前
【含开题报告+文档+PPT+源码】基于微信小程序的点餐系统的设计与实现
java·vue.js·spring boot·后端·spring·微信小程序·小程序
喵喵酱仔__15 分钟前
富士相机基本参数学习
学习
前端小胡兔17 分钟前
uniapp h5 js设置监听:超时未操作返回首页(全局只监听一次,可设置监听事件+检查时间+超时时长)
前端·javascript·uni-app
小彭努力中17 分钟前
26.使用 Vue 3 + OpenLayers 加载远程 Shapefile 数据并显示图形
前端·javascript·vue.js·arcgis·openlayers
wandongle21 分钟前
HTML5(一)
前端·html·html5
未知陨落22 分钟前
数据结构——跳表
开发语言·数据结构·c++·leetcode·跳表
silver68725 分钟前
前端框架 React 与 Vue3对比 —— 技术选型
vue.js·react.js
pp不会算法^v^37 分钟前
Could not transfer artifact javax.xml.bind:jaxb-api:pom:2.3.1
xml·java·开发语言·maven
袭烽37 分钟前
vue常用命令汇总
前端·javascript·vue.js·npm·nvm