- 阅读 196
- 下载 28
- 格式 pptx
- 大小 227.04 KB
- 约34页
- 2024-10-24 发布于江苏
- 收藏
- 点赞(0)
- 海报
- 举报
前后端分离技术探究刘明科技发展部2018.4.26.前后端分离技术探究•Web技术演进•什么是前后端分离•为什么要做前后端分离•怎样做前后端分离•Vue.js•vue-router•诺博前端开发框架•答疑Web技术演进•早期阶段Web技术演进•后端为主的MVC阶段Web技术演进•SPA阶段Web技术演进•MVVM阶段Web技术演进•全栈阶段什么是前后端分离•前端：负责展现•后端：负责数据为什么要做前后端分离•现有模式不满足需求•明确前后端职责•提高开发效率•加速前端发展怎样做前后端分离•前端：负责View和Controller层•后端：负责Model层Vue.js•调试工具VueDevtools•全局安装
Vue.js•声明式渲染HTML{{message}}JSvarapp=newVue({el:‘#app’,data:{message:‘Helloworld!’}});Vue.js•条件渲染HTML
现在你看到我了JSvarapp=newVue({el:‘#app’,data:{seen:true}});Vue.js•列表渲染HTML
{{item.text}}
Vue.js•列表渲染JSvarapp=newVue({el:‘#app’,data:{items:[{text:‘’诺博教育},{text:‘’海马幼评}]}});Vue.js•列表渲染输出结果1.诺博教育2.海马幼评Vue.js•事件处理HTML
{{message}}
逆转消息Vue.js•事件处理JSvarapp=newVue({el:‘#app’,data:{message:‘Helloworld!’},methods:{reverseMessage:function(){this.message=this.message.split(‘’).reverse().join(‘’);}}});Vue.js•双向绑定HTML
{{message}}
JSvarapp=newVue({el:‘#app’,data:{message:‘Helloworld!’}});Vue.js•Vue实例varvm=newVue({//传入一个选项对象options});实例属性$data$el实例方法$watchVue.js•全局APIVue.extend(options)使用基础Vue“”构造器，创建一个子类。参数是一个包含组件选项的对象。data选项必须是函数。Vue.component(id,[definition])注册或获取全局组件。注册还会自动使用给定的id设置组件的名称。Vue.js•组件组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。所有的Vue组件同时也都是Vue的实例，所以可接受相同的选项对象(除了一些根级特有的选项)并提供相同的生命周期钩子。Vue.js•使用组件
Vue.js•使用组件全局注册1.注册Vue.component(‘my-component’,{template:‘
Helloworld!
’});2.创建根实例newVue({el:‘#app’});Vue.js•使用组件全局注册渲染结果
Helloworld!
Vue.js•使用组件局部注册newVue({el:‘#app’,components:{‘my-component’:{template:‘
Helloworld!
’}}});vue-router•Vue.js的官方路由插件•全局安装
vue-router•核心思路将组件(components)映射到路由(routes)，然后告诉vue-router在哪里渲染它们。vue-router•组件映射到路由创建router实例varrouter=newVueRouter({routes:[{path:‘/helloworld’,component:{template:‘Helloworld
’}}]});vue-router•组件映射到路由注入路由newVue({router}).$mount(‘#app’);vue-router•组件渲染前后端分离技术探究刘明科技发展部2018
前后端分离技术探究•Web技术演进•什么是前后端分离•为什么要做前后端分离•怎样做前后端分离•Vue
js•vue-router•诺博前端开发框架•答疑Web技术演进•早期阶段Web技术演进•后端为主的MVC阶段Web技术演进•SPA阶段Web技术演进•MVVM阶段Web技术演进•全栈阶段什么是前后端分离•前端：负责展现•后端：负责数据为什么要做前后端分离•现有模式不满足需求•明确前后端职责•提高开发效率•加速前端发展怎样做前后端分离•前端：负责View和Controller层•后端：负责Model层Vue
js•调试工具VueDevtools•全局安装Vue
js•声明式渲染HTML{{message}}JSvarapp=newVue({el:‘#app’,data:{message:‘Helloworld
’}});Vue
js•条件渲染HTML现在你看到我了JSvarapp=newVue({el:‘#app’,data:{seen:true}});Vue
js•列表渲染HTML{{item
text}}Vue
js•列表渲染JSvarapp=newVue({el:‘#app’,data:{items:[{text:‘’诺博教育},{text:‘’海马幼评}]}});Vue
js•列表渲染输出结果1
海马幼评Vue
js•事件处理HTML{{message}}逆转消息Vue
js•事件处理JSvarapp=newVue({el:‘#app’,data:{message:‘Helloworld
’},methods:{reverseMessage:function(){this
message=this
message
split(‘’)
reverse()
join(‘’);}}});Vu
