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,一经查实,立即删除!

相关文章

Redis提供两种持久化机制RDB和AOF机制

RDB RDB持久化是把当前进程数据生成快照保存到硬盘的过程。所谓内存快照&#xff0c;就是指内存中的数据在某一个时刻的状态记录。这就类似于照片&#xff0c;当你给朋友拍照时&#xff0c;一张照片就能把朋友一瞬间的形象完全记下来。RDB 就是Redis DataBase 的缩写。 优点…

开源OCR模型对比

引言 目前&#xff0c;开源的项目中有很多 OCR 模型&#xff0c;但是没有一个统一的基准来衡量哪个是更好一些的。 面对这么多的模型&#xff0c;让我们有些不知所措。为此&#xff0c;最近一段时间以来&#xff0c;我一直想要构建这样一个基准&#xff0c;现在来看&#xff0…

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

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

动态规划专练( 231.打家劫舍Ⅱ)

231.打家劫舍Ⅱ 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#xff0c;相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间…

锁-java

悲观锁 一上来就加锁&#xff0c;没有安全感&#xff0c; 每次只能一个线程进入&#xff0c;访问完毕后访问完毕后再解锁&#xff0c;性能较差。 乐观锁 一开始是不上锁的&#xff0c;认为是没有问题的&#xff0c;大家一起跑&#xff0c; 等要出现线程安全的时候&#xff…

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

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

华为海思数字芯片设计笔试第六套

声明 下面的题目作答都是自己认为正确的答案&#xff0c;并非官方答案&#xff0c;如果有不同的意见&#xff0c;可以评论区交流。 这些题目也是笔者从各个地方收集的&#xff0c;感觉有些题目答案并不正确&#xff0c;所以在个别题目会给出自己的见解&#xff0c;欢迎大家讨论…

懒人建站工具过时了?试试这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;本次比赛给我的感觉就是一言难尽呐。答辩结束再补充吧。

typedef,#define,asserr,exit函数,free函数

一.typedef的应用 1.给已定的变量类型起个别名 加不加typedef&#xff0c;类型不变 &#xff08;加之前是个数组&#xff0c;加之后是数组类型&#xff1b; 加之前是个函数指针&#xff0c;加之后是函数指针类型&#xff1b;&#xff09; struct _person {char name[20];in…

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;其中优惠券就是其中一种常见…

Anaconda 创建 Python 虚拟环境

查看当前已经安装的python环境 conda env list 创建 python 虚拟环境 conda create -n test # test 为虚拟环境名指定 python 版本为 3.6 conda create -n test python3.6激活虚拟环境 activate test假如想安装 numpy 包 conda install numpy 或者&#xff1a; pip in…

力扣经典150题解析之二十八:盛最多水的容器

目录 力扣经典150题解析之二十八&#xff1a;盛最多水的容器1. 介绍2. 问题描述3. 示例4. 解题思路5. 算法实现6. 复杂度分析7. 测试与验证测试用例设计测试结果分析 8. 总结9. 参考文献感谢阅读 力扣经典150题解析之二十八&#xff1a;盛最多水的容器 1. 介绍 在这篇文章中&…

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

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