第一个 Vue 程序

我将从vue官网下载的开发和生产版本都放到了【js】目录

vue的安装如下：

在头部标签里面通过 script 的 src 导入你从官网下载的 vue.js 文件

【vue都是通过js实现的，所以基本都放在 script 标签里面】

导入之后 代表你的文件拥有了 vue 的全局变量

接着在 vscode 里面右键，选择【Open with Live Sercer】进入浏览器里面打开

进去之后是空白的页面，然后我们点击【F12】 进入开发者模式，进入控制台（console），在下面输入【Vue】，如果有如下显示则代表安装成功

在这个时候可能会有一个疑问：如果输入的不是【Vue】呢？如果是【vue】会怎么样？

答案在下图：

在图里面能清晰的看到，如果输入的不是【Vue】会报错，说找不到输入的东西，那么我们看向下面的输入【Vue】之后的返回结果，注意看 if 语句

【

Vue 是一个构造者（构造函数）并且需要 ‘new’来新建

】

我英语不好但大概也能看出是这个意思

所以我们在使用的时候应该要先新建一个 Vue 的对象（实例）

先编写一个 div（名为app），然后新建一个名为 myVue 的 Vue 对象，通过 template 实现输出【hello vue】的功能

效果如下图所示：

那么这几行语句到底实现了什么效果呢？

关于Vue构造函数的参数:options
option翻译为选项
options翻译为多个选项
Vue框架要求：options参数必须是一个纯粹的JS对象：在{}对象中可以编写大量的key : value键值对
一个key :value对就是一个配置项。
主要是通过options这个参数来给Vue实例指定多个配置项。

关于template配置项：
template翻译为:模板。
template配置项用来指定模板语句，模板语句是一个字符串形式的
模板语句是Vue框架自己制定了一些具有特殊含义的特殊符号（Vue框架自己搞的一套语法规则）

模板语句可以是一个纯粹的html代码，也可以是vue中的特殊规则。也可以是html代码+vue的特殊规则。
我们写Vue模板语句的时候要遵守 Vue 框架的模板语法规则。
template后面的模板语句会被 Vue 框架的编译器进行编译，转换成浏览器能够识别的 html 代码。

这个 id 为 app 的 div 语句是指定 Vue 实例的挂载位置

将vue实例挂载到 id = 'app' 的元素位置。

vue实例都有一个$mount()方法，这个方法的作用是将 Vue 实例挂载到指定位置。

说白了就是将那些语句的效果放到指定的地方

PS：#app 是css语法中的id选择器。

该文章为笔记，教程为动力节点的老杜Vue视频教程，Vue2 Vue3实战精讲
视频链接：https://www.bilibili.com/video/BV17h41137i4?p=1&vd_source=2136c732ce8d5a3f412e2f7064285cb7