浅谈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> &

目录 一.应用的生命周期 二.页面生命周期 三.组件生命周期 总结 一.应用的生命周期 onLaunch 当uni-app 初始化完成时触发(全局只触发一次)onShow 当 uni-app 启动,或从后台进入前台显示onHide 当 uni-app 从前台进入后台 二.页面生命周期 onLoad 监听页面加载onReady 监听页面初次渲染完成.注意如果渲染速度快,会在页面进入动画完成前触发onShow 监听页面显示.页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面onHide 监

目录 规范 a. 页面文件遵循vue单文件组件规范 b. 组件标签靠近小程序规范 c. 接口能力(JS API)靠近微信小程序规范 e. 数据绑定及事件处理使用Vue.js 规范 特色 a. 条件编译 b. App端的Nvue开发 c. HTML5+ 总结 规范 a. 页面文件遵循vue单文件组件规范 <!-- 模板块 --> <template> <view class="main"> {{msg}} </view> </temp

目录 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/

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

目录 一.路由与页面跳转 二.界面 总结 一.路由与页面跳转 uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面.uni.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面.uni.reLaunch(OBJECT) 关闭所有页面,打开到应用内的某个页面.uni.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面.uni.navigateB

1.父组件向子组件传递数据可以通过 props 2.子组件向父组件传递数据可以通过自定义事件,父组件自定义事件,子组件触发父组件的事件,并传传递数据 3.子组件可以定义插槽slot,让父组件自定义要显示的内容 4.使用easycom规范,可以真接使用组件 page/news/news.vue <template> <view> <veiw>自定义组件使用规范</veiw> <card color="red" @fclick=&quo

目录 条件编译 页面布局 总结 条件编译 条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台. 写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾. #ifdef:if defined 仅在某平台存在 #ifndef:if not defined 除了某平台均存在 %PLATFORM%:平台名称 页面布局 scss 规范,rpx 在iphone6/7/8 中 宽度为750,2rpx = 1px <style

1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.

很多人习惯用watch,但是却很少有人知道watch的真正触发条件.如果不是对vue原理了如指掌,请谨慎使用watch. 示例1,下面会触发watch 吗? <script> new Vue({ data() { return { city: {id: 1, name: 'Beijing'} } }, watch: { city() { console.log('city changed') } }, created() { this.city = {id: 1, name: 'Beijing

目录 一.样例代码 二.透过现象看本质 三.实现原理 四.父组件编译阶段 五.父组件生成渲染方法 六.父组件生成VNode 七.子组件状态初始化 八.子组件编译阶段 九.子组件生成渲染方法 十.使用技巧 10.1.具名插槽 10.2.作用域插槽 一.样例代码 <!-- 子组件comA --> <template> <div class='demo'> <slot><slot> <slot name='test'></slot&g

目录 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 优势: 不足:(开发中遇到的坑) 2.Nuxt 静态应用部署 优势: 不足: 3.预渲染prerender-spa-plugin 优势: 不足: 4.Phantomjs 针对爬虫做处理 优势: 不足: 总结 众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法.(本人只用过第一,第三种方案) 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染:Vue官网介绍 ,

本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat

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) 数据驱动 (

------>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

此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'