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

目录

1 v-on 指令

1.1 v-on:click

1.2 v-on:keydown

1.3 v-on:mouseover

1.4 事件修饰符

1.5 按键修饰符

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

2.1 v-text 与 v-html

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 赋值：

	
		
		
		
	
	
		

			

				用户：

				密码：

			
		
	
	

4 v-for

v-for 指令是用来循环遍历的，相当于 for 循环，这里演示遍历数组、遍历对象、遍历对象数组

4.1 遍历数组

	
		
		
		
	
	
		

			

				
{{arr +" : "+ index}}
			
		
	
	

4.2 遍历对象

	
		
		
		
	
	
		

			

				
{{key + " : " + value}}
			
		
	
	

4.3 遍历对象数组

	
		
		
		
	
	
		

			

				

					
序号
					
姓名
					
年龄
				
				

					
{{index}}
					
{{person.name}}
					
{{person.age}}
				
			
		
	
	

5 v-if 与 v-show

• v-if 是根据表达式的值来决定是否渲染元素
• v-show是根据表达式的值来切换元素的display css属性

	
		
		
		
	
	
		

			
派大星
			
海绵宝宝
			转换
		
	
	

点击转换能将上面的文字影藏和显示

 

---