在html中使用vue.js的component

由于vue.js不依赖于dom元素,所以在body中引入就行,在head中引入会在渲染dom前加载,影响页面加载速度。

var vm = new Vue({  el: "#app",  data: {  price: "$10",  },  
});

在vue实例中data可以是一个对象,也可以是一个函数,但是在组件中必须是一个函数。

var Counter = {template: `<button @click="count++">当前点击了次</button>`,};

组件是一个对象而不是一个vue实例

完整代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>HTML + CSS</title><link rel="stylesheet" href="styles.css" /></head><body><div id="app"><Pitle label="价目表"></Pitle>{{price}}<Counter /></div><script src="./vue.min.js"></script><script>var Counter = {data() {return {count: 0,};},template: `<button @click="count++">当前点击了{{count}}次</button>`,};var Pitle = {props: ["label"],template: `<h1>{{label}}</h1>`,};// Vue.component("Counter", Counter);var vm = new Vue({components: {Counter,Pitle,},el: "#app",data: {price: "$10",},});</script></body>
</html>

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

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

相关文章

Java二十三种设计模式-工厂方法模式(2/23)

工厂方法模式&#xff1a;设计模式中的瑞士军刀 引言 在软件开发中&#xff0c;工厂方法模式是一种常用的创建型设计模式&#xff0c;它用于处理对象的创建&#xff0c;将对象的实例化推迟到子类中进行。这种模式不仅简化了对象的创建过程&#xff0c;还提高了代码的可维护性…

如何预防最新的baxia变种勒索病毒感染您的计算机?

引言 在当今数字化时代&#xff0c;网络安全威胁层出不穷&#xff0c;其中勒索病毒已成为企业和个人面临的重大挑战之一。近期&#xff0c;.baxia勒索病毒以其高隐蔽性和破坏性引起了广泛关注。本文将详细介绍.baxia勒索病毒的特点、传播方式&#xff0c;并给出相应的应对策略…

【Python】深入了解 Gunicorn:一个高效的 Python WSGI 服务器

我白天是个 搞笑废物 表演不在乎 夜晚变成 忧伤怪物 撕扯着孤独 我曾经是个 感性动物 小心地感触 现在变成 无关人物 &#x1f3b5; 张碧晨/王赫野《何物》 在开发和部署 Python Web 应用时&#xff0c;选择一个高效的 WSGI 服务器非常重要。Gunicorn&…

QT VTK 简单测试工程

目录 1 目录结构 2 文件源码 3 运行结果 4 报错及处理 使用编译好的VTK库进行测试 1 目录结构 2 文件源码 Pro文件 QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c17# You can make your code fail to compile if it uses deprecated APIs. #…

今天我们来聊Java IO模型,BIO、NIO、AIO三种常见IO模型

一、写在开头 很久没更新喽&#xff0c;最近build哥一直在忙着工作&#xff0c;忙着写小说&#xff0c;都忘记学习自己的本职了&#xff0c;哈哈&#xff0c;不过现在正式回归&#xff01; 我们继续学习Java的IO相关内容&#xff0c;之前我们了解到&#xff0c;所谓的IO&#…

工作笔记 5 Post请求 密码加密器PasswordEncoder 小程序登录

1.微信小程序登录 1.1小程序登录流程图 1.2使用sa-token完成登录 参考csdn这位老哥的http://t.csdnimg.cn/oRgvI sa-token是一款轻量级的安全框架 1.2.1首先引入sa-token依赖 <dependency><groupId>cn.dev33</groupId><artifactId>sa-token-spring…

java日常开发中常用的集合工具类方法归总(java8 stream)

1、创建map集合的方式 方式1&#xff1a; Map<String, Object> map new HashMap<>(); map.put("a", "test"); map.put("b", "since"); 方式2&#xff1a; Map<String, Object> map2 new HashMap<>() {{…

【云原生】Prometheus整合Alertmanager告警规则使用详解

目录 一、前言 二、Altermanager概述 2.1 什么是Altermanager 2.2 Altermanager使用场景 三、Altermanager架构与原理 3.1 Altermanager使用步骤 3.2 Altermanager工作机制 3.3 Altermanager在Prometheus中的位置 四、Altermanager部署与接入Prometheus 4.1 Altermana…

ConfigMap-secrets-静态pod

一.ConfigMap 1.概述 ConfigMap资源&#xff0c;简称CM资源&#xff0c;它生成的键值对数据&#xff0c;存储在ETCD数据库中 应用场景&#xff1a;主要是对应用程序的配置 pod通过env变量引入ConfigMap&#xff0c;或者通过数据卷挂载volume的方式引入ConfigMap资源 官方解释…

UniVue@v1.4.0版本发布:运行时调试器RuntimeDebuger

GitHub仓库 发布版本仓库&#xff1a;https://github.com/Avalon712/UniVue 开发版本仓库&#xff1a;https://github.com/Avalon712/UniVue-Develop UniVue拓展框架UniVue源生成器仓库&#xff1a;https://github.com/Avalon712/UniVue-SourceGenerator 更新说明 在没有调…

【Python】Windows系统 pip 换源方法(永久 / 临时)

pip 换源 首先国内较好的镜像地址有&#xff1a; 清华&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 阿里云&#xff1a;http://mirrors.aliyun.com/pypi/simple 豆瓣&#xff1a;http://pypi.douban.com/simple 腾讯&#xff1a;http://mirrors.cloud.tencent.com/…

Mysql数据表的约束(下)

3.默认值约束(default) 与非空约束的命令一致,因为都属于列级约束,因此只需将not null改为default 默认值即可 删除默认值约束: 4.主键约束(primary key) 表示给一张表格设置了一个唯一标识,为了更快的去通过唯一的数据去准确的查找到每一条记录,一半咱们在创建表…

如何在Java中处理空集合和空指针

文章目录 概要示例代码详细解释如下正确处理集合的技巧总结 概要 在Java开发中&#xff0c;我们经常需要处理集合&#xff08;如ArrayList&#xff09;的情况。为了确保程序的稳定性和正确性&#xff0c;我们必须妥善处理空集合和空指针。 示例代码 public class Main {publ…

【Linux】基于环形队列RingQueue的生产消费者模型

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 环形队列的概念及定义 POSIX信号量 RingQueue的实现方式 RingQueue.hpp的构建 Thread.hpp Main.cc主函数的编写 Task.hpp function包装器的使用 总结 前言…

关于Kafka Topic分区和Replication分配的策略

文章目录 1. Topic多分区2. 理想的策略3. 实际的策略4. 如何自定义策略 1. Topic多分区 如图&#xff0c;是一个多分区Topic在Kafka集群中可能得分配情况。 P0-RL代表分区0&#xff0c;Leader副本。 这个Topic是3分区2副本的配置。分区尽量均匀分在不同的Broker上&#xff0c…

根据vue学习react

react的函数式组件与vue2是很像的 一、基础类似点 1、组件下拥有一个根节点&#xff0c;vue2是template&#xff0c;react是幽灵标签<> 2、vue2是{{}}以及v-model&#xff0c;react的绑定是{} 3、vue2编译html是v-html&#xff0c;react是{}&#xff0c;并且react的jsx中…

c++多态详细学习

C++多态性是面向对象编程的一个重要特性,允许对象以多种形式存在。多态性可以通过继承和虚函数来实现。下面详细介绍C++中的多态性: 1. 基础概念 静态多态性(编译时多态性) 静态多态性通过函数重载和运算符重载实现,编译时决定调用哪个函数。 #include <iostream&g…

第3章 创建最小(Minimal APIs)API应用程序

第1章 框架学习的基石与实战策略 第2章 大话ASP.NET Core 入门 第3章 创建最小&#xff08;Minimal APIs&#xff09;API应用程序 1.最小API概述 在ASP.NET Core的广阔天地里&#xff0c;"最小API应用程序"如同一把轻巧而强大的瑞士军刀&#xff0c;专为迅速构建…

Leetcode 3219. Minimum Cost for Cutting Cake II

Leetcode 3219. Minimum Cost for Cutting Cake II 1. 解题思路2. 代码实现 题目链接&#xff1a;3219. Minimum Cost for Cutting Cake II 1. 解题思路 这一题是题目3218的进阶版&#xff0c;主要就是增大了 m , n m,n m,n的取值范围&#xff0c;所以直接用上一题的解法的话…

idea中打开静态网页端口是63342而不是8080

问题&#xff1a; 安装了tomcat 并且也配置了环境&#xff0c;但是在tomcat下运行&#xff0c;总是在63342下面显示。这也就意味着&#xff0c;并没有运行到tomcat环境下。 找了好几个教程&#xff08;中间还去学习了maven&#xff0c;因为跟的教程里面&#xff0c;没有maven,但…