首先我们来学习如何下载vue-cli:
# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 安装依赖，走你
cd my-project
npm install
npm run dev
这是官网的基本安装流程，走完这些流程，一个完整的vue项目架构就基本搭建起来了，初学者默认的配置基本个够用，有时会根据项目需求配置些less,sass,等预处理loader,热更新，图片处理等等，以后我们会单独拿出一章来讲这个事情。安装完成了，我们来了解下它的项目结构
3732356-e3f836c9f1cf8861.png
大家看到的这张图就是它每个目录的具体结构和作用。config,里的配置我们在讲webpack的时候再具体分析。
接下来我们来讲它的核心优势。
组件化，集成化：将html,css,js放到一起，方便编程
轻量级的框架(压缩后大小仅有17KB)
指令（v-html,v-show,v-for...）
插件化（生态系统丰富多彩，渐进式框架。）
小胡子语法 ： 取值、赋值、三元
虚拟DOM(Virtual DOM)（上章已经解释过了，不在重复）
数据绑定 (MVVM模式):MVVM模式是由经典软件架构MVC衍生来的。 MVVM框架主要包含3个部分:Model、View和
Viewmodel。
Model:指的是数据部分，对应到前端相当于javascript对象
View:指的是视图部分，对应前端相当于dom
Viewmodel:就是连接视图与数据的中间件通讯 数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据变化的时候，viewModel能够监听到这种变化，并及时的通知view做出修改。同样的，当页面有事件触发时，viewMOdel也能够监听到事件，并通知model进行响应。Viewmodel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。
双向数据绑定的原理解析：
它的基本原理是利用Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
语法：Object.defineProperty(obj, prop, descriptor)
参数说明： obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性
返回值： 传入函数的对象。即第一个参数obj
细节请访问：https://www.jianshu.com/p/5b879395e70b
下一章我们讲学习webpack的配置。
网友评论