Vue基础介绍

1. Vue介绍

1.1 Vue是什么

Vue.JS是优秀的前端 JavaScript 框架

react/angular/vue

库和框架的区别:

• 库(如jQuery)

  库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API

• 框架

  框架提供了一套完整解决方案,

  使用者要按照框架所规定的某种规范进行开发

1.2 为什么要学习 Vue

传统开发模式: JQuery+RequireJS/SeaJS+artTemplate+Gulp/Grunt

随着项目业务场景的复杂,传统模式已无法满足需求，就出现了Angular/React/Vue等框架

• 企业需求
• 主流框架之一(React Angular Vue)
• 易用、灵活、高效

1.3 Vue 能做什么

• 最大程度上解放了 DOM 操作
• 单页web项目(SinglePageApplication项目,例如Worktile官网)开发
• 传统网站开发

1.4 核心特性

• 双向数据绑定
  • vue(借鉴了react的虚拟DOM,借鉴了angular双向数据绑定)
• 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML
• 解耦视图与数据
• 可复用组件
• 虚拟DOM
• M-V-VM
• 数据驱动视图

1.5 一些链接

Vue官方文档

Vue开源项目汇总

Vue.js中文社区

2. Vue起步

2.1 安装Vue

1. 直接下载源码然后通过路径引入

   • 开发版本：https://vuejs.org/js/vue.js
   • 生产版本：https://vuejs.org/js/vue.min.js

2. CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

3. 使用 npm 下载（默认安装最新稳定版) 然后通过路径引入

npm init -y
npm i vue

Vue.js 不支持 IE8 及其以下版本

2.2 HelloWorld

作用:将数据应用在html页面中

1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象 new Vue();
4. 设置Vue实例的选项:如el、data...     
	new Vue({选项:值});
5. 在<