我的第一个Vue应用！

开始写这篇文章前，我先碎碎念一下下... 一些碎碎念：现在全栈工程师很难招聘与培养，很多后端开发人员不愿意学前端技术，而且很多前端开发人员怕学后端技术（问过一些前端，他们有些人觉得后端太难了orz）。如果前后端不分离，前端工程师的工作就必须依赖后端工程师，前端工程师变成打杂的（以前没有前端，他们都被称为页面仔），职业生涯前景惨淡啊555。后面前后端分离后，前端和后端工程师独立开发，大大提高开发效率。前后端分离的用人成本远低于全栈工程师用人成本！！！（资本家狂喜hhhh）在前后端分离之后，前端工程师需要将通过api获取的数据呈现到页面上，虽然也可以通过jQuery对页面进行一个个赋值，但是这种效率太低，或者也可以通过在JavaScript中拼接HTML，但是这种方式太难维护HTML代码，也很难阅读。 那么现在我们悄悄的来一张图详细看前后端分离架构原理（具体咋样我就不细说了）： 继续正文—> 因此最好的方式就是使用模板引擎，又因为Vue是真正的响应式的，所以我选择使用Vue作为模版引擎。

1.Vue是什么？

本搬运工搬来的官方定义->Vue的定义：Vue.js是一款渐进式JavaScript框架，Vue的核心库只关心视图层。

2.Vue的特点都有啥呢？

• 响应式的数据绑定

1. 传统js方式：如果操作某个html元素并填充数据，需要使用js代码先获取元素，然后在处理业务逻辑。
2. Vue方式：使用响应式数据绑定的方式操作页面。

• 可组合的视图组件 一个页面映射为组件树，由多个组件组合而成。划分为组件方便维护、重用、测试。
• 虚拟DOM

1. 运行js的速度本身是很快的，但大量的操作DOM就会变得很慢，因为在更新数据后会重新渲染页面，会造成在没有改变数据的地方重新渲染了DOM节点，这样就造成了很大程度上的资源浪费。
2. 虚拟DOM利用在内存中生成与真实DOM相对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时，能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

• 双向数据绑定 vue是一个mvvm框架啊，就是数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化哦。
• 声明式渲染 Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统中

3.快速构建第一个Vue项目

3.1 简单看看HBuilderX是怎么安装部署的

HBuilderX到底是什么？HBuilderX 简称 HX，HBuilder，H 是 HTML 的缩写，Builder 是建设者。是为前端开发者服务的通用 IDE，或者称为编辑器。与 vscode、sublime、webstorm 类似（这些编辑器都是老朋友了哈）。 HBuilderX下载地址（拼命戳这里！！！）

HBuilderX安装包解压之后可直接使用，不需要安装。创建桌面创建快捷键，然后双击ilderX.exe即可启动。

3.2快速创建第一个vue项目

创建->vue项目be like： 打开HBuild X

创建一个普通的vue项目

创建一个名为helloworld的html页面

创建一个helloworld项目（这是一个浪漫的约定） 引入vue依赖 开发版本：没有使用压缩，文件比较大哈，但包含了有帮助的命令行警告（扣666）。 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

生产版本：使用了压缩，文件非常小，提高了网络传输速度。 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

3.2 快速创建第一个vue项目

helloworld核心代码

<div id="app">
	{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	var vue = new Vue({
		//vue应用挂载到一个Dom元素(#app)
		el:"#app",
		//提供数据源
		data:{
			message:"helloworld"
		}
	})
</script>

安装插件 点击【预览】按钮，下载插件【内置浏览器】

运行helloworld，查看页面效果 点击预览按钮，即可显示页面效果。

我悄悄的告诉你们... “每一门编程语言的第一个程序都是输出"Hello World"，这是全世界程序员的一个浪漫的约定"