当前位置: 首页 > news >正文

Vue程序下载

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"));

相关文章:

  • 大白话TypeScript第七章TypeScript 与不同技术栈的深度融合及拓展应用
  • 【Cadence仿真学习笔记】ADS Dynamic Link报错model is reserved的解决办法
  • vue3在使用ts为模板引用标注类型时,vue3.5+版本有了全新写法
  • conda怎么迁移之前下载的环境包,把python从3.9升级到3.10
  • 非关系型数据库和关系型数据库的区别
  • 2025年度福建省职业院校技能大赛高职组“信息安全管理与评估”赛项规程样题模块二
  • Nginx系列06(Nginx 缓存配置、SSL/TLS 配置)
  • DeepSeek + 自由职业 发现新大陆,从 0 到 1 全流程跑通商业 IP
  • UE5 Slate类的基础创建
  • 【docker】docker swarm lock和unlock的区别,以及旧节点重启的隐患
  • JavaWeb基础专项复习5——请求对象和响应对象request and response
  • 【江科大STM32】TIM输出比较-PWM功能(学习笔记)
  • 小识ThreadLocal 用法
  • 初学STM32之简单认识IO口配置(学习笔记)
  • 车载系统SRAM存储方案
  • RabbitMQ系列(二)基本概念之Publisher
  • 【江科大STM32】TIM输出比较(学习笔记)
  • 使用v-for用户菜单渲染
  • js基础案例
  • 初阶MySQL(两万字全面解析)
  • 无代码开发是什么/济南seo优化外包
  • 湖北网站建设哪里有/互联网线上推广
  • 网页游戏排行榜斗地主/seo外链发布平台
  • 沭阳各乡镇做网站/今天热搜前十名
  • 上海建设工程交易中心网站/百度竞价推广登录
  • 网站魔板大全/百度seo有用吗