vue.js介绍 (MVVM、核心思想)
vue.js 是一套轻量级的 MVVM 的渐进式框架。Vue 的核心库只关注视图层。
vue.js 的官方网址是:点我,我是网址
MVVM 介绍
MVVM 全称是 Model - ViewModel - View 的简称。
![](http://upload-images.jianshu.io/upload_images/4369903-98c94856a6630153.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Model 对应的是数据,JavaScript 对象。
View 对应的是视图,也就是 DOM。
ViewModel 是连接 View 和 Model 的中间件,在 MVVM 下,View 和 Model 是不能直接通讯的,当数据变化(用户操作视图),ViewModel 都能监听到变化,实现了双向绑定。
热门的 MVVM 框架有:vue.js react.js angular.js
MVVM 应用场景
1、针对具有复杂交互逻辑的前端应用。
2、提供基础的架构抽象。
3、通过 Ajax 数据持久化,不需要重新刷新页面,重新解析 DOM,保持前端的用户体验。
vue.js 核心思想
1、数据驱动。
DOM 是数据的一种自然映射。
![](http://upload-images.jianshu.io/upload_images/4369903-9b1486796f680920.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
数据响应原理( TODO )
2、组件化思想。(扩展 HTML 元素,封装可重用的代码)
组件设计原则
1、页面上每个独立的可视/可交互区域视为一个组件。
2、每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护。
3、页面不过是组件的容器,组件可以嵌套自由组合成完整的页面。
vue-cli 脚手架工具
vue-cli 介绍
工地上,脚手架是帮助工人作业搭建的架子。 vue-cli 可以帮助我们写好 vuejs 代码的工具,vue-cli 可以做什么:
1、目录结构
2、本地调试
3、代码部署
4、热更新
5、单元测试 (ESlint)
安装指令
npm 下载地址:点我,我是地址
安装vue-cli:npm install -g vue-cli
初始化项目:vue init webpack 项目名
安装依赖:npm install
(npm 版本需要注意:npm: 2.14.20 should be >= 3.0.0,可以事先升级 node 为最新版本,直接下载 dmg 进行安装替换即可)
运行:npm run dev
运行项目
默认情况下,浏览器打开 http://localhost:8080,就可以看到脚手架项目初始化的效果了。
![](http://upload-images.jianshu.io/upload_images/4369903-afac12e3a079effd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
项目文件介绍
webPack 打包
1、webPack 是什么?
webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
![](http://upload-images.jianshu.io/upload_images/4369903-a0f38e9bffedcf51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
webpack的配置及其项目路径介绍(#TODO)
开发工具
本次项目使用的开发工具是: webStorm , 具体配置方法可以参考:
1、添加 vue.js for webStorm 插件。
webStorm --> Preferences -->plugins-->Browse repositories, 搜索vue.js,点击 install 即可。
2、添加 html 模版支持,让 webStorm 识别 vue 后缀的文件。
找到这个地方,找到上面的html类型,将*.vue添加进其中。确定的时候会提示被占用了,要把那个清除掉,继续就OK了。
这样系统会把.vue文件看成html,也就能正确识别里面的<script>标签了。
3、若是旧版本的 webStrom ,则修改 ES6 的语法支持。这里默认是ES5.1,把它改成ES6。 (2016.3版则默认是 ES6)
参考资料
vue.js 官方网站
慕课网 - vue.js 实战
(转载:简书 李世铿 Vue.js 介绍及其脚手架工具搭建)