Vue基本指令

Vue基本指令

1.差值表达式

又叫声明式渲染/文本差值

语法：{{表达式}}

	
		

			
{{name}}

			
{{jxxin.age}}

			
{{jxxin.addr}}

v-bind绑定class

vue指令 v-text和v-html

作用：给目标标签的更新innerText/innerHTML

语法：v-text='vue变量'

? v-html='vue变量'

注意：它会覆盖差值表达式


			
{{name}}

			
{{jxxin.age}}

			
{{jxxin.addr}}

			
我有值的

vue指令 v-on

作用：给标签绑定事件

语法：

  • v-on:事件名="要执行的少量代码"
  • v-on:事件名="methods中的函数"
  • v-on:事件名="methods中的函数(实参)"

			
您已经累计充值：{{money}}人民币

效果：

v-on指令修饰符

修饰符包括:事件修饰符、按键修饰符、系统修饰符和鼠标按钮修饰符

事件修饰符

  • .stop 阻止事件冒泡

    事件冒泡：比如box2在box1中，点击box2时，也同时点击了box1，这就是事件冒泡

    从最具体的元素到不具体的元素（由内到外）

    当子元素（事件源）事件触发，事件会沿着包含关系，依次往上级传递，每一级都可以感知到事件，直到触发根元素（根源)

  • .prevent 阻止默认事件

    调用event.preventDefault()，阻止默认事件，比如：form表单在提交时，会自动刷新页面

  • .capture 事件捕获模式

  • .self:只当事件从侦听器的元素本身出发时才出发回调

  • .once：值触发一次回调

  • 【注意】

  1. 使用时注意顺序

    v-on:click.prevent.self    //会阻止所有的点击的默认事件
v-on:click.self.prevent    //会阻止元素自身的默认事件

按键修饰键

监听键盘事件时，我们经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符
  • @keyup.enter - 监测回车按键
  • @keyup.esc - 监测返回按键

vue指令 v-model

  1. v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令

    在、