vue.js
技术栈、当前最火的MVVM框架
数据驱动、组件化
轻量、简洁欸、高效
需求分析
脚手架工具
数据mock
架构设计
代码编写
自测
编译打包
UI标注
真实数据演示
架构设计
组件抽象
模块拆分
代码风格统一
JS变量命名规范
CSS代码规范
tudomvc
vue-cli脚手架搭建基本代码框架
vue-router官方插件管理路由
vue-resourceajax通信
Webpack构架工具
es6 + eslinteslint:es6代码风格检查工具
js库better-scroll
工程化、组件化、模块化的开发方式
flex弹性布局
cssstickyfooter
酷炫的交互设计
vue.js
就浏览器组件淘汰,移动端需求增加
前端交互越来越多,功能越来越复杂
后台mvc 向rest api + 前端 mv*迁移
MVVM框架
针对具有复制交互逻辑的前端应用
提供基础的架构抽象
通过ajax数据持久化,保证前端用户体验
view==视图==DOM----- viewmodel==通讯==观察者-------- model==数据==javascript对象
什么是vue.js
2014开源
他是一个轻量级mvvm框架
数据驱动+组件化的前端开发
Github超过25k+的str数,社区完善、issue、论坛
mvvvmangular.jsreact.jsvue.js
更易上手,学习曲线平稳
更轻量,gzip后大小只有20K+
吸取俩家之长,借鉴了angular的指令和react的组建化
数据驱动
DOM是数据的一种自然映射
DOM Listeners
directives
对数据双向绑定
Watcher指令
组件化
页面上每个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护
页面不过是组件容器,组件可以嵌套自由组合形成完整的页面
Vue-cli Vue的脚手架工具
安装
【vue项目实战】node -v(v4.4.5)
npm install -g vue-cli
查看
vue list
创建一个项目
vue init webpack sell
name、description、y、Standard、n、n
ls
cd project-name
npm install
npm run dev
node_modules
{{msg}}
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习
- vue|Vue面试常用详细总结
- vue|电商后台管理系统(vue+python|node.js)
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- Vue|vue-router 详解
- vue|vue3替代vuex的框架piniajs实例教程
- Vue|Vue3.0的插槽是如何实现的()
- 前端|面试官(谈谈Vue和React的区别())