2019-03-06

1 Vue.js是什么：
简单小巧的渐进式技术栈，可以一步一步、有阶段性地来使用Vue.js，不必一开始就使用所有的东西。使用Vue.js使得Web开发变得简单，同时也颠覆了传统的前端开发模式。
Vue.js官网
Vue.js菜鸟教程

image.png

它提供了现代Web开发中常见的高级功能，如：

解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM
2 MVVM模式

6205329.png

3 现代的前端开发模式
前端开发绝不是写几个HTML和CSS那么简单的事！
新的概念层出不穷：ES6、Node.js、npm、前端工程化、SPA、组件化开发等，新的东西在不断优化我们的开发模式，改变我们的编程思想。
前端三驾马车：Angular、React、Vue
4 Vue.js起步
在官网中介绍到，使用 Vue.js有两种方式：一种是通过引入CDN后直接使用或者下载后使用，另一种就是使用命令行工具CLI搭建脚手架去编写对应的内容。目前我们是最基础的教程，所以先介绍最简单的方法——引入CDN方式，后期我们再具体介绍脚手架方式。
引入CDN，只需要在创建的html文件中引入下图中的script代码，这样就成功地将Vue.js引入到我们的项目中并可以使用了。

06205446.png

3 现代的前端开发模式
前端开发绝不是写几个HTML和CSS那么简单的事！
新的概念层出不穷：ES6、Node.js、npm、前端工程化、SPA、组件化开发等，新的东西在不断优化我们的开发模式，改变我们的编程思想。
前端三驾马车：Angular、React、Vue
4 Vue.js起步
在官网中介绍到，使用 Vue.js有两种方式：一种是通过引入CDN后直接使用或者下载后使用，另一种就是使用命令行工具CLI搭建脚手架去编写对应的内容。目前我们是最基础的教程，所以先介绍最简单的方法——引入CDN方式，后期我们再具体介绍脚手架方式。
引入CDN，只需要在创建的html文件中引入下图中的script代码，这样就成功地将Vue.js引入到我们的项目中并可以使用了。

5555.png

1.el代表element，指需要获取的元素，一定是html中的根容器元素。
2.data用于数据的存储，可以设置对应的数据，data的值也是一个对象，类型可以是字符串、number、对象、数组。
3.花括号在这里是模板语法。如果data类型是字符串，花括号可以直接获取到相关数据的值，而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中，通过DOM操作再把需要的值插入到真实DOM中。