Vue的指令(一)

指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构

      Vue中指令按照不同的用途可分为6大类:

1.内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有3个:v-text 、{{ }} 、v-html

v-text

v-text指令的缺点:会覆盖元素内部原有的内容。

{{ }}

Vue提供的{{ }}语法,专门用来解决v-text会覆盖默认文本内容的问题。这种{{ }}语法的专业名称是插值表达式(英文名:Mustache)

插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容。

v-text {{ }}的效果

v-html

v-text指令插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素则需要用到v-html这个指令

2.属性绑定指令

注意:插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中。

所以,如果需要为元素的属性动态绑定属性值,则需要用到v-bind属性绑定指令。

用法示例:

在vue中,可以使用v-bind:指令,为元素的属性动态绑定值;v-bind:简写是英文式的“:”。

在vue提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持JavaScript表达式的运算,例如:

在使用v-bind属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如:

3.事件绑定指令

Vue提供了v-on事件绑定指令,用来辅助程序员为DOM元素绑定事件监听。语法格式如下:

注意:原生DOM对象有onclick、opinput、onkeyup等原生事件,替换为vue的事件绑定形式后,分别为:v-on:click、v-on:input、v-on:keyup

事件对象$event

$event的应用场景:如果默认的事件对象e被覆盖了,则可以手动传递一个$event

事件修饰符

在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此,vue提供了事件修饰符的概念,来辅助程序员更方便地对事件地触发进行控制。常见的5个事件修饰符如下:

事件修饰符

说明

.prevent

阻止默认行为(例如:阻止a链接的跳转、阻止表单的提交等)

.stop

阻止事件冒泡

.capture

以捕获触发当前的事件处理函数

.once

绑定的事件只触发1次

.self

只有在event.target是当前元素自身时触发事件处理函数

按键修饰符

在监听键盘事件时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符,例如:

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值