【vue.js】文档解读【day 1】 | 模板语法1

在这里插入图片描述

如果阅读有疑问的话,欢迎评论或私信!!
本人会很热心的阐述自己的想法!谢谢!!!

文章目录

  • 模板语法
    • 前言
    • 文本插值
    • 原始HTML
    • 属性Attribute绑定
    • 动态绑定多个值

模板语法

前言

Vue 使用一种基于 HTML 的模板语法,Vue的所有语法都是合法的HTML代码,都可以被浏览器正常解析。并且在使用Vue提供的模板时,Vue底层还会提供编译优化,使用最少的渲染速度。

文本插值

Vue语法中通过双大括号对页面中指定位置渲染数据,并且数据是响应式数据。例如前面代码中:

<div id="app">{{ message }}</div>

原始HTML

上面通过双大括号插入的值是纯文本形式,若想添加HTML代码,可以通过v-html指令。例如:

<template><h1>练习</h1><p>这是html代码:{{ htmlDisplay }}</p><p><span v-html="htmlDisplay"></span></p>
</template><script>export default{data(){var htmlDisplay = "<h2>这里是使用v-html渲染的结果</h2>";var imgSrc = "/src/components/icons/newImg.gif"return {htmlDisplay,imgSrc}}}
</script>

注意:v-html属性所在标签中不可有任何内容,否则将会报错:v-html will override element children.例如:

<p><span v-html="htmlDisplay"><a href=""></a></span>
</p>

其中a标签引起的控制台错误!

属性Attribute绑定

Vue中使用v-bind绑定属性值,即标签的src、id、class等属性。该属性由于过于常用,Vue还设置了语法糖:id的形式,根据文档可以看出应该注意两个点:

  • 对于v-bind绑定数字或者字符串等数据时,当值为null或者undefined时,该属性将会被忽略。

    <template><img :src="imgSrc" >
    </template><script>export default{data(){var imgSrc = "/src/components/icons/newImg.gif";//正常显示var imgSrcNull = null;//元素标签中不存在src属性var imgSrcUndefined = undefined;//元素标签中不存在src属性var imgSrcEmpty = ""; //src(unknow)return {imgSrc,imgSrcNull,imgSrcUndefined,imgSrcEmpty}}}
    </script>
    
  • 对于v-bind绑定布尔值时,只有值为假值时,才会等于false,而真值空字符串时均为真值

    <template><button :disabled = disableEmpty>123</button>
    </template><script>export default{data(){var disableEmpty = "";//按钮中存在disabled属性,并且按钮无法选中return {disableEmpty}}}
    </script>
    

动态绑定多个值

绑定多个值时,也需要使用v-bind属性,和绑定单个值有一点不同:

不再需要设置引号右边的属性名以及:,直接在对象中设置

<template><h1 v-bind=objAttr>练习</h1>
</template><script>export default{data(){var objAttr = {id:123,class:"a"}               //h1标签中id为123,class属性为areturn {objAttr}}}
</script>

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

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

相关文章

【Mysql】InnoDB 中的聚簇索引、二级索引、联合索引

一、聚簇索引 其实之前内容中介绍的 B 树就是聚簇索引。 这种索引不需要我们显示地使用 INDEX 语句去创建&#xff0c;InnoDB 引擎会自动创建。另外&#xff0c;在 InnoDB 引擎中&#xff0c;聚簇索引就是数据的存储方式。 它有 2 个特点&#xff1a; 特点 1 使用记录主键…

WordPress建站入门教程:phpMyAdmin4.8.5出现Fatal error: Unparenthesized错误怎么办?

我们在本地电脑使用小皮面板phpstudy安装phpMyAdmin4.8.5成功后&#xff0c;但是点击【管理】功能打开时却出现如下错误&#xff1a; Fatal error: Unparenthesized a ? b : c ? d : e is not supported. Use either (a ? b : c) ? d : e or a ? b : (c ? d : e) in D:\…

海格里斯HEGERLS助力服装业领域数智化转型 配备7000个托盘位 仓库容量增超110%

近年来&#xff0c;用工荒成为服装制造行业的一大痛点。对此&#xff0c;整个生产体系就要不断地向智能化、自动化生产设备进行转型&#xff0c;甚至在研发设计上都要面向自动化做一些新一代服装制造业的开发。 作为较早入局物流赛道的河北沃克&#xff0c;目前已构建起以AI赋能…

javascript中对包含关系判断介绍

本文将为您详细讲解 JavaScript 中对包含关系的判断&#xff0c;包括数组、字符串等&#xff0c;并提供相应的代码例子。 1. 数组包含关系判断 在 JavaScript 中&#xff0c;数组包含关系判断通常使用 Array.prototype.includes() 方法。这个方法返回一个布尔值&#xff0c;表示…

什么是云游戏?云游戏平台可以运行3A游戏吗?

对于不熟悉游戏行业的人来说&#xff0c;面对云游戏可能会有一个疑问——除了单机游戏&#xff0c;现在所有游戏不都是联网玩吗&#xff1f;云游戏和网络游戏有什么区别&#xff1f; 实际上&#xff0c;云游戏和传统网络游戏有着本质的不同。 传统网络游戏需要玩家先下载并在本…

python网络爬虫教程笔记(1)

系列文章目录 文章目录 系列文章目录前言一、爬虫入门1.爬虫是什么&#xff1f;2.爬虫工作原理3.爬虫基本原理4.工作流程5.HTTP请求6.HTTP响应7.HTTP原理&#xff1a;证书传递、验证和数据加密、解密过程解析8.Urllib.request库的使用9.TCP3次握手&#xff0c;4次挥手过程 总结…

Oracle 的同义词(Synonym) 作用

Oracle 同义词(Synonym) 是数据库对象的一个别名&#xff0c;Oracle 可以为表、视图、序列、过程、函数、程序包等指定一个别名。同义词有两种类型&#xff1a; 私有同义词&#xff1a;拥有 CREATE SYNONYM 权限的用户(包括非管理员用户)即可创建私有同义词&#xff0c;创建的…

【CSP试题回顾】202203-1-未初始化警告

CSP-202203-1-未初始化警告 关键点总结&#xff1a;set 在C中&#xff0c;set 是一个基于平衡二叉树&#xff08;通常是红黑树&#xff09;的关联容器&#xff0c;它包含了一系列唯一的元素&#xff0c;并且这些元素会自动按照特定的排序准则进行排序。以下是 set 中常用的一些…

openGauss环境搭建 | 新手指南

一、搭建准备 openGauss开发需要使用linux环境&#xff0c;先下载远程连接工具Xshell/MobaXterm 。 1. 使用工具连接远程linux服务器&#xff0c;使用root账号远程登录&#xff0c;创建个人账号。 useradd -d /home/xxx -m xxx 2. 设置密码。 passwd xxx 3. 切换到个人账…

主网NFT的发布合约

1.什么是nft? NFT:Non-fungible-token 非同质化货币 2.新建suimove项目 使用sui move new 项目名命令新建sui move项目 sui move new nft_qyx项目结构如下: 3.写nft合约 module qyx123::nft{use sui::object::{Self, UID};use sui::transfer;use sui::tx_context::{Sel…

主备DNS服务器搭建并验证

目录 1. 配置静态网络 2. 配置主备DNS 2.1 DNS备服务器&#xff08;第二个虚拟机&#xff09; 2.2 两个虚拟机操作 2.3 备用服务器&#xff08;第二个虚拟机&#xff09;执行 2.4 两个虚拟机都添加DNS: 3. 验证 3.1 主DNS服务验证: 3.2 备用DNS服务器验证&am…

基于QGIS的研究区域遥感影像裁切下载方法-以岳麓区为例

目录 前言 一、数据说明 1、遥感影像 2、矢量范围 二、按矢量范围导出 1、第一步、导出影像 2、第二步、设置输出格式 3、设置裁切范围 4、设置分辨率 三、按矢量范围掩膜 1、第一步、打开裁剪工具 2、第二步、参数设置 ​编辑 3、执行掩膜 四、webgis支持 1、生成运行…

【自动驾驶坐标系基础】Frenet坐标系和Cartesian坐标系的相互转换

Frenet坐标系和Cartesian坐标系的相互转换 2023.12.12 1 变量含义 Frenet和Cartesian相互转换即 [ s , s ˙ , s , d , d ˙ , d ] ↔ [ X , θ x , κ x , v x , a x ] [s,\dot{s},\ddot{s},d,\dot{d},\ddot{d}] \leftrightarrow[\boldsymbol{X},\theta_x,\kappa_x,v_x,a_…

【Vue】sessionStorage存取数据

一. 需求 1.1 模板 Vab Admin Pro 1.2 组件 ElementUI 1.3 阐述 列表页面搜索【关键词】点击【查询】后&#xff0c;点击【查看】按钮跳转到【详情页】&#xff0c;详情页【返回】【保留原搜索关键词】 原图 搜索查询【关键词】 详情 返回后【保留】【搜索查询关键词…

二维码门楼牌管理系统应用场景:城市规划与土地管理的新利器

文章目录 前言一、城市规划部门的新助手二、门牌数据的深度应用三、支持可持续城市发展四、与城市规划部门的联动 前言 随着科技的不断进步&#xff0c;二维码技术已经深入到我们生活的方方面面。在城市规划与土地管理领域&#xff0c;二维码门楼牌管理系统正成为一项革命性的…

烧脑问题解决办法:如何选择一款合适自己的手机流量卡

现在社会人们越来越离不开手机了&#xff0c;手机给我们生活带来了翻天覆地的变化&#xff0c;手机需要最多的就是流量了&#xff0c;所以选择一款合适自己的手机流量卡就显得尤为重要了&#xff0c;今天小编就给大家来分享一下我的经验&#xff0c;希望对大家能有帮助&#xf…

MySQL--优化(索引)

MySQL–优化&#xff08;SQL语句执行慢&#xff0c;如何分析&#xff09; 定位慢查询SQL执行计划索引 存储引擎索引底层数据结构聚簇和非聚簇索引索引创建原则索引失效场景 SQL优化经验 索引 索引&#xff08;index&#xff09;是帮助 MySQL 高效获取数据的数据结构&#xff…

Python爬虫——Urllib库-3

目录 ajax的get请求 获取豆瓣电影第一页的数据并保存到本地 获取豆瓣电影前十页的数据 ajax的post请求 总结 ajax的get请求 获取豆瓣电影第一页的数据并保存到本地 首先可以在浏览器找到发送数据的接口 那么我们的url就可以在header中找到了 再加上UA这个header 进行请…

【MySQL】视图、索引

目录 视图视图的用途优点视图的缺点创建视图查看视图修改视图删除视图注意事项 索引索引的原理索引的数据结构二分查找法Hash结构Hash冲突&#xff01;&#xff01;&#xff01; B树二叉查找树 存在问题改造二叉树——B树降低树的高度 B树特点案例继续优化的方向 改造B树——B树…

vulhub中Wordpress 4.6 任意命令执行漏洞复现

由于Mysql初始化需要一段时间&#xff0c;所以请等待。成功运行后&#xff0c;访问http://your-ip:8080/打开站点&#xff0c;初始化管理员用户名和密码后即可使用&#xff08;数据库等已经配置好&#xff0c;且不会自动更新&#xff09;。 发送如下数据包&#xff0c;可见/tmp…