uni-app笔记（1）

uni-app 笔记

2021/11/12

页面相关介绍：

• pages （文件夹） 页面：大的总页面
  >> pagesName 【文件夹】 放置页面
  >>index.vue 包含了 html css js
• static 【文件夹】 放置静态文件 图标 字体 公共的css样式
• App.vue 入口组件 包含 所有的页面的配置
• index.html 整个应用程序的 页面 现在的这种框架 只有一个html
• main.js 整个引用程序 启动的入口文件
• manifest.json 上线的配置项
• pages.json 配置整个应用程序的 有哪些页面 启动页面 配置标题

组件和模块

• img —> image
  div —> view
  —> 自定义组件
• List item
• node webpack vue 组件(模板) 模块 ，组件化开发，单页面应用，模块化
  前后端分离

Vue文件总格式

template
view必须这样 嵌套
…
view
template

script
… 逻辑
script

style
… 样式
style

2021/11/12

less/scss

• css预处理器：拓展了原生css，提供了类似变量，嵌套，混入

移动端适配：

• rem…uniapp中直接使用upx/rpx （大致上：1px=2rpx or1px=2upx）

弹性布局

• 弹性布局
  display：flex （设置给父元素 子元素默认水平排列）

• 主轴排列
  justify-content: flex-start;
  justify-content: flex-end;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;

• 交叉轴排列
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;

• 换行
  flex-wrap: wrap;

• 改变轴的方向
  flex-direction: column;

tabbar的配置

在pages.json中配置tabbar选项

url 的组成 ：

协议://ip:端口/资源路径/文件名?查询参数#hash

路由（页面跳转）

navigate标签

• 父页面 跳转 并传值（路由传值）
  
• 子页面接受路由参数
  onload生命周期钩子函数中接受

api方式跳转

父页面 绑定事件

单页面应用 传统的网页区别

• 传统网页 是dom操作
• 单页面应用 数据驱动
• 传统网页 事件 οnclick='show()'
• 单页面应用 事件 @click='show’

js

数据类型

基本数据类型： 数字 字符串 布尔值 undefined null 、
引用数据类型：object{}

语句

分支 if(){} switch(){}
循环 for(){} while(){}
函数 function show(){}
export default

表达式

var a=10
var fn=function(){}

事件

onclick

自定义组件

步骤：

-创建组件
根目录>components>组件名（文件夹） > 组件名.vue

• 使用组件
  

数据绑定

• 模板插值 {{name}}（双括号围起来）
  
• 指令 v-if=’!loginState’
• 指令 循环 v-for=‘item in dataList’
• 指令 动态属性 v-bind:src=’’ 简写 :src=’’
• 指令 动态class v-bind:class=’{blue:state}’
• 指令 表单的值 双向绑定 v-model=‘data中的属性’

更改data

this.data中的属性=值

计算属性

computed:{
	计算属性方法名(){
		return 值
	}
}

{{计算属性方法名}}

watch 侦听器

监听到某个值的改变  做出相应改变
eg：
watch:{
	username(newVal,oldVal){
		if(newVal=='admin'){
			this.username='欢迎'+newVal
		}
		console.log(newVal,oldVal)
	}
}