vue.js学习笔记（一）：第一个vue.js项目

本文链接：https://blog.csdn.net/qq_39500197/article/details/120412476

导入vue.js依赖

使用script标签直接导入

打开vscode，新建一个文件hello.html；
使用script标签导入vue.js依赖。

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
	...
	
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</body>
</html>

使用npm下载依赖导入

首先需要下载并安装node.js，点击这里查看node.js的下载与安装，点这里查看node.js与npm之间的关系；
在任意目录下新建一个文件夹，比如vue-study，在该目录下完成接下来的工作；
使用vscode打开新建的vue-study文件夹；
打开一个终端，并在终端内输入npm init -y，回车运行该命令；

在这里需要说明以下两点：
4.1 npm init命令用来为前端工程创建一个package.json文件，package.json文件包含了工程信息，比如版本号、作者和对该工程的描述等，以及安装的依赖信息，比如下一步要安装的vue.js依赖。
4.2 在控制台输入npm init命令，会要求你输入上述的信息，比如项目的包名、版本号等。加上-y参数，这些工程信息以默认值的方式填写。
继续在终端输入命令npm i vue@2.6.11来安装vue.js依赖，安装完成后多了一个node_modules的文件夹和package-lock.json文件，在package.json中也多了"dependencies"；

在这里需要说明的是：
5.1 npm i <package>命令用来安装一个依赖。如果要指定版本，则需要在<package>后边加上@版本号，比如npm i vue@2.6.11。
5.2 node_modules文件夹存放的是下载下来的依赖。
5.3 package-lock.json用来记录当前工程下安装的依赖具体来源和版本号。
新建src文件夹，然后新建一个index.html，导入vue.js依赖。

第一个vue.js项目

在第一个vue.js项目中，首先我们new了一个Vue实例，即const app=new Vue({..})，其中的el是element的缩写，表示Vue实例挂载的元素节点，在这里挂载的即为<div id="app">...</div>这个元素节点。
data表示的是该Vue实例所拥有的数据，这些数据可以在元素节点内访问到。比如这里使用"Mustache"语法 (双大括号) 来访问data里的msg属性，Mustache标签将会被替代为对应数据对象上msg的值。
注意这里的Mustache绑定是双向的，如果msg的值发生了改变，那么所有使用Mustache标签绑定了msg的地方都会发生更新。即如果此时msg的值变为"Hello World"，那么所有的{{msg}}的值会立即发生更新。