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

Vue程序下载

news 2025/9/10 22:02:18

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

Vue官网

Vue2：Vue.js

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

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

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

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

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

1 、第一个Vue程序

1.1、先创建Vue第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue程序</title>

<script src="../js/vue.js"></script>
</head>
<body>

<div id="app"></div>

<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.lryc.cn/news/545096.html