用vuejs20开发高交互性web应用.pptx

用vuejs20开发高交互性web应用汇报人简介：***科技领域专家，工程师提纲架构 开发 填坑优化架构难点怎么办架构需求复用性高易于维护 易于变更团队合作前端界现在怎么组件化呢？框架时代框架对我们的开发方式有什么改变？数据绑定new Vue({template: '<input type="number" v-model="num">', data: {num: 0}})结构划分问题复杂的软件必须有清晰合理的架构， 否则无法开发和维护。什么是数据驱动读写分离架构好处提纲架构 ?开发填坑优化组件化带来的新问题通信复用耦合组件通信Vponent('child', { props: ['message'],template: '<span>{{ myMessage }}</span>'})<div><input v-model="parentMsg"><br><child :message="parentMsg"></child></div>能双向传数据吗？<!-- 双向 prop 绑定 --><my-component :prop.sync="someThing"></my-component>props: { callback: {type: Function, default: () => {}}}<my-component :callback="setStyles"></my-component>函数调用var app = new Vue({ el: '#app', template: `<div><child ref="child"></child><button v-on:click="reverse"> Reverse Message</button></div>`, methods: {reverse () { this.$refs.child.reverseMessage()}}})组件树的问题this.$parent.$parent.open()利用共享// plugin<span>{{num}}</span>// plus this.num++//minus this.num--用了共享后我改的，不好意思你加个锁吧这个功能是异步的当数据位被多方操作var bus = new Vue()// in component A's method bus.$emit('plus', 1)bus.$emit('minus', 1)// in component bus.$on('plus', this.total +=})B's created hook function (n) {nbus.$on('minus', function (n) { this.total -= n})解决异步问题利用// 组件内部bus.$on('open-resource-shape', callback => { this.choose().then(callback)})// 使用者bus.$emit('open-resource-shape', shape => { this.addShape(shape)})// 当然也可以promise啦getShape () {return new Promise((resolve, reject => { bus.$emit('open-resource-shape', resolve)}))}this.getShape().then(this.addShape)// 自然也可以async/awaitlet shape = await this.getShape() this.addShape(shape)通信方法选择提纲??组件复用冗余if(this.type === 'editing') {// some editing code} else if(this.type === 'preview') {// some preview code} else if(this.type === 'present') {// some present code} else {// some base code}包装// plugin.vue<div><slot name="page"> i am a page</slot></div>// present-plugin.vue<div class="PresetPluginPage"><pluginref="page"><h1 slot="page">i am a present page</h1></plugin></div>//output<div class="PresetPluginPage"><div><h1>i am a prese