Vue 官方文档2.x教程学习笔记 1 基础 1.4 模板语法 1.4.2 指令

news2024/11/24 4:20:57

Vue 官方文档2.x教程学习笔记

文章目录

      • Vue 官方文档2.x教程学习笔记
      • 1 基础
        • 1.4 模板语法
          • 1.4.2 指令

1 基础

1.4 模板语法

1.4.2 指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。

指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

回顾在介绍中看到的例子:

在这里插入图片描述

这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

【参数】

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。

例如,v-bind 指令可以用于响应式地更新 HTML attribute:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <a v-bind:href='url'>百度一下,你就知道</a>
</div>

<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'https://www.baidu.com'
        }
    })
</script>
</body>
</html>

浏览器效果

在这里插入图片描述

在这里 href 是参数,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

另一个例子是 v-on 指令,它用于监听 DOM 事件:

<a v-on:click="doSomething">...</a>

在这里插入图片描述

在这里参数是监听的事件名。【后面会更详细的解释事件处理】

【动态参数】

2.6.0 新增

从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:

在这里插入图片描述

笔者这里好像不行,没有生效。

在这里插入图片描述

好家伙,还报错了 。谷歌一下

可能是因为是属性取值的方式不一样,不要采取驼峰式命名变量。就是参数列如“attributename”不能存在大写字母,一定要小写字母。不然检测不到参数,提示会变成小写的参数未定义。

改一下

在这里插入图片描述

改成小写都有提示了

在这里插入图片描述

OK。这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data property attributename,其值为 "href",那么这个绑定将等价于 v-bind:href

同样地,可以使用动态参数为一个动态的事件名绑定处理函数。

[对动态参数的值的约束]

动态参数预期会求出一个字符串,异常情况下值为 null

这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

[对动态参数表达式的约束]

动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在 HTML attribute 名里是无效的。

例如:

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

在这里插入图片描述

变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写:【啊这,不早说】

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property,否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

在这里插入图片描述

【修饰符】

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

event.preventDefault()方法是用于取消事件的默认行为,例如,当点击提交按钮时阻止对表单的提交。

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

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

相关文章

【servelt原理_14_Session对象】

Session对象(重点) 1.Session概述 Session用于记录用户的状态。Session是指在一段时间之内&#xff0c;单个客户端与Web服务端的一连串的交互过程。在一个Session中&#xff0c;客户可能会多次请求访问各种不同的服务器资源 2.Session原理 服务器会为每一次会话分配一个Ses…

3.10、以太网交换机的生成树协议 STP

1、如何提高以太网的可靠性&#xff1f; 若交换机 A 与交换机 B 之间的链路故障 若交换机 A 与交换机 B 和 交换机 C 之间的链路都出现故障 则原来的以太网&#xff0c;变成了三个独立的较小的以太网&#xff0c;它们之间无法通行 1.1、冗余链路提高可靠性 添加冗余链路\col…

Sentinel源码解析-源码环境搭建

文章目录前言一、源码环境搭建1.从github上clone下来sentinel的源码仓库到本地&#xff1a;2. 这里我们想学习1.6版本的sentinel源码&#xff0c;所以切换git分支到release-1.63. 启动sentinel-dashboard&#xff1a;4. 登陆dashboard&#xff1a;5. 启动demo项目&#xff1a;6…

备忘录APP源码和设计报告

摘 要 【关键词】备忘录APP&#xff1b;SQLite数据库&#xff1b;Java语言&#xff1b;Android Studio&#xff0c;Activity&#xff0c;Intent&#xff0c;BaseAdapter 本项目是通过Android Studio开发的一款备忘录手机app&#xff0c;有欢迎页面&#xff0c;登录页面&#x…

MybatisPlus的CRUD接口

create、read、update、delete一、insert 1、插入操作 注意&#xff1a;数据库插入id值默认为&#xff1a;全局唯一id 2、主键策略 &#xff08;1&#xff09;ID_WORKER MyBatis-Plus默认的主键策略是&#xff1a;ID_WORKER 全局唯一ID &#xff08;2&#xff09;自增策略 要想…

git分支详解——记住这些指令能帮助你解决大部分git的分支问题

Github 之 分支 branch 操作之 查看分支/创建分支/切换分支/提交分支/删除分支/合并分支 等操作 一、简单介绍 二、查看分支 1、查看本地所有分支&#xff1a;git branch 2、查看远程有哪些分支&#xff1a;git branch -r 3、查看所有分支&#xff08;本地和远程的&#xff09;…

Egg 1. 快速开始 Quick Start 1.3 一步步 Step by Step 1.3.3 添加静态资源 1.3.4 添加渲染模板

Egg Egg 本文仅用于学习记录&#xff0c;不存在任何商业用途&#xff0c;如侵删 文章目录Egg1. 快速开始 Quick Start1.3 一步步 Step by Step1.3.3 添加静态资源1.3.4 添加渲染模板1. 快速开始 Quick Start 1.3 一步步 Step by Step 1.3.3 添加静态资源 Egg 有一个名为stat…

【K8S系列】第十讲:kubectl 命令大全

目录 序言 1.基本介绍 1.1 命令格式介绍 2 基础命令 2.1 create 2.2 delete 2.2.1 根据yaml删除资源 2.2.1 根据名称删除资源 2.3 get 2.3.1查看pod列表 2.3.2 查看node 2.3.3 查看svc 2.3.4 查看all 2.3.5 查看ns 2.3.4 查看deploy 2.3 run 2.4 explain 2.…

基于PHP+MySQL珠宝销售网站的设计与开发

大多数时候珠宝是一种身份和高贵的象征,一个价值不菲的珠宝会给人一种高贵的感觉,同时珠光宝气也是人们非常喜欢的一种氛围,尤其是对女生来说,那种金光闪闪的东西总是会在无形中吸引她们的注意力,但是很多时候人们只能到商场或者专卖店购买珠宝,这种珠宝一方面鱼龙混杂,以次充好…

tinymce富文本编辑器的使用

tinymce富文本编辑器的使用 1、基本介绍 tinymce富文本官网&#xff1a;https://www.tiny.cloud/ 中文文档&#xff1a;http://tinymce.ax-z.cn/ tinymce-npm地址&#xff1a;https://www.npmjs.com/package/tinymce tinymce英文文档-示例地址&#xff1a;https://www.tin…

沟通管理风险管理采购管理@相关方管理

沟通管理目录概述需求&#xff1a;设计思路实现思路分析1.沟通管理绩效报告提供资源2.管理沟通3.监督沟通风险管理规划风险管理识别风险定性风险分析&#xff1a;定量分析风险规划风险应对实施分享应对监督风险采购管理&#xff1a;12.1 规划采购的管理12.2 实施采购控制采购相…

Bugku CTF杂项0和1的故事——01字符串生成二维码

个人说明 备赛半月后&#xff0c;因大多都是Web方向&#xff0c;于是自己将主要目标放在Misc和CryPto上&#xff0c;因为较之逆向和二进制更容易上手。 题目链接 1和0的故事 - Bugku CTF 题目简介如上&#xff0c;打开后是25X25的01字符串&#xff0c;先讲解正确高效做法&a…

SpringBoot 自动装配原理

什么是自动装配 springboot 定义一套接口规范&#xff0c;这套规范规定&#xff1a;springboot 在启动时会扫描外部引用 jar 包中的 META-INF/spring.factories 文件&#xff0c;将文件中配置的类型信息加载到 spring 容器&#xff0c;并执行类中定义的各种操作对于外部 jar 来…

Java并发编程—java内存模型1

文章目录Java内存模型的基础并发编程模型的两个关键性问题1、线程之间如何通信&#xff1f;(问题1)2、进程之间如何通信&#xff1f;(问题2)线程间通信机制&#xff1a;共享内存、消息传递1、共享内存2、消息传递java内存模型抽象结构指令重排序并发编程模型的分类happens-befo…

资料库的webrtc文件传输

一、一个看似简单的事情往往不简单 一个简单的事情往往会倾注你的心血&#xff0c;也许你看到很简单往往其实没那么简单&#xff1b;其实想想今年业余时间的大把代码&#xff0c;真正能成品的好像并不多。 马上年底了&#xff0c;写下这篇文章。每一行程序就像写小说一样&…

Egg 1. 快速开始 Quick Start 1.3 一步步 Step by Step 1.3.1 初始化 1.3.2 创建控制器

Egg Egg 本文仅用于学习记录&#xff0c;不存在任何商业用途&#xff0c;如侵删 文章目录Egg1. 快速开始 Quick Start1.3 一步步 Step by Step1.3.1 初始化1.3.2 创建控制器1. 快速开始 Quick Start 1.3 一步步 Step by Step 之前我们直接使用 npm init egg&#xff0c;选择了…

# 智慧社区管理系统-基础管理-04业主管理

一后端 1entity package com.woniu.community.entity;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;Data AllArgsConstructor NoArgsConstructor public class Owner {private int id;private String userName;private String …

Linux I2C驱动框架, 调试神奇I2C-Tools介绍

1. IIC协议 2. Linux的I2C体系结构分为3个组成部分&#xff1a; I2C核心( i2c-core.c )&#xff1a;   I2C核心提供了I2C总线驱动和设备驱动的注册、注销方法、I2C通信方法(”algorithm”)、与具体适配器无关的代码、探测设备、检测设备地址的上层代码等。 …

在线PDF查看器和PDF编辑器:GrapeCity Documents PDF (GcPdf)

跨平台 JavaScript PDF 查看器 使用我们的 JavaScript PDF 查看器在网络上阅读和编辑 PDF。跨浏览器和框架打开和打印。GrapeCity Documents PDF (GcPdf) 全功能的 JavaScript PDF 查看器和 PDF 编辑器 适用于所有现代浏览器和框架&#xff0c;包括 Edge、Chrome、Firefox、Op…

UML类图中 前缀符号 + - # ~ 的含义

UML类图中有各种符号&#xff0c;新手看着一脸懵逼&#xff0c;今天我就来讲一下各个符号到底是啥意思。 其实这些符号都是在描述类属性的可见性&#xff1a; UML中&#xff0c;可见性分为4级 1、public public 公用的用 前缀表示 &#xff0c;该属性对所有类可见 2、prote…