Vue程序下载

server/2025/3/1 9:24:43/

Vue是一个基于JavaScript(JS)实现的框架,想要使用它,就得先拿到Vue的js文件

Vue官网

Vue2:Vue.js

Vue3:Vue.js - 渐进式 JavaScript 框架 | Vue.js

下载并安装vue.js
第一步:打开Vue2官网,点击下图所示的“起步”:

image.png


第二步:继续点击下图所示的“安装”

image.png


第三步:在“安装”页面向下滚动,直到看到下图所示位置:

image.png


第四步:点击开发版本,并下载
第五步:安装Vue
使用script标签引入vue.js文件。就像这样:

<script src=”xx/vue.js”></script>

1 、第一个Vue程序

1.1、先创建Vue第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
    <!-- 第一步:引入Vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 第二步:指定挂载位置 -->
    <div id="app"></div>
    <!-- 第三步:使用Vue -->
    <script>
        // 3.1创建Vue实例
        const vm=new Vue({
            template:'<h1>hello world!</h1>'
        })
        // 3.2 将Vue实例挂载到指定位置
        vm.$mount('#app')
       // vm.$mount(document.getElementById("app"));
    </script>
</body>
</html>

解释说明:

1、当使用script引入Vue.js之后,Vue会被注册为一个全局变量,就像引入jQuery之后,jQuery也会被注册为一个全局变量,通过控制台可以看到这个Vue全局变量

2、必须new一个Vue实例,如果不new的话,是无法直接使用Vue的

第一步:创建一个空对象,作为将要返回的对象。 let vm = {}

第二步:将这个空对象的原型指向构造函数的prototype属性,也就是将对象的__proto__属性指向构造函数的prototype。

【让对象能沿着原型链去使用构造函数中prototype上的方法】 vm.__proto__ = Vue.prototype

第三步:将这个空对象赋值给构造函数内部的this关键字,执行构造函数。【让构造器中设置的属性和方法设置在这个对象上】

Vue.apply(vm, 参数)

第四步:返回这个对象。 return vm

3、Vue的构造方法参数是一个options配置对象,配置对象中有大量Vue预定义的配置,每一个配置项都是key:value结构,一个key:value就是一个Vue的配置项

4、template配置项:value是一个模版字符串,在这里编写符合Vue语法规则的代码(Vue有一套自己规定的语法规则)

写在这里的字符串会被Vue编译器编译,将其转换为浏览器能够识别的HTML代码,template称之为模版

5、Vue实例的$mount方法,这个方法完成挂载工作,将Vue实例挂载到指定位置,也就是将Vue编译后的HTML代码渲染到页面指定的位置,注意:指定位置的元素会被替换

6、‘#app’的语法类似于css中的id选择器语法,表示将Vue实例挂载到id=‘app’的元素位置,也可以用其他选择器,如果匹配到多个位置,Vue只会选择第一个位置进行挂载(从上到下第一个),或者直接用原声js去获取:vm.$mount(document.getElementById("app"));


http://www.ppmy.cn/server/171516.html

相关文章

制氧机分子筛的材质选择与解析‌

制氧机中的分子筛&#xff0c;是一种可以在分子水平上筛选物质的多孔材料。这种材料的主要成分是人工合成的晶体铝硅酸盐&#xff0c;也被称为沸石材料。 二、常用分子筛材质分析 1. 沸石分子筛 沸石分子筛是目前制氧机中最常用的材质之一。它具有以下显著优点&#xff1a; ‌吸…

Dify使用和入门

第一步&#xff1a;了解 Dify 在开始之前&#xff0c;先简单了解一下 Dify 是什么&#xff1a; Dify 是一个开源的 LLM 应用开发平台&#xff0c;专注于帮助开发者快速构建生产级的生成式 AI 应用。它支持知识库集成、RAG&#xff08;检索增强生成&#xff09;技术、复杂工作…

php中使用laravel9项目 使用FFMpeg视频剪辑功能

1&#xff1a;需要现在系统中安装FFMpeg软件 2&#xff1a;在对应laravel项目中 按照扩展 composer require pbmedia/laravel-ffmpeg 2.1 发布配置文件 php artisan vendor:publish --provider"ProtoneMedia\LaravelFFMpeg\Support\ServiceProvider" 这会在 con…

互联网医院实时数据监测智能分析系统设计概述(上)

研究背景 近年来,随着互联网技术的飞速发展,互联网医疗作为一种新兴的医疗模式,正逐渐改变着传统的医疗服务方式。互联网医疗借助互联网、大数据、人工智能等技术手段,实现了医疗服务的线上化、智能化和便捷化,为患者提供了更加高效、优质的医疗服务。 根据中国互联网络信…

安科瑞DJSF1352直流电能表在光伏串组箱的应用:提升光伏发电效率与安全的智能利器-安科瑞 耿笠

随着光伏发电技术的快速发展&#xff0c;光伏电站的规模不断扩大&#xff0c;如何高效、安全地管理光伏发电系统成为行业关注的焦点。在光伏发电系统中&#xff0c;光伏串组箱作为连接光伏组件与逆变器的关键设备&#xff0c;其运行状态直接影响整个系统的发电效率和安全性。而…

Wireshark Lua 插件教程

本⽂主要介绍 Lua 脚本在 Wireshark 中的应⽤, Lua 脚本可以在 Wireshark 中完成如下功能: 从⽹络包中提取数据, 或者统计⼀些数据包(Dumper) 需要解析⼀种 Wireshark 不提供原⽣⽀持的协议(Dissector) ⽰例 协议解析 VREP 协议是 NOGD 框架对于 TRIP 协议的⼀种延伸和扩展…

独立开发者软件出海的法律风险规避指南

海外用户付费意愿高&#xff0c;美元结算等优势&#xff0c;很多公司和独立开发者选择软件出海&#xff0c;那么需要注意哪些问题呢&#xff1f; 1. 了解目标市场的法律法规 不同国家和地区对软件的法律规定各不相同&#xff0c;包括但不限于版权法、数据保护法、消费者保护法…

http 协议和 https 协议的区别是什么?

互联网各领域资料分享专区(不定期更新): Sheet 正文 HTTP(超文本传输协议)和 HTTPS(安全超文本传输协议)的核心区别在于安全性,以下是两者的主要对比: 1. 协议与安全性 HTTP:数据以明文形式传输,易被窃听、篡改或中间人攻击。HTTPS:通过 SSL/TLS 协议对数据进行加密…