整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Vue 2 指令是特殊的 HTML 属性

ue 2 指令是特殊的 HTML 属性,用于将数据绑定到 DOM 元素或执行其他操作。它们以 v- 前缀开头,后面跟着指令名称。

内置指令

Vue 2 提供了许多内置指令,用于执行常见任务,例如:

v-model: 将数据绑定到输入元素的值

v-text: 将数据绑定到元素的文本内容

v-html: 将数据绑定到元素的 HTML 内容

v-if: 根据条件显示或隐藏元素

v-for: 循环遍历数组并渲染元素

v-on: 在元素上添加事件侦听器

v-bind: 动态绑定元素属性

v-class: 动态添加或删除 CSS 类

自定义指令

您还可以创建自己的自定义指令以扩展 Vue 的功能。自定义指令由 JavaScript 对象组成,该对象定义指令的钩子函数。

指令钩子函数包括:

bind: 指令首次绑定到元素时调用

inserted: 指令绑定的元素插入 DOM 时调用

update: 指令绑定的元素或其属性更新时调用

componentUpdated: 指令所在的组件更新时调用

unbind: 指令与元素解绑时调用

有关 Vue 2 指令的更多信息,请参阅以下资源:

Vue 2 指令文档 [移除了无效网址]

创建自定义指令 [移除了无效网址]

以下是一些 Vue 2 指令的示例:

v-model 示例

HTML

TML是一种强大的语言,用于创建网页。虽然大多数开发人员熟悉常用的HTML属性,但还有一些较少人知的属性可以提供额外的功能并增强用户体验。在本文中,我们将探讨7个这样的HTML属性,你可能还不知道。

虚拟键盘的 enterkeyhint 属性

enterkeyhint 是HTML <input> 标签的一个新属性,这个属性会影响虚拟键盘的 enter 键的样式和行为,主要用于移动端和平板电脑等设备上,让用户清楚地知道 enter 键将执行何种动作。这个属性的典型值有 "enter", "done", "go", "next", "previous", "search", 和 "send" 等。

例如,如果你在一个搜索框中使用 enterkeyhint="search" 属性,当用户在移动设备上使用这个搜索框时,enter 键将会变为"搜索",用户点击这个键就能提交搜索。

<form action="/search">
  <input type="text" enterkeyhint="search" name="q">
  <input type="submit" value="Search">
</form>

在这个例子中,输入框的 enterkeyhint 属性设置为 "search",这样在移动设备的虚拟键盘上,enter 键的标签就会变为 "搜索"。

enterkeyhint 的可能取值及其含义如下:

  • "enter":默认行为,一般表示一个换行的操作。
  • "done":表示完成输入的操作,比如填写表单的最后一个字段后,虚拟键盘上的按钮可能会变为“完成”。
  • "go":表示要导航到一个新的页面或视图,或开始一个过程。
  • "next":表示用户将移动到下一个输入字段,适用于有多个输入字段的表单。
  • "previous":表示用户将移动到上一个输入字段,适用于有多个输入字段的表单。
  • "search":表示启动搜索操作,适用于搜索框。
  • "send":表示将发送消息或其他类型的文本,适用于聊天或邮件应用。

记住,这些键盘提示的具体表现可能会因设备或浏览器的不同而略有差异,因为每个系统或浏览器可能会以自己的方式实现这些提示。

2. 自定义有序列表的属性

在使用有序列表时,我们可以利用一些较少为人知的属性来自定义编号的行为。这些属性包括:

  • reversed 属性:它允许我们以相反的顺序对列表项进行编号,从高到低,而不是默认的从低到高。
  • start 属性:它定义了列表应该从哪个数字开始。
  • type 属性:它指定列表项使用数字、字母还是罗马数字。
  • value 属性:它允许你为特定的列表项设置自定义编号。
<ol reversed>
  <li>List item...</li>
  <li>List item...</li>
  <li>List item...</li>
</ol>

<ol reversed start="20" type="1">
  <li>Typee: A Peep at Polynesian Life (1846)</li>
  <li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
  <li>Mardi: and aVoyage Thither (1849)</li>
  <li>Redburn: His First Voyage (1849)</li>
  <li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
  <li>Moby-Dick; or, The Whale (1851)</li>
  <li>Pierre; or, The Ambiguities (1852)</li>
  <li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>

3. img 的 decoding 属性

decoding 属性是 HTML img 标签的一个属性,用于控制图像解码的过程。这个属性有三个可能的取值:

  • sync:同步解码图像。这将会阻止页面的绘制,直到图像被完全解码。这种方式可能导致更长的首次绘制时间,但在图像完成解码后,用户将能够立即看到完整的图像,而不是渐进式的加载。
  • async:异步解码图像。这将在图像下载后的空闲时间进行解码,以避免页面加载或滚动的延迟。用户可能会首先看到部分加载的图像。
  • auto:默认值。浏览器自行决定使用同步解码还是异步解码。

这是一个具体的例子:

<img src="image.jpg" decoding="async" alt="example image">

在这个例子中,图像将在空闲时间异步解码,以避免阻塞页面的其他渲染过程。请注意,decoding 属性并非所有的浏览器都支持。

4.iframe 的 loading 属性

loading 是 HTML iframe 标签的一个属性,主要用于优化页面加载性能。它告诉浏览器何时开始加载 iframe 内容,可以有以下三个值:

  • eager:默认值。立即加载 iframe。即使 iframe 不在当前屏幕视窗(viewport)内,也会立即开始加载。
  • lazy:只有当 iframe 进入或即将进入视窗时,才开始加载 iframe。这可以显著提高页面加载速度,尤其是对于包含多个 iframe 的页面。
  • auto:让浏览器决定何时加载 iframe。

下面是一个具体的例子:

<iframe src="demo.html" loading="lazy"></iframe>

在这个例子中,iframe 会延迟加载,直到它进入或即将进入视窗。这可以帮助优化那些包含了很多 iframe 的页面的性能。

请注意,在Firefox浏览器中,目前不支持iframes上的 loading 属性,但在大多数现代浏览器中,该属性适用于图像。

5. 跨域资源共享(CORS)的 crossorigin 属性

在处理像 <img><audio><video><script><link> 这样的元素时,可能会遇到跨域资源共享(CORS)的需求。 crossorigin 属性允许我们指定资源在CORS方面的获取方式。

<img src="https://example.com/image.jpg" crossorigin="anonymous" alt="Example Image">

该属性接受两个值: anonymoususe-credentials 。将其设置为 anonymous 表示应该在获取资源时不包括用户凭据,而 use-credentials 表示应该包括用户凭据。

6. video 的 disablepictureinpicture 属性

disablePictureInPicture 是 HTML video 标签的一个属性,用于控制是否禁止 "画中画"(Picture-in-Picture)模式。

画中画"模式是一种特殊的播放模式,允许用户在浏览其他网页或应用时继续观看视频。在这种模式下,视频会在一个小窗口中播放,这个小窗口可以浮动在屏幕的任何位置。

如果 disablePictureInPicture 属性被设置(无论值是什么),则该视频将不能进入 "画中画"模式。

<video src="video.mp4" controls disablePictureInPicture></video>

在这个例子中,video 标签有一个 disablePictureInPicture 属性,这意味着用户不能将这个视频切换到 "画中画"模式。

但是需要注意的是,并非所有的浏览器都支持 "画中画"模式,所以 disablePictureInPicture 属性在某些浏览器中可能无效。同时,即使浏览器支持 "画中画"模式,也有可能因为用户的个人设置或其他因素导致 "画中画"模式不能被启用。

7. script 中的 integrity 属性

integrity 是 HTML script 标签的一个属性,用于确保加载的脚本没有被篡改。这个属性的值是脚本内容的 cryptographic hash,通常采用 SRI (Subresource Integrity) hash。如果实际加载的脚本内容的 hash 值与 integrity 属性值不匹配,浏览器就不会执行这个脚本。

这是一个具体的例子:

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

总结

在本文中,我们探讨了一系列鲜为人知的HTML属性,这些属性可以增强您的网页开发项目。从改善用户交互到优化资源加载,这些属性提供了有价值的功能,可能并不被广泛知晓或利用。

击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

玩转JavaScript,你得有很扎实的基础,这些基础体现在哪里?其中一个最重要的点就是对JavaScript的属性和方法有足够的了解和认识。这里,我会带大家一起来彻底消灭这些盲点(对JavaScript属性和方法的分类还存在模糊的印象)。

首先来说一下属性:

在JavaScript中属性有四种类型:私有属性,原型属性,实例属性,类属性

对于这四种属性的区别和使用,下面,我通过一个代码来讲一下。

上面这段代码中四个变量:x是私有属性,z是实例属性,y是类属性,m是原型属性。

接着来看一下属性的访问有何差别。

结果好理解,需要注意几点:1、私有变量只能在函数内使用。2、当实例属性和原型属性拥有相同变量时,先会访问实例属性,没有实例属性就会访问原型属性。3、如上面代码中变量y,只能类才能访问类属性,实例不能访问。

这么一搞,对属性多少就有了一个更完整的理解和印象了。接下来看一下方法就更好理解了。

来看一下方法:(静态方法,实例方法,内部方法)

一、静态方法(不能被实例对象调用)

上面f1就是定义了一个静态方法,实例无法访问。

二、实例方法(注意访问优先级)

在JavaScript中定义一个实例方法的方式有三种:构造函数中使用this,直接绑定在实例上,绑定在原型上。下面就通过一段代码来看一下。

上面这段代码展示了三种方式定义实例方法。执行顺序实例上绑定的优先级高于this上绑定的,this上绑定的高于原型上绑定的实例方法。

三、内部方法(只能内部调用)

上面这段代码定义了两个内部方法method1和method2。由运行结果可知,内部方法method1和method2只能在函数内部调用,外部通过实例对象无法找到该方法。

最后总结一下:

通过这篇文章,我们知道了属性的定义,属性分私有属性,原型属性,实例属性,类属性,这四种,它们各自是怎么定义,及访问原则。同时我们也知道了方法的定义,方法分静态方法,实例方法,内部方法三种,主要注意一下它们的调用,及实例方法的三种创建形式。


上一篇:HTML 实例
下一篇:python 画图-饼图