Vue实现简单小案例

一、创建文件夹

二、引用vue.js

<script src="../js/vue.js"></script>

三、准备一个容器

<div id="app"><h1>Hello,{{name}}</h1>
</div>

四、创建实例

<script>new Vue({el:"#app",  //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串data:{  //data中用于存储数据,数据供el所指定的容器去使用name:'小田'}})
</script>

五、效果图

六、整体代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>tian</title><script src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="app"><h1>Hello,{{name}}</h1>
</div><script>//创建Vue实例new Vue({el:"#app",  //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串data:{  //data中用于存储数据,数据供el所指定的容器去使用name:'小田'}})
</script>
</body>
</html>

七、总结

  1. 想让vue工作,必须创建一个vue实例,且传入一个配置对象
  2. app容器代码依然符合html规范
  3. app容器代码被称为Vue模板

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

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

相关文章

Godot入门 03世界构建1.0版

在game场景&#xff0c;删除StaticBody2D节点&#xff0c;添加TileMap节点 添加TileSet图块集 添加TileSet源 拖动图片到图块&#xff0c;自动创建图块 使用橡皮擦擦除。取消橡皮擦后按住Shift创建大型图块。 进入选择模式&#xff0c;TileMap选择绘制&#xff0c;选中图块后在…

60V_20A超大电流LED照明车灯舞台灯同步降压芯片,驱动效率达99%并具有PWM极佳调光功能

简介 PC1226 是一款同步降压驱动控制芯片&#xff0c;用于驱动大功率 LED。芯片工作电压范围 7~60V&#xff0c;能够稳定输出高达数十安培的驱动电流&#xff0c;且有着极高的转换效率。 PC1226 集成了 PMOS 驱动模块&#xff0c;用于驱动高侧的 PMOS 功率 MOS&#xff0c;与…

【NPU 系列专栏 2 -- NVIDIA 的 H100 和 H200 是什么?】

请阅读【嵌入式及芯片开发学必备专栏】 文章目录 NVIDIA H100 和 H200 芯片NVIDIA H100 芯片简介NVIDIA H100 主要特点NVIDIA H100 应用场景NVIDIA H100 使用举例NVIDIA H200 芯片简介NVIDIA H200 主要特点NVIDIA H200 应用场景NVIDIA H200 使用举例Summary NVIDIA H100 和 H20…

甲方怒斥!!!为什么媒体不按原稿发布?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 前几天执行了一个媒体邀约的项目&#xff0c;邀约媒体参会&#xff0c;以及活动现场一切都很顺利&#xff0c;稿件同步的很晚&#xff0c;但还是让几个媒体连夜进行了刊登报道&#xff0…

AutoMySQLBackup execution.. Backup failed Docker部署mysql 自动备份失败!!

摘要&#xff1a; Docker容器部署的mysql5.7版本遇到使用AutoMYSQLBackup备份失败了&#xff0c;反复修改automysqlbackup.conf也不起效。这里推荐一种新的办法绕开老路子直接备份。 目录 一、环境介绍 二、AutoMYSQLBackup 三、问题描述 四、解决思路 4.1第一种解决思…

用cmake创建一个c++工程,调用c语言函数打印“c hello!”。

要使用CMake创建一个C工程&#xff0c;并在其中调用C语言函数以打印“C hello!”&#xff0c;你可以按照以下步骤操作&#xff1a; 1. 项目目录结构 首先&#xff0c;确保你的项目目录结构如下&#xff1a; CPlusPlusWithCLibrary ├── CMakeLists.txt └── src├── m…

C++的map和set介绍

系列文章目录 二叉树搜索树 map和set习题 文章目录 系列文章目录前言一、关联式容器键值对二、树形结构的关联式容器2.1 set2.1.1 set的介绍2.1.3 set的使用删除节点find的不同效率count举例lower_bound 和 upper_bound 2.2 multiset2.2.1 区别&#xff1a;find查找erase删除e…

【深度学习】大模型GLM-4-9B Chat ,微调与部署(3) TensorRT-LLM、TensorRT量化加速、Triton部署

文章目录 获取TensorRT-LLM代码&#xff1a;构建docker镜像并安装TensorRT-LLM&#xff1a;运行docker镜像&#xff1a;安装依赖魔改下部分package代码&#xff1a;量化&#xff1a;构建图&#xff1a;全局参数插件配置常用配置参数 测试推理是否可以代码推理CLI推理 性能测试小…

FFmpeg音视频流媒体的顶级项目

搞音视频、流媒体的圈子,没法躲开ffmpeg这个神级项目。 FFmpeg 是一个功能强大且广泛使用的多媒体处理工具。FFmpeg 具备众多出色的特性。它支持多种音频和视频格式的转换,能轻松将一种格式的文件转换为另一种,满足不同设备和应用的需求。不仅如此,它还可以进行视频的裁剪、…

你敢信!IP也能实现https

IP作为属于底层基础网络&#xff0c;在访问网站时IP是不可避免要使用到的。对于个别单位而言IP并不需要绑定域名&#xff0c;在进行互联网信息交互的过程中不可避免的会需要实现加密访问&#xff0c;在加密时使用符合IP的专用SSL证书就显得格外重要&#xff0c;毕竟在实现网络信…

SpringBoot入门:如何新建SpringBoot项目(保姆级教程)

在本文中&#xff0c;我们将演示如何新建一个基本的 Spring Boot 项目。写这篇文章的时候我还是很惊讶的&#xff0c;因为我发现有些java的初学者&#xff0c;甚至工作10年的老员工居然并不会新建一个SpringBoot项目&#xff0c;所以特别出了一篇文章来教大家新建一个SpringBoo…

六、1 TIM输出比较、PWM

1、英文缩写 OC&#xff08;Output Compare&#xff09;输出比较 IC&#xff08;Input Capture&#xff09;输入捕获 CC&#xff08;Capture/Compare&#xff09;输入捕获和输出比较单元 CNT计数器 CCR&#xff08;Capture/Compare Register&#xff09;捕获/比较寄存器 …

家政项目小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;家政人员管理&#xff0c;家政服务管理&#xff0c;咨询信息管理&#xff0c;咨询服务管理&#xff0c;家政预约管理&#xff0c;留言板管理&#xff0c;系统管理 微信端账号功能…

如何查看Windows电脑密钥?Windows密钥一键获取

在数字时代&#xff0c;软件的安全性和授权问题日益受到重视。Windows操作系统&#xff0c;作为全球使用最广泛的电脑操作系统之一&#xff0c;其激活和授权机制对于确保软件的正版使用至关重要。Windows密钥&#xff0c;作为激活和验证操作系统正版性的关键&#xff0c;有时需…

Linux源码阅读笔记14-IO体系结构与访问设备

IO体系结构 与外设通信通常称为输入输出&#xff0c;一般缩写为I/O。在实现外设IO的时候&#xff0c;内核必须处理三个可能出现的问题&#xff1a; 必须根据具体的设备类型和模型&#xff0c;使用各种方法对硬件寻址。内核必须向用户应用程序和系统工具提供访问各种设备的方法…

便携式气象仪:科技赋能,让气象观测更智能

随着科技的快速发展&#xff0c;越来越多的领域受益于技术的进步。其中&#xff0c;气象观测领域也不例外。传统的气象观测设备虽然精确可靠&#xff0c;但往往体积庞大、携带不便&#xff0c;且需要专业人员进行操作和维护。而便携式气象仪的出现&#xff0c;则打破了这一局限…

如何解决ChromeDriver 126找不到chromedriver.exe问题

引言 在使用Selenium和ChromeDriver进行网页自动化时&#xff0c;ChromeDriver与Chrome浏览器版本不匹配的问题时有发生。最近&#xff0c;许多开发者在使用ChromeDriver 126时遇到了无法找到chromedriver.exe文件的错误。本文将介绍该问题的原因&#xff0c;并提供详细的解决…

Python爬虫技术 第13节 HTML和CSS选择器

在爬虫技术中&#xff0c;解析和提取网页数据是核心部分。HTML 和 CSS 选择器被广泛用于定位网页中的特定元素。下面将详细介绍这些选择器如何在 Python 中使用&#xff0c;特别是在使用像 Beautiful Soup 或 Scrapy 这样的库时。 HTML 选择器 HTML 选择器基于 HTML 元素的属性…

【微信小程序实战教程】之微信小程序 WXSS样式处理详解

WXSS样式处理 有过Web开发经验的开发者应该都了解CSS&#xff08;全称 Cascading Style Sheets&#xff09;是一种用于描述HTML或XML文档呈现的样式表语言。而WXSS&#xff08;全称 WeiXin Style Sheets&#xff09;是一套样式语言&#xff0c;用于描述WXML的组件样式&#xf…

CAS原理以及AtomicStampedRefernce

目录 CAS概念没有使用CAS之前使用CAS之后CAS介绍代码案例为什么CAS能保证原子性&#xff1f;1、Unsafe2、offset 偏移量3、变量value用volatile修饰4、自旋保持原子性5、底层汇编语言的具体执行 原子引用CAS与自旋锁实现一个自旋锁 CAS缺点及解决AtomicStampedRefernce CAS概念…