基本语法

插值语法

<span>Message: {{ msg }}</span>

使用场景

• 显示变量
• 显示简单运算
• 格式化文本

只能作用于文本内容标签，用于标签内容，不可用于标签内部【属性绑定】

演示

v-bind 属性绑定

<div v-bind:id="dynamicId"></div>

• v-bind:或者简写为 ：,在标签属性前添加，用于标签属性绑定

基本属性绑定

boolean绑定

绑定多个样式

绑定对象

该输入框会同时生效type、placeholder、maxlength三个属性

动态属性值绑定

• :[attributeName]
• 下方绑定了默认内容和输入模式

v-on事件监听

<v-on:事件名="函数"></v-on:事件名>
或简写为@
@事件名="事件处理函数"

基本使用

按键绑定函数并且传递参数

事件修饰符

.stop：阻止事件传播。

.prevent：阻止默认事件。

.capture：添加事件监听器时使用事件捕获模式。

.self：只有事件从自身触发时才触发处理函数。

.once：事件只触发一次。

.passive：告诉浏览器 event.preventDefault() 不会被调用。

可以组合使用，链式调用，如@xxx.stop.one

键盘事件修饰符

常见的键修饰符包括：

• .enter：回车键
• .tab：Tab 键
• .delete：删除键（捕获 "Delete" 和 "Backspace"）
• .esc：Esc 键
• .space：空格键
• .up / .down / .left / .right：方向键

监听回车键,按下回车会触发提交函数

鼠标按钮修饰符

如 .left、.right 和 .middle，用于指定鼠标的左键、右键或中键点击。

第一个按键左键点击会触发，第二个右键点击会触发函数

其他v- 指令

v-show

基于display: none实现的显隐，并不会删除元素

v-for、v-if、v-else

• 三者往往结合使用
• v-for支持数组、对象、数字遍历
• v-if可以根据表达式的真假来动态插入或移除元素
• v-else使用前上一个兄弟元素必须有v-if 或 v-else-if使用

• v-for="(mouse, index) in mouseList"：遍历 mouseList 数组，每个项目有 mouse(代表每一项) 和索引 index。

• :key="mouse.id"：key 是 Vue 中的唯一标识，用于优化渲染。这里我们用 mouse.id 作为每项的唯一标识。

• v-if="mouse.inStock" 和 v-else：当 mouse.inStock 为 true 时，显示 “在售”；否则，显示 “售罄”。

v-model

在表单输入元素或组件上【如 <input>、<textarea> 和 <select>】创建双向绑定。

基本使用

修饰符

• .lazy：使 v-model 在 change 事件触发时更新数据，而不是 input 事件。
• .number：将输入内容自动转换为数值。
• .trim：去除输入的首尾空格。