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