浅谈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' } } } </scrip>
特色
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和小程序中使用
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
相关推荐
-
浅谈VUE uni-app 模板语法
1.v-bind(简写 :) 组件属性中要使用data中定义的数据变量,或组件属性要使用表达式,需用v-bind指定 简写 : 2.v-on(简写@) 监听DOM事件 click.stop 可以阻止事件穿透 3.v-model 数据双向绑定 4.v-if,v-else-if,v-else 条件判断,决定某个内容是否挂载 5.v-show 条件判断,决定某个内容是否显示 6.三元运算符 7.空标签 block 8.v-for:列表渲染 <template> <view v-bind:cla
-
浅谈VUE uni-app 自定义组件
1.父组件向子组件传递数据可以通过 props 2.子组件向父组件传递数据可以通过自定义事件,父组件自定义事件,子组件触发父组件的事件,并传传递数据 3.子组件可以定义插槽slot,让父组件自定义要显示的内容 4.使用easycom规范,可以真接使用组件 page/news/news.vue <template> <view> <veiw>自定义组件使用规范</veiw> <card color="red" @fclick=&quo
-
浅谈VUE uni-app 开发环境
目录 1.通过 HBuilderX 可视化界面 2.通过 vue-cli 命令执行 总结 1.通过 HBuilderX 可视化界面 a. 创建uni-app: b. 运行uni-app; c. 发布uni-app 2.通过 vue-cli 命令执行 a. 安装node.js,下载地址:https://nodejs.org/en/download/ ##检查node.js 版本 node -v v14.18.1 npm -v b. 全局安装 vue-cli npm install -g @vue/
-
浅谈VUE uni-app 基础组件
1 .scroll-view 使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height:使用横向滚动时,需要给添加white-space: nowrap;样式. scroll-y:允许纵向滚动,scroll-x:允许横向滚动 @scroll: 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 数据双向绑定 <template> <view> &
-
浅谈VUE uni-app 常用API
目录 一.路由与页面跳转 二.界面 总结 一.路由与页面跳转 uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面.uni.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面.uni.reLaunch(OBJECT) 关闭所有页面,打开到应用内的某个页面.uni.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面.uni.navigateB
-
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.
-
浅谈Vue入门需掌握的知识
Vue作为一款目前最流行的前端框架之一,是许多前端开发工程师的不二选择.最近我在前端岗位上也运用Vue实现了几款产品,那么今天来分享一下Vue是什么,以及我对Vue的见解. 一.定义 Vue是一套用于构建用户界面的渐进式JavaScript框架 与传统JS和JQuery框架不同,Vue的渐进式框架表示开发者可以由简单组件写起,渐渐搭建出一个复杂的前端平台. 形成Vue渐进式框架的核心概念为:组件化,MVVM,响应式,和生命周期,下面会一个个详细介绍. 二.为什么要用Vue? 1. 组件化 Vue
-
浅谈Vue知识系列-axios
目录 axios基础知识 axios应用场景 axios基础知识 axios是独立于vue的一个项目,基于promise用于浏览器和node.js的http客户端. 在浏览器中可以帮助我们完成ajax请求的发送在node.js中可以向远程接口发送请求 axios应用场景 axios的使用 第一步:创建html文件,在body中引入两个js文件: <script src="vue.min.js"></script> <script src="axi
-
浅谈Vue.js
vue.js的总体评价"简单却不失优雅,小巧而不乏大匠" Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较. Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (
-
浅谈vue 二级路由嵌套和二级路由高亮问题
第一层路由我写在app.vue里面.如图所示: footer.vue: 二级路由是这样: index.js里面的配置: 效果图: 效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮不会去掉,如图所示: 在网上看到别人用exact方法,即在默认的二级路由里面加上exact,如图所示: 补充知识:vue - 子路由-路由嵌套 描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加
-
浅谈vue获得后台数据无法显示到table上面的坑
因为刚学vue然后自己自习了一下axios,然后想写一个简单的查询后台数据 <tr v-for=" user in uList"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.gender}}</td> </td> </tr> 然后先是写了这样一个代码 created: function () { axios.ge
-
浅谈Vue static 静态资源路径 和 style问题
我就废话不多说了,大家还是直接看代码吧~ // Paths assetsRoot: path.resolve(__dirname, '../dist'), // 静态资源输出到二级目录下 assetsSubDirectory: 'static', // 静态资源cdn地址 assetsPublicPath: '/', 引用的时候可直接,不用返回上一级去查找,因为编译输出后的 static 下的资源 跟 html 是在同一个目录 <img class="navbar-brand-logo&q
-
浅谈vue在html中出现{{}}的原因及解决方式
原因: 浏览器渲染机制,解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕. 初始化vue的js写在页面底部,也就是最后才执行js脚本. 所以页面从头到尾开始渲染时,渲染到标签时,由于vue还未初始化,所以就会显示类似这样的代码 <h2>{{courseName}}</h2> 当网速很慢的时候就看得比较清楚,可能会让用户误以为bug之类的,快一点的话就
-
浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat
-
浅谈vue的踩坑路
------>axios模拟get json一直拿不到文件,先把data放到根目录,再去dev-server.js(就是npm执行的那个文件)里面设置静态资源访问路径app.use('/data',express.static('./data')) ... app.use(hotMiddleware) // serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.d
随机推荐
- 解决input对齐问题vertical-alige
- AngularJS中transclude用法详解
- cmd SETLOCAL使用介绍
- iOS开发中使用UIDynamic来捕捉动画组件的重力行为
- 实现div可编辑的常见方法总结
- Android获取联系人姓名和电话代码
- 利用PHP获取网站访客的所在地位置
- python让图片按照exif信息里的创建时间进行排序的方法
- ASP网页模板的应用: 让程序和界面分离,让ASP脚本更清晰,更换界面更容易
- jqurey 学习笔记 传智博客佟老师附详细注释
- jquery mobile界面数据刷新的实现方法
- c#加密类使用方法示例
- JQ实现新浪游戏首页幻灯片
- Nginx配置指令location匹配符优先级和安全问题
- java中"==" 与equals方法的使用
- Smarty模板学习笔记之Smarty简介
- 微信跳一跳php代码实现
- Python OpenCV 直方图的计算与显示的方法示例
- python使用jieba实现中文分词去停用词方法示例
- 使用ECharts实现状态区间图