建设项目水资源论证网站今日国内最新新闻
Vue是一个基于JavaScript（JS）实现的框架，想要使用它，就得先拿到Vue的js文件
Vue官网
Vue2：Vue.js
Vue3：Vue.js - 渐进式 JavaScript 框架 | Vue.js
下载并安装vue.js
第一步：打开Vue2官网，点击下图所示的“起步”：
第二步：继续点击下图所示的“安装”
第三步：在“安装”页面向下滚动，直到看到下图所示位置：
第四步：点击开发版本，并下载
第五步：安装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"));