一、简介

1.1、Vue简介

Vue是渐进式 JavaScript 框架，啥叫渐进式？渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex+axios，也可以满足你各种各样的需求。

Vue的特点和Web开发中常见的高级功能：

1、解耦视图和数据

2、双向数据绑定

3、可复用的组件

4、前端路由技术

5、状态管理

6、虚拟DOM

Vue对于后端人员来说，Vue就是Js框架，让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定，即双向绑定（MVVM）。正是因为有MVVM架构的基础，才有了前后端分离的基础。

1.2、语法对比

如果我们想要获取dom的内容。

1.2.1、原生JavaScript

document.getElomentById("username").value //获取值
document.getElomentById("username").value = "XiaoLin" //设置值

1.2.2、JQuery

$("#username").val(); //获取值
$("#username").val("XiaoLin") //设置值

1.3、MVVM

1568691099973

MVVM指的是前端中的三层：View层、Model层、ViewModel层。

视图层，在前端里就是我们常说的DOM层，主要作用是给用户展示各种信息。
数据层，数据可能是我们自定定义的数据，或者是从网络请求下来的数据。
视图模型层，是View层和Model层沟通的桥梁；一方面它实现了数据绑定（Data Binding），将Model的改变实时反应到View中；另一方面它实现了DOM监听，当DOM发生改变可以对应改变数据（Data）。

二、快速入门

2.1、Vue的安装和使用

我们首先压迫引入Vue的文件，可以把他下载到本地引用使用在线引入。

2.1.1、安装

2.1.1.1、CDN在线引用

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js></script>

2.1.1.2、本地下载

去官网下载，他有两个环境：

开发环境：https://vuejs.org/js/vue.js
生产环境： https://vuejs.org/js/vue.min.js

2.1.2、Vscode集成Vue

一般前端开发都是使用Vscdoe居多，当然使用WebStorm也可以，接下来介绍一下添加Vscode模板，让开发Vue更简单。

文件 -> 首选项 -> 用户代码片段，在输入框内输入html.json，用下面的代码覆盖掉原来的即可，下次新建html文件直接输入vue，然后按下回车即可。

{
	"html:5": {
		"prefix": "vue", //这里定义你的快捷键的名字
		"body": [
			"<!DOCTYPE html>",
			"<html>",
			"<head>",
				"\t<meta charset=\"UTF-8\">",
				"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
				"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
				"\t<title></title>",
				"\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
			"</head>",
			"<body>",
				
			"</body>",
			"</html>",
		],
		"description": "HTML5"
	}
}

2.1.3、初体验

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
        new Vue({ //这个Vue对象用来控制某一个标签里面的数据
            el:"#app", //el表示emelemt元素，表示Vue实例的作用范围
            data:{
                username:"XiaoLin" //data数据，可以自定义各种数据
            }
        }); //创建一个Vue实例
    </script>
</head>
<body id="app">
    <h1>{{username}}</h1>
</body>
</html>

结果出错了，原因何在？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9pFWEtIp-1672800417343)(null)]

因为Js的加载从上往下加载的，所以我们应该把Vue代码放到元素下面，这样才可以确保在加载的时候先加载到元素在读取Vue代码。一般放到最末尾。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    
</head>
<body id="app">
    <h1>{{username}}</h1>
</body>
<script>
    new Vue({ //这个Vue对象用来控制某一个标签里面的数据
        el:"#app", //el表示emelemt元素，表示Vue实例的作用范围
        data:{
            username:"XiaoLin" //data数据，可以自定义各种数据
        }
    }); //创建一个Vue实例
</script>
</html>