扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下apicloud中可以使用vue吗,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
梁溪ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!
apicloud可以用vue,其使用方法:首先在apicloud页面中引入vue.min.js;然后在需要使用vue.js进行模板渲染的地方标记id;最后在apiready方法中根据标记了id的元素初始化vue实例即可。
apicloud中可以用vue。
如何在 APICloud 中使用 Vue.js 进行高效开发?
APICloud官方推荐使用原生JS进行开发,但在复杂业务逻辑下,原生JS的开发效率往往不如MVVM框架高,所以使用Vue.js能够有效提高开发效率。
在尽量不影响应用性能和Hybrid中原生API的用户体验的前提下,并不推荐使用Vue.js的SPA开发模式,即不推荐使用vue-cli编译出使用vue-router、vuex、axois等模块的单页面应用。
直接用 script 引入vue.js的方式能最大限度的减少vue与apicloud项目的耦合度,不会与现有原生api和原生模块产生冲突。
一、基本使用
首先在apicloud页面中引入vue.min.js(本文引用时间2019年10月12日最新版为v2.6.10)。
然后在需要使用vue.js进行模板渲染的地方标记id,为了方便,通常在body下的最外层元素上标记。当然也可以在局部元素上进行vue渲染,与原生方法并不冲突。
最后在apicloud的初始化完成后,即apiready方法中根据标记了id的元素初始化vue实例。
示例代码:
{{ message }}
二、页面闪烁的处理
一般情况下,打开一个需要vue进行渲染的新页面,在其渲染过程中,会出现模板与模板渲染结果切换代码闪烁的效果,这是因为打开新页面apiready之后vue才开始渲染,渲染前默认显示的是渲染模板内容,渲染成功后显示结果。
这里可以在vue模板元素上标记v-cloak进行处理。
注意:这里需要在style中声明v-cloak的样式为隐藏,这样在渲染完成之前,标记了v-cloak的元素都不会显示出来。
{{ message }}
三、非vue渲染元素使用vue实例内容
使用vue进行模板渲染会有一个渲染时间,在某些对渲染性能和显示效果要求比较严格的页面下,主要内容区域由原生html实现,复杂逻辑运算用vue进行渲染。在vue渲染区域之外可能会需要用到vue实例中的某些属性或方法,这时可以在vue初始化时,将vue实例赋值给当前页面的全局变量。
本文使用vm作为vue实例名称,当然也可以改为其它的。将vm放在apiready之外,可以保证在没有初始化完成时直接调用相关方法不会报错。全局使用vm作为vue实例也可以避免在vue内部的一些回调方法需要var that = this;这样重新制定上下文。
以下几种情形可以使用vue全局实例vm:
vue渲染区之外需要调用vue实例内容时
使用原生方法时,如onclick
在回调方法中需要调用vue实例内容时
示例:
{{ message }}
四、模块的引用
apicloud中的模块不建议放在vue实例中,而应当放在apiready之内,vue实例之外
示例:
{{ message }}Button TwoButton Three
五、代码风格
当前手机的厂商众多,厂家版本定制碎片化严重,不同厂家对ECMA Script6语法的支持程度不一样,因此使用原生JavaScript的写法能够保证在任何一个安卓版本较低的手机上都能够正常运行。在某些设备中,也出现过安卓版本较低无法正常解析es6的问题。API Cloud官方没有推荐使用polyfill,所以尽量不要使用polyfill等工具,而是选择官方推荐的原生js写法,这样能够保证应用性能,同时也能确保当API Cloud框架后续有升级时,本地代码逻辑不至于有太大的改动。
函数的写法
编写函数时,注意不要使用es6的写法和出现箭头函数
ES6的写法(×):
foo(value) { console.log(value); } const fun = (value) => { alert(value); }
原生JavaScript写法(√):
function foo(value) { console.log(value); } var fun = function(value) { alert(value); }
变量和字符串
使用原生Java Script的关键字,注意不要出现es6的关键字。字符串拼接时也要使用原生JavaScript的加号连接。
ES6的写法(×):
let a; const b = 'BAR'; if (xxx) { a = 1; } else { a = 2; } console.log(`${b} ${a}`);
原生JavaScript写法(√):
var a = undefined; var b = 'BAR'; if (xxx) { a = 1; } else { a = 2; } console.log(a + b);
六、组件化应用
大多数使用vue.js的apicloud开发者往往忽略了在不使用vue-cli编译的情况下,同样能够进行组件化开发,以达到业务逻辑组件化、代码复用提高生产效率的目的。
注意:在apicloud中使用原生js开发vue组件时,避免使用v-model双向绑定组件的值。同样的,在其它数据量较大的展示型列表中也避免出现v-model双向绑定,否则会影响vue渲染效率导致App很卡。
实例:
{{ message }}
通过js文件将组件内容从html页面中分离,达到复用的效果。使用时,相当于给已有的Vue加上了一个全局组件。
由于原生js的字符串拼接较为麻烦,是否这样用取决于使用者自身。
本示例中使用到的css样式来自tailwindcss
searchBar.js: /** * searchBar.js * @overview 搜索框组件 */ if (Vue) { Vue.component('search-bar', { props: { value: String, placeholder: { type: String, default: '搜索' } }, data: function() { return { model: undefined, disabled: false, }; }, mounted: function() { this.model = this.value; }, methods: { handleInput: function(e) { this.model = e.target.value; this.$emit('change', this.model); }, handleClear: function() { this.model = undefined; this.$emit('change', this.model); this.$emit('search', this.model); }, handleSearch: function() { this.$emit('search', this.model); } }, template: '' + '' }) }' + '' + '' + '' + '查询' + '
以上是“apicloud中可以使用vue吗”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流