《前后端分离技术探究》由会员分享，可在线阅读，更多相关《前后端分离技术探究（34页珍藏版）》请在金锄头文库上搜索。
1、前后端分离技术探究,刘明 科技发展部 2018.4.26.,前后端分离技术探究,Web技术演进 什么是前后端分离 为什么要做前后端分离 怎样做前后端分离 Vue.js vue-router 诺博前端开发框架 答疑,Web技术演进,早期阶段,Web技术演进,后端为主的MVC阶段,Web技术演进,SPA阶段,Web技术演进,MVVM阶段,Web技术演进,全栈阶段,什么是前后端分离,前端：负责展现 后端：负责数据,为什么要做前后端分离,现有模式不满足需求 明确前后端职责 提高开发效率 加速前端发展,怎样做前后端分离,前端：负责View和Controller层 后端：负责Model层,Vue.js,调
2、试工具 Vue Devtools 全局安装 ,Vue.js,声明式渲染 HTML message JS var app = new Vue( el: #app, data: message: Hello world! );,Vue.js,条件渲染 HTML 现在你看到我了 JS var app = new Vue( el: #app, data: seen: true );,Vue.js,列表渲染 HTML item.text ,Vue.js,列表渲染 JS var app = new Vue( el: #app, data: items: text: 诺博教育 , text: 海马幼评 );
3、,Vue.js,列表渲染 输出结果 1. 诺博教育 2. 海马幼评,Vue.js,事件处理 HTML message 逆转消息 ,Vue.js,事件处理 JS var app = new Vue( el: #app, data: message: Hello world! , methods: reverseMessage: function () this.message = this.message.split().reverse().join(); );,Vue.js,双向绑定 HTML message JS var app = new Vue( el: #app, data: mess
4、age: Hello world! );,Vue.js,Vue实例 var vm = new Vue(/传入一个选项对象 options ); 实例属性 $data $el 实例方法 $watch,Vue.js,全局API Vue.extend(options) 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data选项必须是函数。 Vponent(id, definition) 注册或获取全局组件。注册还会自动使用给定的id设置组件的名称。,Vue.js,组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重
5、用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。 所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。,Vue.js,使用组件 ,Vue.js,使用组件 全局注册 1. 注册 Vponent(my-component, template: Hello world! ); 2. 创建根实例 new Vue( el: #app );,Vue.js,使用组件 全局注册 渲染结果 Hello world! ,Vue.js,使用组件 局部注册 new Vue( el: #app, compone
6、nts: my-component: template: Hello world! );,vue-router,Vue.js的官方路由插件 全局安装 ,vue-router,核心思路 将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。,vue-router,组件映射到路由 创建router实例 var router = new VueRouter( routes: path: /helloworld, component: template: Hello world );,vue-router,组件映射到路由 注入路由 new Vue(router).$mount(#app);,vue-router,组件渲染 ,诺博前端开发框架,代码讲解,答疑,问题清单,谢谢,
