vue——内部指令

指令是特殊的带有前缀v-的特性。指令的值限定为绑定表达式,指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。

  1. v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。

false——移除;true——生成一个元素

如果想切换多个元素,可以把<template>元素当作包装元素

切换v-if模块时,有局部编译/卸载过程。

v-if是惰性的——如果初始渲染时条件为假,则什么也不做,在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

2.v-show

v-show指令是根据表达式的值来显示或隐藏HTML元素。

false—隐藏,元素上多了一个内联样式styLe=”display:none”

注:v-show不支持 <template>语法

v-show——元素始终被编译保留,只是简单的基于CSS切换。

注:一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁的切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好。

3.v-else

v-else必须着在v-if或v-show,充当else的功能。

将v-show用在组件上时,因为指令的优先级v-else会出现问题,所以要用另一个v-show替换v-else。

4.v-model

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。

v-model指令后面还可添加多个参数(number、lazy、debounce)。

number——输入转换为number类型

lazy——将数据改到change事件中发生

debounde——设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。

5.v-for

v-for指令基于源数据重复渲染元素。使用$index呈现相对应的数组索引。

传入的表达式形式,如:item in/of items

6.v-text

v-text指令可以更新元素的textContent.

7、v-html指令可以更新元素的innerHTML.

注:不建议在网站上直接动态渲染任意HTML片段,很容易导致XSS攻击。

8、v-bind指令用于响应更新HTML特性,将一个或多个attribute,或者一个组件prop动态绑定到表达式。

9、v-on指令用于绑定事件监听器。事件类型由参数指定;表达式可以是方法的名字或一个内联语句;如果没有修饰符也可以省略。

如:方法处理器:<button v-on=”doThis”></button>

内联语句:<button v-on:click=”doThat(‘hello’,$event)”></button>

缩写:<button @click=”doThis”></button>

v-on后面可以增加修饰符:

·.stop——调用event.stopPropagation()

·.prevent——调用event.preventDefault()

·.capture——添加事件侦听器时使用capture

·.self——只当事件是从侦听器绑定的元素本身触发时才触发回调。

·.{keyCode | keyAlias}——只在指定按键上触发回调。

如:停止冒泡: @click.stop=”事件名”

阻止默认行为: @click.prevent=事件名

阻止默认行为(无表达式):@submit.prevent

串联修饰符:@click.stop.prevent=”事件名”

键修饰符,键别名:@keyup.enter=”onEnter”

键修饰符,键代码:@keyup.13=”onEnter”

10.v-ref在父组件上注册一个子组件的索引,便于直接访问。

### 如何在 UniApp 和 Vue2 中创建和使用自定义指令 #### 在 Vue2 中创建全局自定义指令 为了在 Vue2 应用程序中创建并应用一个全局自定义指令,可以按照如下方式操作: ```javascript // main.js 文件中的配置 import Vue from 'vue'; import App from './App'; Vue.config.productionTip = false; // 定义全局指令 `v-focus`,用于让指定元素自动获得焦点 Vue.directive('focus', { inserted: function (el) { el.focus(); } }); /* eslint-disable no-new */ new Vue({ render: h => h(App), }).$mount('#app'); ``` 此代码片段展示了如何通过调用 `Vue.directive()` 方法注册名为 `v-focus` 的全局指令,在元素插入到 DOM 后立即执行其回调函数以设置该元素为聚焦状态[^4]。 #### 局部自定义指令的应用场景 如果只需要在一个特定组件内部使用某个自定义指令,则可以通过直接在其对应的 JavaScript 对象内声明来实现局部作用域内的自定义指令: ```html <template> <div class="example"> <!-- 使用了局部定义的 v-highlight 指令 --> <p v-highlight>这段文字将会被高亮显示。</p> </div> </template> <script> export default { name: 'ExampleComponent', directives: { highlight: { bind(el, binding, vnode) { // 设置背景颜色样式作为简单的例子 el.style.backgroundColor = '#FFFFCC'; }, }, }, }; </script> ``` 上述模板说明了一个叫作 `highlight` 的局部指令是如何工作的——它会在绑定阶段改变目标 `<p>` 元素的颜色属性[^5]。 #### 将这些概念应用于 UniApp 平台 UniApp 是基于 Vue 构建的一个跨平台开发框架,因此可以在其中同样遵循以上介绍的方式去编写自定义指令。对于希望在整个项目范围内生效的通用逻辑来说,应该优先考虑采用全局注册的形式;而对于仅限于单个页面或模块使用的特殊行为则更适合采取局部化处理策略。 考虑到不同端环境之间的差异性以及可能存在的兼容性问题,在实际编码过程中还需要注意测试各个平台上表现是否一致,并适当调整相关实现细节以确保最佳用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值