基于Vue的前后端分离

惠学洁 / @leohxj

主要内容

  • Vue与MVVM模式的介绍
  • Vue在项目中的实践
  • 相关技术点讲解
  • 一些经验与建议

什么是MVVM模式

Model / View / ViewModel

一种软件架构

什么是Vue

数据驱动的组件,为现代化的 Web 界面而生

Vue的特点

  • 数据驱动
  • 上手快,API简单
  • 快速,高性能
  • 组件化
  • 体积小,生态好

举个例子

                        
                            

{{ message }}

                        
                            vm = new Vue({
                              el: '#app',
                              data: {
                                message: 'Hello Vue.js!'
                              }
                            })
                        
                    

其他示例

  • 计算属性
  • Class与Style绑定
  • 条件渲染
  • 列表渲染
  • 方法与事件处理器
  • 表单控件绑定
  • ...

理解原理

把一个普通对象传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。这是 ES5 特性,不能打补丁实现,这便是为什么 Vue.js 不支持 IE8 及更低版本。

Vue在项目中的实践

wap购物车-结算页面

代码结构

cart2-html结构
car2-html-vue结构
cart2-代码组织结构

运行与调试

fiddler工具展示
  • 文件映射
  • 接口模拟
  • 真机调试
  • https与CORS调试

相关技术点讲解

以构建一个单页应用为例

脚手架

  • webpack : 静态资源模块化
  • hot-reload : 不是简单的自动刷新
  • es6/babel : es6语法
  • eslint : 代码静态监测
  • ...
Vue官方提供了一个构建工具:vue-cli

路由与数据请求

  • page/vue-router
  • ajax/vue-resource
  • Underscore
  • 原生方式操作DOM
Zepto-free

组件化

  • 更好的组织页面
  • 组件的定义与使用
  • *.vue
  • 组件间的通信

组件系统

vue组件系统
                            
                                

组件的定义

                            
                            "top-header": {
                                    props: {
                                        "backTo": String,
                                        "title": String,
                                        "backable": {
                                            default: true,
                                            type: Boolean
                                        }
                                    },
                                    methods: {
                                        "back": function() {
                                            ...
                                        }
                                    },
                                    template: [
                                        '
', '
', ' 返回', '
', '
', '
', ' ', '
', '
' ].join("") }
                            
                                window.mainVue = new Vue({
                                    el: "#view",
                                    data: dataModel,
                                    component: window.cart2.components,
                                    ...
                                })
                            
                        

组件的使用

                            
                            
                            
                        
                            
                            
                              
                              
                              

Hello!

.vue文件

组件的数据

  • props
  • 独立作用域
  • 父子组件间的通信
  • Vuex

一些技巧

  • 数据模型的构建,注重可维护性
  • 利用filter
  • 利用简写, v-text, @, :
  • template标签
  • sourceMap
  • Fiddler
  • vue-devtools

一些经验与建议

为什么要前后端分离?

  • 开发方式的改变
  • 提升价值与能力
  • 组建化和工程化

为什么选择Vue?

  • 轻巧, 易上手
  • 引入成本低
  • 社区与文档
  • 多人协作规范化
  • 组件丰富
  • 解放DOM操作

如何学习一个新技术?

  • 关注:前端技术与趋势
  • 学习:主动学习和被动学习
  • 练习:寻找合适的项目
  • 实战:重构和创新

Resources

THE END

谢谢!