创建第一个Vue2项目-----HelloWorld

news2024/12/28 2:57:39

创建第一个Vue项目

  1. 第一步先去安装Vue,一共有两种安装方式,这里使用

点击这里下载:Vue.js
在这里插入图片描述
添加到自己的项目中
在这里插入图片描述
在使用的页面引入<script src="../js/vue.js"></script>
2. 准备好一个容器

<div id="root">
    <h1>hello{{name}}</h1>
</div>
  1. 创建一个Vue实例
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成产生提示。
    // 创建Vue实例
    new Vue({
        el:'#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串。
        data:{
            //data用于存储数据,数据供el指定的容器使用,暂时写成一个对象
            name:'World'
        }
    })
</script>
  1. 运行时浏览器还需安装vue的开发者工具
    链接:https://pan.baidu.com/s/1JzHx27vZ5_c8F9gHA5gzgg?pwd=0622
    提取码:0622
  2. 打开浏览器的设置中的拓展程序,打开开发者模式直接将文件拖入浏览器中下载即可
    在这里插入图片描述

最后回到vscode中运行html页面,运行没问题且看到Vue后就代表安装成功了

在这里插入图片描述

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

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

相关文章

迪拜义乌中国小商品城,开启中东区域展贸新商机

迪拜义乌中国小商品城&#xff0c;一颗璀璨的批发市场新星&#xff0c;正在迪拜杰贝阿里自贸区内冉冉升起。      在全球格局巨变的背景下&#xff0c;阿联酋与欧美货币深度绑定&#xff0c;同时又积极加入金砖国家集团&#xff0c;与发展中国家的经济不断融合。而作为国际…

微信小程序---wxs脚本

WXS&#xff08;WeiXin Script&#xff09;是小程序的一套脚本语言&#xff0c;结合 WXML&#xff0c;可以构建出页面的结构。 WXS 与 JavaScript 是不同的语言&#xff0c;有自己的语法&#xff0c;并不和 JavaScript 一致。 1.wxs和JavaScript的区别 2.wxs脚本基础语法 &a…

uniapp+vite+ts+express踩坑总结

1 关于引入express包报 import express from "express"; ^^^^^^ SyntaxError: Cannot use import statement outside a module的问题。 解决方案&#xff1a; 在package.json中添加type&#xff1a;“module”选项 2 Response is a type and must be imported …

崩坏:星穹铁道【V1.5攻略】五星(金)-遗器主、副词条成长数值参考

星穹铁道中五星遗器词条成长数值攻略&#xff1a; 温馨提示&#xff1a;以下数据会可能会出现一点一点误差&#xff0c;见谅... --------------------------- 一、如图&#xff1a; ----->>细节补充<<----- ①实际数值可能与游戏中不一&#xff0c;若数据出现无法忽…

【BigDecimal类—常用API系列】解决java浮点计算精度损失问题

文章目录 Java浮点计算精度损失问题BigDecimal进行精确运算的解决方案 Java浮点计算精度损失问题 BigDecimal它是干什么用的呢&#xff1f;什么是java浮点计算精度损失问题&#xff1f;我们先看一段代码&#xff0c;看这个代码有什么问题&#xff1f;再说BigDeimal这个类是干什…

Leetcode—113.路径总和II【中等】

2023每日刷题&#xff08;五十七&#xff09; Leetcode—113.路径总和II 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* …

Javac编译原理

文章目录 1. Javac是什么2. Javac编译器的基本结构3. Javac工作原理分析 1. Javac是什么 Javac是一种编译器&#xff0c;能将一种语言规范转成另一种语言规范&#xff0c;javac编译器将Java编译器对所有机器都非常友好的一种语言。注意这种语言不是针对某个机器的&#xff0c;…

leetcode对称二叉树(每日一题)

https://leetcode.cn/problems/symmetric-tree/description/ 今天我们在来个题目&#xff0c;对称二叉树&#xff0c;其实这道题的思路我觉得和那到判断两棵树是不是相同的题目很相似&#xff0c;写这个题目的思路还是递归&#xff0c;但是我们看这个题目的时候需要注意的一个…

智能优化算法应用:基于猫群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于猫群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于猫群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.猫群算法4.实验参数设定5.算法结果6.参考文献7.MA…

python-爬取壁纸

代理池的&#xff0c;防止IP 被封 找到图片真实地址 现在看到的只是图片的预览地址 (previews) 1.检查&#xff1a; 2.鼠标变为箭头时查看网页源代码 关于怎样在源代码中找到图片的真实地址 ??? 为什么在源代码界面 ctrl f 时候搜索的是 .png ??? 首先图片地址是以 .j…

死锁(面试常问)

1.什么是死锁 简单来说就是一个线程加锁后解锁不了 一个线程&#xff0c;一把锁&#xff0c;线程连续加锁两次。如果这个锁是不可重入锁&#xff0c;会死锁。两个线程&#xff0c;两把锁。 举几个例子&#xff0c;1.钥匙锁车里了&#xff0c;车钥匙锁家里了。2. 现在有一本书…

MySQL低版本中:字符串中的数字、英文字符、汉字提取

我们如何提醒一个字段中的汉字和数字呢 高版本指mysql8.0以上 使用sql语句 SELECT REGEXP_REPLACE(column_name, [^\\p{Han}], ) AS chinese_characters FROM table_name;其中 column_name指名称列&#xff0c;table_name是表名 2.低版本使用 需要新建函数 DELIMITER $$DR…

phpstudy搭建WordPress教程

一、phpstudy新建配置WordPress 打开phpstudy&#xff0c;启动Apache&#xff08;或者Nginx&#xff09;和MySQL服务 来到数据库部分&#xff0c;点击[创建数据库]&#xff0c;填写新建数据库的名称&#xff0c;用户名以及密码&#xff0c;完成后点击确认 来到网站部分&#x…

vue3 使用 Element-plus 的 el-pagination 分页组件时无法显示中文

使用element-puss框架&#xff0c;分页显示英文 解决方法 在main.ts element-puss,2.3.8版本后的&#xff0c; import zhCn from "element-plus/es/locale/lang/zh-cn"; element-puss,2.3.8版本以前的&#xff0c; import zhCn from "element-plus/lib/loc…

山西电力市场日前价格预测【2023-12-11】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-12-11&#xff09;山西电力市场全天平均日前电价为535.55元/MWh。其中&#xff0c;最高日前电价为689.29元/MWh&#xff0c;预计出现在09:00。最低日前电价为422.38元/MWh&#xff0c;预计…

Vue2学习笔记(组件嵌套)

示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>数据绑定</title><script type"…

lwIP 细节之六:connected、sent、poll 回调函数是何时调用的

使用 lwIP 协议栈进行 TCP 裸机编程&#xff0c;其本质就是编写协议栈指定的各种回调函数。将你的应用逻辑封装成函数&#xff0c;注册到协议栈&#xff0c;在适当的时候&#xff0c;由协议栈自动调用&#xff0c;所以称为回调。 注&#xff1a;除非特别说明&#xff0c;以下内…

大数据湖体系规划与建设方案:PPT全文51页,附下载

关键词&#xff1a;大数据解决方案&#xff0c;数据湖解决方案&#xff0c;数据数仓建设方案&#xff0c;大数据湖建设规划&#xff0c;大数据湖发展趋势 一、大数据湖体系规划与建设背景 在传统的企业信息化建设中&#xff0c;各个业务系统通常是独立建设的&#xff0c;导致…

打工人副业变现秘籍,某多/某手变现底层引擎-Stable Diffusion 黑白老照片上色修复

在这个时代,我们习惯于拥有高清、色彩丰富的照片,然而,那些古老的黑白色老照片由于年代的久远,往往会出现模糊、破损等现象。 那么今天要给大家介绍的是,用 Stable Diffusion 来修复老照片。 前段时间 ControlNet 的除了上线了“IP-Adapter”模型以外还增加另一个…

【云原生kubernets】Deployment的功能与应用

一、导读 所有的 Deployment 对象都是由 Kubernetes 集群中的 DeploymentController 进行管理&#xff0c;DeploymentController 会在启动时通过 Informer 监听三种不同资源的通知&#xff0c;Pod、ReplicaSet 和 Deployment&#xff0c;这三种资源的变动都会触发 DeploymentCo…