【Vue 学习】- VueJS 常用系统指令

2.2 v-blind

3 v-model

4 v-for

4.1 遍历数组

4.2 遍历对象

4.3 遍历对象数组

5 v-if 与 v-show

---

1 v-on 指令

=========

v-on 指令用来监听 DOM 事件，并在触发时运行一些 JavaScript 代码

1.1 v-on:click

---

v-on:click 是用来点击事件的指令，可以和 button 标签一起使用，看一下案例：

• 使用v-on:click绑定fun函数

• 通过 methods 方法编写方法体

{{message}}

点击

点击后message的值改变

1.2 v-on:keydown

---

v-on:keydown 指令表示键盘按下事件，这里做一个案例：让键盘只有按下 0~9 才有效，其他按键均无效

• 创建text，用来键盘输入显示，绑定函数并传入 event 参数

• 创建方法体

只有在text中输入 0~9 数字才生效

1.3 v-on:mouseover

---

v-on:mouseover 指令表示鼠标移动到某个文件域事件，案例：在一个文件域上模拟鼠标移动和阻止事件传播

• 在div上创建一个textarea区域

• 设置鼠标悬停事件

文件域

1.4 事件修饰符

---

在 Vue.js 中，提供了事件修饰符来处理 DOM 事件细节，通过由点(.)表示的指令后缀来调用修饰符，常用的事件如下：

• .stop：触发停止事件

• .prevent：触发阻止事件

• .capture：捕获事件

• .self：触发自己的事件

• .once：只执行一次事件

这里演示 prevent 阻止事件，先创建提交到百度的表单，然后阻止其跳转

1.5 按键修饰符

---

按键修饰符是获取按下键盘的事件，Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，全部的按键别名如下：

• .enter

• .tab

• .delete

• .esc

• .space

• .up

• .down

• .left

• .right

• .ctrl

• .alt

• .shift

• .meta

以 .enter 为例

2 v-text 、v-html、v-blind

========================

2.1 v-text 与 v-html

---

• v-text：显示原文本

• v-html：以标签内容显示

2.2 v-blind

---

在前面使用插值表达式的时候，都是在标签内部写插值表达式，如果要给标签的属性赋值，绑定插值表达式，那就要用到 v-blind 指令

来看案例：在设置HTML文本字体颜色的时候，可以使用 v-blind 来绑定颜色

派大星

海绵宝宝

3 v-model

=========

可以使用 v-model 指令给 value 属性赋值，比如给 form 表单中的 value 赋值：

用户：

密码：