vue.js 四(指令和自定义指令)

官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象

v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-html 更新元素的 innerHTML,如果取回的值里面包含了html的样式,可以使用这个指令。

以下抄写了官方注意事项,对于用户输入的HTML,显示的时候需要谨慎处理。如果是服务器自己生成的HTML,完全由开发者掌控的代码,可以忽略

注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。

在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。

v-show 

根据表达式之真假值,切换元素的 display CSS 属性。

当条件变化时该指令触发过渡效果。

简单说就是控制当前指令的标签是否显示

v-if,v-else, v-else if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>,将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

条件判断,这里简单的条件判断还行,复杂的判断还是直接在模型里处理吧。

v-on

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

用在普通元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event 属性: v-on:click="handle('ok', $event)"

修饰符

  • .stop - 调用 event.stopPropagation()
  • .prevent - 调用 event.preventDefault()
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。
  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

在子组件上监听自定义事件(当子组件触发 “my-event” 时将调用事件处理器):

<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

注意上面对于vue版本的限制,低版本不支持!主要适用于各类事件的处理。

v-bind 

动态地绑定一个或多个特性,或一个组件属性到表达式。

在绑定属性时,属性必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

 v-model

v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

常用的表单控件如select, input,textarea 等

如果是select绑定的值会直接选中,其他的输入则直接选择文本

v-pre

官方的解释是:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

至今没有怎么用过

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

这个指令使用场景比较特殊,在初始化的时候会显示原始的代码,例如

<ul v-for="item in items"><li>{{ item.name }}</li>
</ul>

页面加载未完成时会显示

{{ item.name }}

这时候如果加入了这个指令标签在ul上

<ul v-cloak v-for="item in items"><li>{{ item.name }}</li>
</ul>

然后对应的全局css上加入

[v-cloak] {display: none;
}

页面初始化未完成的时候,整个标签会被隐藏,加载完成后这个标签会自动去掉,显示完整的结果。

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

  <div v-once><p>{{msg}}</p></div><div v-on:click="changeValue">点击修改msg的值</div>

我们绑定一个点击事件试图网页渲染完成后去修改msg的值,事件触发有此标签的内容不会再更改。

---------------------------------------------------------------------------------------------------------

标签内容有的直接拷贝的官方网页上的说明,部分附上了简单的实例

所有的内容尝试一遍,还是有些意外的收货的

可能刚开始项目使用过程中,只用到了部分指令,在都了解了一遍后,我又把原来项目里面部分功能重新修改了一遍

有的功能一个指令能完成的,我可能用了好几个指令去协作完成,毕竟刚开始看官方文档的时候,看得不是很全面

看文档还是要多动手尝试,加深印象,将来用起来更加得心应手

下面附上一个自定义指令

main.js

import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = falseVue.directive('title', {inserted: function (el, binding) {let title = binding.value;if (title) {document.title = binding.value;}}
});/* eslint-disable no-new */
new Vue({el: '#app',router,template: '<App/>',components: { App }
})

然后我们的vue文件里面就可以使用v-title指令了

<template><div v-title="'这里是标题'">这里是内容</div>
</template><script>export default {name: 'home',components: {},data() {return {}}
}
</script>
<style lang="scss" scoped></style>

注意指令内容里面单引号标识这是个字符串,不用单引号,指令值表示变量的名称,要在data里面声明对应的变量名

<template><div v-title="title">这里是内容</div>
</template><script>export default {name: 'home',components: {},data() {return {title:"这里是标题"}}
}
</script>
<style lang="scss" scoped></style>

全局指令注册属于全局API,全局注册指令用法

// 注册
Vue.directive('my-directive', {bind: function () {},inserted: function () {},update: function () {},componentUpdated: function () {},unbind: function () {}
})// 注册(传入一个简单的指令函数)
Vue.directive('my-directive', function () {// 这里将会被 `bind` 和 `update` 调用
})

指令定义函数提供了几个钩子函数说明,只需要声明用到的函数,不需要的可以省略:

  • bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

  • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。

  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

  • unbind: 只调用一次, 指令与元素解绑时调用。

钩子函数被赋予了以下参数:

  • el: 指令所绑定的元素,可以用来直接操作 DOM 。
  • binding: 一个对象,包含以下属性:
    • name: 指令名,不包括 v- 前缀。
    • value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2
    • oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"
    • arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"
    • modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }
  • vnode: Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
  • oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

参数使用如下

Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: '       + s(binding.name) + '<br>' +'value: '      + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: '   + s(binding.arg) + '<br>' +'modifiers: '  + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')}
})

 

指令在绑定网页元素值有优势,例如某些网页上的值显示需要保留两位小数

但是涉及到需要附带元素的css样式,需要附带一些参数控制等,还是需要选择使用插件解决。

转载于:https://www.cnblogs.com/stealth7/p/6958252.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/468375.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java可达性_java垃圾回收机制--可达性算法

先说一些题外话&#xff0c;Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区&#xff0c;这些区分为线程私有区和线程共享区1、线程私有区a、程序计数器记录正在执行的虚拟机字节码指令地址。此区域是是唯一一个在java虚拟机规范中没有规定任何Ou…

为什么要有uboot?

一、为什么要有uboot1.1、计算机系统的主要部件(1)计算机系统就是以CPU为核心来运行的系统。典型的计算机系统有&#xff1a;PC机&#xff08;台式机笔记本&#xff09;、嵌入式设备&#xff08;手机、平板电脑、游戏机&#xff09;、单片机&#xff08;家用电器像电饭锅、空调…

华为路由器上有没有mac表_MAC地址表、ARP缓存表、路由表及交换机、路由器基本原理...

MAC地址表说到MAC地址表&#xff0c;就不得不说一下交换机的工作原理了&#xff0c;因为交换机是根据MAC地址表转发数据帧的。在交换机中有一张记录着局域网主机MAC地址与交换机接口的对应关系的表&#xff0c;交换机就是根据这张表负责将数据帧传输到指定的主机上的。交换机的…

[luoguP2760] 科技庄园(背包DP)

传送门 每次拿完还得回去。。。 数据中有两个需要注意的地方&#xff1a; 存在桃树上有桃子但是摘 0 次的情况题目中要求体力不能为0&#xff0c;因此就算到达了重点体力也不能为0&#xff0c;所以实际上允许使用的体力为 a - 1把每个桃树想象成物品&#xff0c;体力和时间的最…

#define的高级用法

来源&#xff1a;嵌入式大杂烩地址&#xff1a;https://blog.csdn.net/xiaoxu2050/article/details/82893476一、宏的定义与撤销需要注意的是&#xff1a;&#xff08;1&#xff09;宏定义应注意添加括号&#xff0c;这样语义会比较清晰。&#xff08;2&#xff09;使用#undef可…

python读取csv文件_python3.0读取csv文件

创建CSV文件&#xff0c;可以打开excel文件&#xff0c;创建表格以后&#xff0c;另存为csv文件(以逗号分隔的文件)以文本格式打开&#xff0c;发现是用逗号分隔的用python读取csv文件&#xff0c;首先要引入一个库:csvimport csvdef getCsvFile(strpath):with open(strpath, &…

java 导出excel 例子_java导出Excel例子

//在service层写的&#xff0c;在action直接调用此方法就行了//导出Excelpublic boolean exportExcel(HttpServletResponse response,List list){try{OutputStream os response.getOutputStream();// 取得输出流response.reset();// 清空输出流response.setHeader("Conte…

直击中关村创业大街,新街头霸王来了

中国的硅谷在北京中关村。如今&#xff0c;中关村中正在酝酿硅谷中的硅谷&#xff0c;这里将不断诞生最前卫最现代的互联网和移动互联网创业公司&#xff0c;他们当中极可能孵化出中国互联网企业未来10年的新的BAT。这个硅谷中的硅谷。就是中关村创业大街。这条街在过去15年是北…

我们应该这样理解鸿蒙

之前写过文章谈到的鸿蒙&#xff0c;很多人觉得我说的有点过分&#xff0c;但是我觉得现在出来的情况还是符合预期的&#xff0c;鸿蒙正在完成他的任务。讲个故事&#xff0c;手机还没有普及的时候&#xff0c;相机的地位非常高&#xff0c;相机里面有一个东西叫做胶卷&#xf…

人工智能在语音和数字图像处理领域有哪些具体化应用_智能呼叫中心系统有哪些优势...

近年来&#xff0c;随着科技的发展特别是人工智能技术、云计算、大数据的到来&#xff0c;新技术逐渐渗入人们日常生活中的各行各业里面&#xff0c;以机器人来代替人工处理繁重的任务变得普遍。在人工智能时代下&#xff0c;新一代智能呼叫中心系统应运而生&#xff0c;呼叫中…

java cellvalue_Java Cell.getErrorCellValue方法代码示例

import org.apache.poi.ss.usermodel.Cell; //导入方法依赖的package包/类/*** 获取单元格值** param row 获取的行* param column 获取单元格列号* return 单元格值*/public Object getCellValue(Row row, int column) {Object val "";try {Cell cell row.getCell…

centos下mysql多实例安装3306、3307实例(2014-10-15)

背景说明 mysql的安装方法有多种&#xff0c;如二进制安装、源代码编译安装、yum安装等。yum安装仅仅能安装mysql 5.1 版本号&#xff1b;源代码安装编译的过程比較长。若没有对源代码进行改动且要求使用mysql较高版本号&#xff0c;建议使用二进制安装。本文以二进制安装mysql…

如何自己实现一个栈

文章转自编程珠玑&#xff0c;作者&#xff1a;守望先生前言栈是一种应用广泛的数据结构&#xff0c;例如函数的调用就需要使用栈&#xff0c;其实我们在介绍《栈的操作栈的常见操作有出栈(POP)&#xff0c;从栈中弹出一个元素&#xff1b;入栈(PUSH)&#xff0c;将一个元素压入…

python编写ATM类_Python中编写类的各种技巧和方法

有关 Python 内编写类的各种技巧和方法(构建和初始化、重载操作符、类描述、属性访问控制、自定义序列、反射机制、可调用对象、上下文管理、构建描述符对象、Pickling)。你可以把它当作一个教程&#xff0c;进阶&#xff0c;或者使用参考&#xff1b;我希望它能够成为一份针对…

java的沙盒安全模式_Java沙箱机制

自从 Java 技术出现以来, 有关 Java 平台的安全性及由 Java 技术发展所引发的新的安全性问题,引起了越来越多的关注.目前,Java 已经大量应用在各个领域,研究 Java 的安全 性对于更好地使用 Java 具有深远的意义.本文主要从两个方面阐述了 Java 的安全性:一是 Java 平台(主要通过…

PHP斐波那契数列

今天面试遇到一个斐波那契数列的求法 1 1 2 3 5 8 13 ... 要求写出算法 //数组法 function test($num){$arr[];for($i0;$i<$num;$i){if($i0 || $i1){$arr[$i]1;}else{$arr[$i]$arr[$i-1]$arr[$i-2];}}return $arr[$num]; } print_r(test(10));//递归法 function fib_recursi…

再说嵌入式入门

我之前写过几篇嵌入式入门的文章 不过我的读者还是觉得不够过瘾&#xff0c;我觉得还是要着重说一下嵌入式软件应该重点学习什么&#xff0c;guoqing收假最后一天写文。精通C语言 精通C语言 精通C语言C语言对于嵌入式软件来说就是他的命脉&#xff0c;不懂C语言的人根本就不能说…

java ios 开发工具_iOS应用开发的五个Java开源工具

随着第三方工具的不断壮大&#xff0c;开发人员逐渐摆脱政策束缚&#xff0c;对于iOS系统的封闭性为其他语言(如Java)开发者诟病得到解脱&#xff0c;开始使用自己熟悉的语言来编写iOS本地应用&#xff0c;或将其他平台上的应用移植到iOS上。本文为你介绍5款开源的开发工具&…

hive 时间转字符串_大数据面试杀招——Hive高频考点,还不会的进来挨打

一、什么是Hive&#xff0c;为什么要用Hive&#xff0c;你是如何理解Hive?面试官往往一上来就一个“灵魂三连问”&#xff0c;很多没有提前准备好的小伙伴基本回答得都磕磕绊绊&#xff0c;效果不是很好。下面贴出菌哥的回答&#xff1a;Hive是基于Hadoop的一个数据仓库工具&a…

用数组实现一个栈

#include<stdio.h> #define STACK_SIZE 64 /*栈大小*/ #define TOP_OF_STACK -1 /*栈顶位置*/ typedef int ElementType; /*栈元素类型*/ #define SUCCESS 0 #define FAILURE -1 /*定义栈结构*/ typedef struct StackInfo {int topOfStack; /*记录栈顶位置*/ElementType …