Vue基础知识

zmhz 2023-10-23 原文

模板语法

文本插值（text interpolation）

最基本的数据绑定形式，使用“Mustache”语法即{{...}}

<span>Message:{{msg}}</span>

{{}}中的值会被替换为相应组件实例中msg属性的值，且会同步地更新

原始HTML

<p>Message:<span v-html="msg"></span></p>

这里的v-html被称为指令

Attribute绑定

双大括号不能在HTML Attributes中使用，因此想要响应式地绑定属性应该使用v-bind指令

<div v-bind:id="dynamicId"></div>

v-bind可简写为

<div :id="dynamicId"></div>

布尔型Attribute

依据布尔值决定属性是否应该存在于该元素之上

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

动态绑定多个值

假设有这样一个包含多个属性的js对象

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上

<div v-bind="objectOfAttrs"></div>

使用JavaScript表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>

在vue模板中js表达式可以被应用于如下场景：

（1）在文本插值中（2）在Vue指令的属性值中

注意：每个绑定仅支持单一表达式

例：如下用法都是无效的

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}
<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

调用函数

可在绑定的表达式中使用一个组件暴露的方法

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

指令Directives

一个指令的任务是在其表达式的值变化时响应地更新DOM

例：v-if会基于seen的布尔值来动态移除/插入该p元素

<p v-if="seen">Now you see me</p>

参数Arguments

某些指令需要“参数”，如v-bind响应式更新html属性

<a v-bind:href="url"> ... </a>
<!-- 简写 -->
<a :href="url"> ... </a>

再如v-on监听DOM事件（@是v-on:的缩写）

<a v-on:click="doSomething"> ... </a>
<!-- 简写 -->
<a @click="doSomething"> ... </a>

动态参数

在指令参数上可以使用JS表达式，需包含在[ ]内

<!--注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

即如果组件实例中有一个属性attributeName且值为“href”，则这个绑定等价于v-bind:href="url"

同样还可以将一个函数绑定到动态变化的事件名称上

<a v-on:[eventName]="doSomething"> ... </a>
<!-- 简写 -->
<a @[eventName]="doSomething">

当evenntName的值为“focus”时，该绑定等价于v-on:focus="doSomething"

注：动态参数值的限制

（1）动态参数表达式不能使用如空格和引号这种在HTML属性名中不合法的字符，如

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

那么当我们需要传入一个较为复杂的动态参数时，可以使用计算属性

（2）当使用DOM内嵌模板（直接写在HTML文件里的模板）时，名称要避免使用大写字母，因为浏览器会强制转换为小写，如：

<a :[someAttr]="value"> ... </a>

这里的:[someAttr]将被解析为:[someattr]

修饰符Modifiers

以点开头的特殊后缀，表明指令需要以一些特殊方式被绑定

如下面的例子中 .prevent 告诉v-on指令对触发的事件调用event.preventDefault()

<form @submit.prevent="onSubmit">...</form>

有关Vue基础知识的更多相关文章

postman接口测试工具-基础使用教程 - 2
1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，
软件测试基础 - 2
Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
ES基础入门 - 2
ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？
【网络】-- 网络基础 - 2
（本文是网络的宏观的概念铺垫）目录计算机网络背景网络发展认识"协议"网络协议初识协议分层OSI七层模型TCP/IP五层(或四层)模型报头以太网碰撞路由器IP地址和MAC地址IP地址与MAC地址总结IP地址MAC地址计算机网络背景网络发展是最开始先有的计算机，计算机后来因为多项技术的水平升高，逐渐的计算机变的小型化、高效化。后来因为计算机其本身的计算能力比较的快速：独立模式：计算机之间相互独立。如：有三个人，每个人做的不同的事物，但是是需要协作的完成。而这三个人所做的事是需要进行协作的，然而刚开始因为每一台计算机之间都是互相独立的。所以前面的人处理完了就需要将数据
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
【Elasticsearch基础】Elasticsearch索引、文档以及映射操作详解 - 2
文章目录概念索引相关操作创建索引更新副本查看索引删除索引索引的打开与关闭收缩索引索引别名查询索引别名文档相关操作新建文档查询文档更新文档删除文档映射相关操作查询文档映射创建静态映射创建索引并添加映射概念es中有三个概念要清楚，分别为索引、映射和文档（不用死记硬背，大概有个印象就可以）索引可理解为MySQL数据库；映射可理解为MySQL的表结构；文档可理解为MySQL表中的每行数据静态映射和动态映射上面已经介绍了，映射可理解为MySQL的表结构，在MySQL中，向表中插入数据是需要先创建表结构的；但在es中不必这样，可以直接插入文档，es可以根据插入的文档（数据），动态的创建映射（表结构），这就
c++基础-运算符 - 2
目录1关系运算符2运算符优先级3关系表达式的书写代码实例：下面是面试中可能遇到的问题：1关系运算符C++中有6个关系运算符，用于比较两个值的大小关系，它们分别是：运算符描述==等于!=不等于小于>大于小于等于>=大于等于这些运算符返回一个布尔值，即true或false。例如，当x等于y时，x==y的结果为true，否则结果为false。2运算符优先级在C++中，关系运算符的优先级高于赋值运算符，但低于算术运算符。以下是关系运算符的优先级，从高到低排列：运算符描述>,,>=,关系运算符==,!=相等性运算符&&逻辑与`如果在表达式中有多个运算符，则按照优先级顺序依次进行运算。3关系表达式的书写在
计算机必读基础书籍 - 2
一.计算机组成原理这本书利用组合逻辑、同步时序逻辑电路设计的相关知识，从逻辑门开始逐步构建运算器、存储器、数据通路和控制器，最终集成为完整的CU原型系统，使读者从设计者的角度理解计算机部件构成及运行的基本原理，掌握软硬件协同的概念。全书共9章，主要内容包括计算机系统概述、数据信息的表示、运算方法与运算器、存储系统、指令系统、中央处理器、指令流水线、总线系统、输入输出系统。1.计算机系统概述1.1计算机发展历程计算机是一种能够按照事先存储的程序，自动、高速、准确地对相关信息进行处理的电子设备。1946年2月，世界上第一台电子数字计算机ENIAC(ElectronicNum

Vue基础知识

有关Vue基础知识的更多相关文章

随机推荐