浅谈VUE uni-app 核心知识
目录
- 规范
- a. 页面文件遵循vue单文件组件规范
- b. 组件标签靠近小程序规范
- c. 接口能力(JS API)靠近微信小程序规范
- e. 数据绑定及事件处理使用Vue.js 规范
- 特色
- a. 条件编译
- b. App端的Nvue开发
- c. HTML5+
- 总结
规范
a. 页面文件遵循vue单文件组件规范
<!-- 模板块 --> <template> <view class="main"> {{msg}} </view> </template> <!-- 脚本块 --> <script> export default { data(){ return { msg:'Hello' } } } </script> <!-- 样式块 --> <style> .main{ background-color:#ccc; } </style>
b. 组件标签靠近小程序规范
<template> <view>hello</view> <text> wang </view> </template>
c. 接口能力(JS API)靠近微信小程序规范
//获取位置信息 uni.getLocation({ type:'wgs84', success:function(res){ console.log('当前位置的经度:'+res.longitude); console.log('当前位置的纬度:'+res.latitude); } });
e. 数据绑定及事件处理使用Vue.js 规范
<template> <view @click="changeMsg"> {{msg}} </veiw> </template> <script> export defalut{ data(){ return { msg:'hello' } }, methods:{ changeMsg(){ this.msg:'world' } } } </scri海外服务器https://www.68idc.cnp>
特色
a. 条件编译
#ifdef APP-PLUS 仅出现在APP平台下的代码 #endif #ifndef H5 除了H5平台,其它平台均存在的代码 #endif #ifdef H5 || MP-WEIXION 在H5平台或微信信小程序平台存在的代码 #endif
b. App端的Nvue开发
uni-app App端内置了一个基于 weex 改进的原生渲染引擎,提供了原生渲染能力。
在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面,则使用原生渲染。
c. HTML5+
uni-app App端内置HTML5+ 引擎;让 js 可以直接调用丰富的原生能力。一些比较复杂的功能,可以直接调用App原生插件来实现。只能在App端使用,无法在H5和小程序中使用
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注hwidc的更多内容!