vue.js入门

vue是一个渐进js框架

渐进式:按需引入Vue.js的部分功能,不用把整个框架都导入

1. 传统开发方式

vue.global.js

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head><body><div id="app"><!-- 插值表达式 -->{{msg}}<h2>{{web.title}}</h2><h3>{{web.url}}</h3></div><script>const { createApp, reactive } = VuecreateApp({setup() {const web = reactive({title: "tao355667",url: "tao355667.com"})return {msg: "success",web}}}).mount("#app")</script>
</body></html>

2. 模块化开发

vue.esm-browser.js

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 插值表达式 -->{{msg}}<h2>{{web.title}}</h2><h3>{{web.url}}</h3></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({title: "tao355667",url: "tao355667.com"})return {msg: "success",web}}}).mount("#app")</script>
</body></html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

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

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

相关文章

当当图书网数据采集分析:10万条数据的深入洞察

基于搜索结果&#xff0c;我将为您提供一个关于当当图书网数据采集的文章框架&#xff0c;假设我们已经有了10万条数据的采集结果。请注意&#xff0c;由于没有具体的数据文件&#xff0c;以下内容将是一个示例性的框架&#xff0c;您可以根据实际采集到的数据进行填充和调整。…

1.2MHz,固定频率白光LED驱动器

一、产品概述 TX6216是一款升压转换器&#xff0c;设计用于通过单节锂离子电池驱动多达7个串联的白光LED。 TX6216采用电流模式&#xff0c;固定频率架构来调节LED电流&#xff0c;LED电流通过外部电流检测电阻测量。其低104mV反馈电压可降低功率损耗并提高效率。 TX6216具有…

懒人建站工具过时了?试试这6个WordPress主题,1小时实现高效建站

懒人建站工具&#xff0c;凭借简单易用、快速上手和个性化定制的特点&#xff0c;为不熟悉代码和程序的人提供了搭建美观实用网站的便捷途径。无需专业的前端开发知识&#xff0c;无需雇佣专业开发人员&#xff0c;用户便能轻松实现网站搭建&#xff0c;满足个人或企业需求。懒…

13.C++常用的算法_查找算法

文章目录 遍历算法1. adjacent_find代码工程运行结果 2. binary_search()代码工程运行结果 3. count()代码工程运行结果 4. count_if()代码工程运行结果 遍历算法 1. adjacent_find 代码工程 查找相邻元素是否存在,不存在返回容器最后位置的迭代器#define _CRT_SECURE_NO_WA…

Rustdesk如何编译代码实现安装后,不会在右下角出现托盘图标

环境&#xff1a; Rustdesk1.1.9 问题描述&#xff1a; Rustdesk如何编译代码实现安装后&#xff0c;不会在右下角出现托盘图标 解决方案&#xff1a; 安装后只有自定义进程图标 详细方案&#xff0c;有需要私聊

2023年城市交通系统客流量预测算法赛

ref: 2023中国华录杯数据湖算法大赛 该比赛马上就要结束&#xff0c;0424日答辩。获得了前六的名次&#xff0c;本次比赛给我的感觉就是一言难尽呐。答辩结束再补充吧。

PySpark预计算ClickHouse Bitmap实践

1. 背景 ClickHouse全称是Click Stream&#xff0c;Data WareHouse&#xff0c;是一款高性能的OLAP数据库&#xff0c;既使用了ROLAP模型&#xff0c;又拥有着比肩MOLAP的性能。我们可以用ClickHouse用来做分析平台快速出数。其中的bitmap结构方便我们对人群进行交并。Bitmap位…

中国新质生产力水平(原始+测算+结果)-企业和各省数据集

新质生产力是一个至少涵盖科技、绿色和数字三大方面的集成体&#xff0c;对其评价测度需要依托多属性综合评价方法。文章构建了包含3个一级指标、6个二级指标和18个三级指标的综合体系&#xff0c;采用改进的熵权-TOPSIS方法对指标进行赋权&#xff0c;从而得到全国新质生产力发…

rhce.定时任务和延迟任务项目

一 . 在系统中设定延迟任务要求如下&#xff1a; 在系统中建立 easylee 用户&#xff0c;设定其密码为 easylee 延迟任务由 root 用户建立 要求在 5 小时后备份系统中的用户信息文件到/backup中 确保延迟任务是使用非交互模式建立 确保系统中只有 root 用户和easylee用户可以…

Spring学习(二)

图解&#xff1a; 2.核心容器总结 2.2.1 容器相关 BeanFactory是IoC容器的顶层接口&#xff0c;初始化BeanFactory对象时&#xff0c;加载的bean延迟加载 ApplicationContext接口是Spring容器的核心接口&#xff0c;初始化时bean立即加载 ApplicationContext接口提供基础的be…

阿里云优惠券种类介绍及领取教程详解

随着互联网技术的快速发展&#xff0c;越来越多的企业和个人开始将业务和数据迁移到云端。阿里云作为国内领先的云服务提供商&#xff0c;为广大用户提供了丰富多样的云产品和服务。为了回馈用户&#xff0c;阿里云经常推出各种优惠活动&#xff0c;其中优惠券就是其中一种常见…

设计编程网站集:动物,昆虫,蚂蚁养殖笔记

入门指南 区分白蚁与蚂蚁 日常生活中&#xff0c;人们常常会把白蚁与蚂蚁搞混淆&#xff0c;其实这两者是有很大区别的&#xff0c;养殖方式差别也很大。白蚁主要食用木质纤维&#xff0c;会给家庭房屋带来较大危害&#xff0c;而蚂蚁主要采食甜食和蛋白质类食物&#xff0c;不…

【Linux】服务器硬件及RAID配置实战

目录 一、服务器 1.服务器 2.查看服务器信息 二、RAID 磁盘阵列 三、软RAID的创建和使用 1.添加硬盘&#xff0c;fdisk分区&#xff0c;分区类型ID设置为 fd 2.使用mdadm创建软raid 3.格式化 4.挂载使用 5.mdadm 一、服务器 1.服务器 分类机架式居多 塔…

ubuntu安装vulnhub

文章目录 1.下载docker2.申请加速器3.安装pip4.安装docker-compose5.安装git6.安装vulnhub文件7.运行vulhub中的靶机TypeError: kwargs_from_env() got an unexpected keyword argument ssl_version报错8.tomcat-----CVE-2017-12615(任意文件上传)1.访问192.168.9.101:80802.bp…

【解读】《中华人民共和国网络安全法》:所有IT从业者都应知应懂

随着网络的快速发展&#xff0c;当今社会存在的网络安全问题也是接踵而来&#xff1a;网络入侵、网络攻击等非法活动威胁信息安全&#xff1b;非法获取公民信息、侵犯知识产权、损害公民合法利益&#xff1b;宣扬恐怖主义、极端主义&#xff0c;严重危害国家安全和社会公共利益…

彻底解决 pyshark 库 TShark not found

使用 python 运行 github 某个项目处理 pcap 包时遇到如下报错&#xff1a; &#xff08;先安装了 pyshark 库&#xff09; pyshark.tshark.tshark.TSharkNotFoundException: TShark not found. Try adding its location to the configuration file. Searched these paths: […

微博聚类文本分析和可视化

本文使用python抓取微博数据并对微博文本分析和可视化&#xff0c;LDA&#xff08;树图&#xff09;、关系图、词云、时间趋势&#xff08;折线图&#xff09;、热度地图、词典情感分析&#xff08;饼图和3D柱状图&#xff09;、词向量神经网络情感分析、tfidf聚类、词向量聚类…

前端layui自定义图标的简单使用

iconfont-阿里巴巴矢量图标库 2. 3. 4.追加新图标 5.文件复制追加新图标 如果图标不是一次性下载完成的,后续需要追加的话必须重新建立一个新文件夹然后重新引入就行

(踩坑)Please refer to 异常和Error creating bean with name 异常

一、Please refer to 异常 如图所示&#xff0c;在使用maven构建项目的时候&#xff0c;如果提示该错误&#xff0c;则可能是xml配置文件有问题或者测试类等。但是没有明确的异常信息&#xff0c;所以做以下小改动&#xff0c;可以查看异常信息。 在IDEA工具中&#xff0c;打…

数学建模--深入剖析线性规划(模型全方位解读+代码分析)

1.简介 &#xff08;1&#xff09;线性规划三要素 &#xff08;2&#xff09;模型适用赛题 2.典例讲解 &#xff08;1&#xff09;问题分析 目标函数是净收益尽可能大&#xff0c;风险尽可能小&#xff1b; 约束条件是交易费的分段函数&#xff0c;以及每一笔投资都是非负数&am…