首先我们来学习如何下载 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 的配置.
来源: http://www.jianshu.com/p/574021fd7807