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

创建第一个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后就代表安装成功了

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自定义Taro的navBar 组件

由于业务特定&#xff0c;头部的内容会不大相同 下面是自定义的navBar 组件 首先在index.config.ts 文件中 将navigationStyle设置‘custom’&#xff0c;这样头部自带的内容就不会存在 &#xff0c;自定义navBar 这里自定义了一个计算不同设备头部胶囊的高度hook-useCustomNa…

资深测试总结,性能测试目的如何做?主要看什么指标?

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、性能测试是什么…

Windows安装Tesseract OCR与Python中使用pytesseract进行文字识别

文章目录 前言一、下载并安装Tesseract OCR二、配置环境变量三、Python中安装使用pytesseract总结 前言 Tesseract OCR是一个开源OCR&#xff08;Optical Character Recognition&#xff09;引擎&#xff0c;用于从图像中提取文本。Pytesseract是Tesseract OCR的Python封装&am…

物联网终端设备众多,为何遥测终端机备受瞩目?

遥测终端机是一种用于数据采集、远程传输、数据存储与处理的综合体设备&#xff0c;已逐渐成为现代智能物联领域的焦点。遥测终端机集成了多种传感器与通信模块&#xff0c;能够实时采集各种环境参数&#xff0c;如温度、湿度、压力、流量等&#xff0c;同时支持无线通信&#…

9.9万做直升机产权项目合伙人 | 新机遇,共享千亿财富

你曾想过能开直升机&#xff1f;甚至想拥有一架直升机&#xff1f;那种飞跃人生的心境&#xff0c;翱翔蓝天白云。可面临居多疑问&#xff0c;比如&#xff1a;学开直升机需要怎样的条件&#xff08;年龄、学历、费用、学习内容及周期等&#xff09;?到哪里学/买直升机比较安全…

高通平台开发系列讲解(USB篇)MBIM 调试记录

文章目录 一、MBIM网卡显示二、未插入SIM卡情况显示三、SIM 无服务四、正常五、抓取QXDM log 分析沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本文主要介绍MBIM网卡调试过程的记录。 一、MBIM网卡显示 若显示黄标,则检查mbimd进程是否正常,mbim驱动是否正常。 二…

【深度学习】注意力机制(四)

本文介绍一些注意力机制的实现&#xff0c;包括VIP/CoAtNet/Scaling Local Self-Attention/PSA/CoT。 【深度学习】注意力机制&#xff08;一&#xff09; 【深度学习】注意力机制&#xff08;二&#xff09; 【深度学习】注意力机制&#xff08;三&#xff09; 【深度学习…

scala集合_数组_元组_映射_列表

数组元组映射列表 1.11 集合&#xff08;scala.collection&#xff09; 集合是一种用来存储各种对象和数据的容器。Scala 集合分为可变的和不可变的集合。 1. 不可变集合可以安全的并发访问。 2. 可变集合可以在适当的地方被更新或扩展。这意味着你可以修改&#xff0c;添加…

云计算在数字营销中的作用是什么?

营销策略和云计算是一个为企业提供多种优势的系统。它使他们能够取得更大的成功&#xff0c;同时提高产量。这样做的原因是&#xff0c;可以从任何位置远程使用云集成工具和应用程序。基本上&#xff0c;该系统增强了存储设备和传播。同时&#xff0c;它减轻了公司 IT 网络的压…

《Effective C++》学习笔记

条款01&#xff1a;把 C 看成一个语言联邦 C由几个重要的次语言构成 C语言&#xff1a;区块&#xff0c;语句&#xff0c;预处理器&#xff0c;数组&#xff0c;指针等等。 类&#xff1a;class&#xff0c;封装&#xff0c;继承&#xff0c;多态......&#xff08;动态绑定等…

MyBatis-Plus - 论自定义 BaseMapper 方法『逻辑删』失效解决方案

问题描述 在上一篇我们讲过 MyBatis-Plus - 论 1 个实体类被 N 个DAO 类绑定&#xff0c;导致 MP 特性&#xff08;逻辑删&#xff09;失效的解决方案-CSDN博客 所以在这个基础上&#xff0c;我们可以很好定位到源码的分析位置。 但是今天这个问题就更奇怪了&#xff0c;已经…

apt-get update失败

一、先验证是否有网络 rootlocalhost:~# ping www.baidu.com ping: www.baidu.com: Temporary failure in name resolution rootlocalhost:~# 说明没有网&#xff0c;参考&#xff1a;https://blog.csdn.net/qq_43445867/article/details/132384031 sudo vim /etc/resolv.con…

巧用ChatGPT系列丛书(由北京大学出版社出版)

前言 随着人工智能技术的迅速发展&#xff0c;越来越多的工具和应用程序被应用于职场中&#xff0c;以提高我们的工作效率。其中&#xff0c;ChatGPT作为一种先进的自然语言处理技术&#xff0c;正在逐渐引起人们的关注。 ✨巧用ChatGPT系列书籍&#xff1a; 《巧用chatGPT快…

抖去推--短视频剪辑、矩阵无人直播saas营销工具一站式开发

抖去推是一款短视频剪辑和矩阵无人直播SAAS营销工具一站式开发平台。它提供了以下功能和特点&#xff1a; 1. 短视频剪辑&#xff1a;抖去推提供了一系列的剪辑工具&#xff0c;包括自动剪辑、特效制作、配音配乐等&#xff0c;可以帮助用户轻松制作出高质量的短视频。 2. 矩阵…

使用curl在Linux系统上进行HTTP请求代码示例

在Linux系统上&#xff0c;curl是一个非常实用的命令行工具&#xff0c;用于进行HTTP请求。下面是一些使用curl进行HTTP请求的示例代码。 获取网页内容 bash复制代码 curl https://www.example.com 这个命令会向https://www.example.com发送一个GET请求&#xff0c;并将返回的…

接口自动化多层嵌套json数据处理代码实例

最近在做接口自动化测试&#xff0c;响应的内容大多数是多层嵌套的json数据&#xff0c;在对响应数据进行校验的时候&#xff0c;可以通过&#xff08;key1.key2.key3&#xff09;形式获取嵌套字典值的方法获取响应值&#xff0c;再和预期值比较 1 2 3 4 5 6 7 8 9 10 11 12 13…

前期只用到审批流程,好用的OA软件有哪几个?

“前期只用到审批流程&#xff0c;需要五六个人层层审批&#xff0c;最好审批流程是免费的&#xff0c;后期会扩展到其它功能&#xff0c;有适合我的软件吗&#xff1f;” 先来总结一下题主的需求&#xff1a; OA系统中审批流程最好是免费的流程需要层层审批后期能够扩展到其…

企业展厅 | OLED薄纸屏:屏幕与安装环境融为一体

企业展厅 | OLED薄纸屏&#xff1a;屏幕与安装环境融为一体 产品&#xff1a;55寸OLED柔性屏 项目时间&#xff1a;2023年11月 项目地点&#xff1a;浙江嘉兴 应用场景&#xff1a;通过OLED柔性屏具有色彩鲜艳、可弯曲等特性&#xff0c;满足对安装环境的灵活展示和需求&…

CTF V8 pwn入门(一)

仍然是因为某些原因&#xff0c;需要学学浏览器pwn 环境 depot_tools建议直接去gitlab里下&#xff0c;github上这个我用魔法都没下下来 下完之后执行 echo export PATH$PATH:"/root/depot_tools" >> ~/.bashrc路径换成自己的就ok了 然后是ninja git clo…

企业IT安全:内部威胁检测和缓解

什么是内部威胁 内部威胁是指由组织内部的某个人造成的威胁&#xff0c;他们可能会造成损害或窃取数据以谋取自己的经济利益&#xff0c;造成这种威胁的主要原因是心怀不满的员工。 任何内部人员&#xff0c;无论是员工、前雇员、承包商、第三方供应商还是业务合作伙伴&#…