vue从入门到精通(一):Vue模板语法

一,模板语法

Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的Vue模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。

Vue模板语法有2大类:

  1. 插值语法:

功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。

  1. 指令语法:

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
举例: v-bind:href=“xxx” 或简写为 :href=“xxx” ,xxx同样要写js表达式,且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令,且形式都是:v-???,v-bind只是一个例子.

二,实战

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模板语法</title><script src="../js/vue.js"></script></head><body><div id="root"><h3>您好,{{name}}</h3><br /><h1>指令语法</h1><a v-bind:href="school.url.toLocaleUpperCase()">学习1</a><a :href="school.url">学习2</a></div></body><script type="text/javascript">Vue.config.productionTip= false;new Vue({el: '#root',data: {name: 'jack',school:{name:'百度',url:'www.baidu.com'}}})</script></html>

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

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

相关文章

请介绍下H264的多参考帧技术及其应用场景,并请说明下为什么要有多参考帧?

H.264&#xff08;也称为H.264/AVC&#xff09;的多参考帧机制是其编码效率和质量提升的关键部分。这个机制允许编码器在编码当前帧时&#xff0c;参考多个之前已编码的帧。这种多参考帧的方法为编码器提供了更多的选择&#xff0c;使其能够更准确地预测当前帧的内容&#xff0…

【保姆级介绍自动化的讲解】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

SCP‘s Story

越过“第二夜”的星星&#xff0c;越过“迈克尔连续线”和“禁运线”&#xff0c;在“煤炭之路”最远的一站&#xff0c;有一颗眼泪。这不是织物或纸上的撕裂&#xff0c;而是现实中的撕裂&#xff0c;是物理定律和常识失效的地方。 有些人称之为黑洞&#xff0c;银河系中最大…

【C语言】4.C语言数组(2)

文章目录 6. 二维数组的创建6.1 ⼆维数组的概念6.2 ⼆维数组的创建 7. 二维数组的初始化7.1 不完全初始化7.2 完全初始化7.3 按照⾏初始化7.4 初始化时省略⾏&#xff0c;但是不能省略列 8. 二维数组的使用8.1 ⼆维数组的下标8.2 ⼆维数组的输⼊和输出 9. 二维数组在内存中的存…

利用一段代码轻松绕过PHP授权系统

利用一段代码轻松绕过PHP授权系统 第一步&#xff1a;首先你需要改名全局文件 比如说全局文件 common.php&#xff0c;那么 你将他改为core.php 第二步&#xff1a;创建文件 创建一个文件&#xff0c;和改名前的全局文件名称一样&#xff0c;然后把以下代码复制进去就OK了 …

行列视在做报表之前需要准备哪些前期工作

行列视是一款功能强大的生产数据分析和报表生成工具&#xff0c;使用它进行报表制作之前&#xff0c;确实需要一些前期准备工作&#xff0c;以确保报表的准确性和有效性。以下是进行行列视报表制作前需要准备的一些关键步骤&#xff1a; 1.明确报表需求&#xff1a; - 确定报表…

【MySQL01】【 Explain 命令详解】

文章目录 一、前言二、Explain 概览三、Explain 详解1. id2. select_type3. table4. type5. possible_keys6. key7. key_len8. ref9. rows10. filtered11. extra 列 四、补充1. EXPLAIN 扩展1.1 Extend EXPLAIN1.2 JSON 格式的执行计划 2. Intersection、Union、Sort-Union 索引…

使用C++实时读取串口数据(window使用已编译LibModbus库并用QT实现一个实时读取串口数据)

先看这篇文章&#xff0c;写得很详细: QT应用篇 四、window编译LibModbus库并用QT编写一个Modbus主机 手把手教学 编译好的LibModbus库可以在上面文章里下载&#xff0c;也可以在我的链接里下载&#xff1a; 为了在Qt Creator中创建新项目并嵌入上述C代码&#xff0c;请执行以…

Linux监控apache脚本

监控apache脚本&#xff1a; 1、每十分钟检查apache是否正常运行 分析&#xff1a;进程在运行如何判断 1&#xff09;lockfile是否存在 2&#xff09;pid是在后台存在 3&#xff09;能否正常访问页面 2、如果apache运行不正常&#xff08;进程死亡、页面访问也不正常等情况&am…

C++进阶:红黑树介绍及模拟实现(图示详解过程)

C进阶&#xff1a;红黑树介绍及模拟实现 上次介绍了AVL树&#xff1a;C进阶&#xff1a;AVL树详解及模拟实现&#xff08;图示讲解旋转过程&#xff09; 今天就来紧接着来红黑树啦!!! 文章目录 1.红黑树介绍约束规则 2.项目文件规划3.整体框架&#xff08;节点和Tree&#xf…

whisper报错:hp, ht, pid, tid = _winapi.CreateProcess [WinError 2] 系统找不到指定的文件。

in _execute_child hp&#xff0c; ht&#xff0c; pid&#xff0c; tid _winapi.CreateProcess&#xff08;executable&#xff0c; args&#xff0c; FileNotFoundError&#xff1a; [WinError 2] 系统找不到指定的文件。 原因&#xff1a; 没装ffmpeg 或者 ffmpeg没添加到…

k8s pod就绪探针

Pod 可能需要时间来加载配置或数据&#xff0c;或者可能需要执行预热过程以防止第一个用户请求时间太长影响了用户体验。在这种情况下&#xff0c;不希望该 pod 立即开始接收请求&#xff0c;尤其是在运行的实例可以正确快速地处理请求的情况下。不要将请求转发到正在启动的 po…

YOLOv5独家改进:backbone改进 | 微软新作StarNet:超强轻量级Backbone | CVPR 2024

💡💡💡创新点:star operation(元素乘法)在无需加宽网络下,将输入映射到高维非线性特征空间的能力,这就是StarNet的核心创新,在紧凑的网络结构和较低的能耗下展示了令人印象深刻的性能和低延迟 💡💡💡如何跟YOLOv5结合:替代YOLOv5的backbone 收录 YOL…

电容笔记汇总

电容 一、电容理论基础 1、电容的本质 两个相互靠近的导体&#xff0c;中间夹一层不导电的绝缘介质&#xff0c;这就构成了电容器。当电容器的两个极板之间加上电压时&#xff0c;电容器就会储存电荷。 两个相互靠近的金属板中间夹一层绝缘介质组成的器件&#xff0c;当两端…

豆浆机缺水检测功能如何实现的

豆浆机缺水检测功能的实现是通过光学液位传感器来完成的。这种传感器具有多种优势&#xff0c;如内部所有元器件经过树脂胶封处理&#xff0c;没有任何机械活动部件&#xff0c;免调试、免检验、免维护等特点。它采用了光电液位传感器内置的光学电子元件&#xff0c;体积小、功…

Docker常用镜像安装

1. mysql 1.1 安装 获取镜像 docker pull mysql:8.0.30创建文件挂载目录 创建容器并运行 docker run -p 3306:3306 --name mysql8 \ -v /home/docker/mysql8/log:/var/log/mysql \ -v /home/docker/mysql8/data:/var/lib/mysql \ -v /home/docker/mysql8/mysql-files:/va…

保研机试之【设备驱动程序】

B选项&#xff1a; 综上&#xff0c;我认为这道题选择D~

一些近来对内网攻防的思考

我知道我最近托更托了很久了&#xff0c;其实也不是小编懒啊 这小编也是一直在写&#xff0c;但是遇到的问题比较多&#xff08;我太菜了&#xff09;&#xff0c;所以一直拖着。 但是总不能不更吧 那就讲一下进来的一些内网攻防的思考吧 1.CrossC2上线Linux到CS(成功) …

用友网络的危与机:2023年亏损约10亿元,王文京面临严肃拷问

“企业在新的产业浪潮来临时&#xff0c;应该主动推进新阶段的产品和业务创新&#xff0c;这样才能够在新的浪潮成为主流的时候&#xff0c;走到行业前面&#xff0c;否则就会从产业发展的潮流中掉下来”。用友网络创始人王文京&#xff0c;曾用“冲浪理论”形容一家企业成功的…

Steam喜加一,限时免费领取《Machinika Museum》

《Machinika Museum》限时免费领取啦&#xff01;这是一款烧脑解谜游戏&#xff0c;让你挖掘神秘外星装置的秘密。在这个非常特别的异星装置博物馆里&#xff0c;你将扮演一名研究员&#xff0c;负责解开各种机械谜题&#xff0c;探索背后的故事。 在这个未来世界&#xff0c;外…