语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

1、微信小程序

1.1、wx 小程序 工程目录

在这里插入图片描述

其中，

pages目录/index目录【必有】：
index.js 编写业务逻辑 【初始数据，生命周期函数】
index.json 编写配置
index.wxml 编写模板 【可理解为本页html】
index.wxss 【可理解为本页css】

1.2、wx 小程序 标签

直接输入关键词敲回车，连尖括号都不需要就可以标签补全

<div> —> <view>

<img> —><image>

<span> —> <text>

<a> —> <navigator>

1.3、wx 小程序 数据绑定

1）初始数据写死

在index.wxml 引入变量用 {{}}，参见 flask 向 template 中嵌入变量的写法

//index.js
Page({

  
 //页面的初始数据
  
  data: {
    name:'cold'
  },
 
  //生命周期函数--监听页面加载
  
  onLoad(options) {

  },
    //...
})

2）渲染时修改初始数据

//index.js

 //页面的初始数据
  data: {
    name:''
  },
 
  //生命周期函数--监听页面加载
  //setTimeout(()=>{},2000)
  onLoad(options) {
   
    setTimeout(()=>{
      this.setData({name:"sherry"})
    },2000)
  
  },

1.4、wx 小程序条件判断

标签有这样一个属性 wx:if 可用于条件判断

//index.wxml
<view wx:if="{{f}}">{{name}}</view>

1.5、wx 小程序 列表渲染

渲染 | 遍历一组数据 |for循环

以下面 list 为例，

//index.js
list:[1,2,3,4,5]

1）item作为关键词，可以筛选出wx:for`每个成员变量的 value

//index.wxml
<view wx:for="{{list}}">{{item}}</view>

也可以不用item，说明一下用谁，比如说明用it

//index.wxml
<view wx:for="{{list}}" wx:for-item:"it">{{it}}</view>

2）index 作为关键词，可以遍历索引

//index.wxml
<view wx:for="{{list}}">{{index}}</view>

同理，也可以 wx:for-index:"ID"说明一下，直接用ID或其它命名代替。

2、uni-app

<在这里插入图片描述

2.1、uni-app 规范

1）页面文件遵循 Vue单文件组件（SFC）规范

body | script | style -> template | script | style

参见 H5 单页面写脚本和样式的理解

2）组件标签靠近小程序规范

标签和微信小程序同

<div> —> <view>

<img> —><image>

<span> —> <text>

<a> —> <navigator> ×     <a> —> <uni-link>

3）接口能力（JS API）靠近微信小程序规范

4）数据绑定及事件处理同VUE.js 规范

（妹学 Vue）

5）为兼容多端运行，使用 flex 布局

2.2、uni-app 特色

  • 条件编译
  • App 端的 Nvue 开发
  • HTML 5+

HT5+ ，HT5+app，这是个什么东西？

HbuiderX ，DCLOUD 公司自家编译器，高度支持 uniapp，组件补全提示只需要输入几个相关不连续的字符就可以 。

2.3、uni-app 模板语法

index.vue 文件中包含三个大的标签，写模板，写脚本，写 样式，很好理解。

其中<template></template>的子标签只能有一个。

<template>
	<view class="container">
	
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				
				
			}
		},
		methods: {
			
			
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

2.4、uni-app 数据绑定

什么是动态绑定？

组件内有些值绑定的不是字符串，这里绑定的是数据，而数据是动态。

为什么要动态绑定？

原生组件，属性值呢只能被解析成字符串，想要绑定变量，就要用到动态绑定，而这也是学 uni-app 原因之一。

何为组件？

标签。

2.4.1、一般的数据绑定

例如，这里将content变量作为前端数据绑定，

<template>
	<view class="container">
		
		<view class="">
			{{content}}
		</view>
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				content:" i am a student,learning English very hard."
			}
		},
		methods: {

		}
	}
</script>

为啥数据绑定打双括号很少见？

随着案例的深入，会发现变量打括号会很少用的，最一般的，同时也是最少用的，顶多在组件文本处、页面空白处这样用。

原生组件不支持双括号语法，会将数据命名本身连带双括号一并解析成字符串，uniapp 自有的组件本身就支持动态绑定，更没必要写个双括号来说明什么了，直接上变量名称。

因此，在原生组件中，双括号用不了，在uniapp组件中双括号没意义，显得多余，所以用的就少。

2.4.2、动态 class

①:class 是v-bind:class的缩写

②选择器的值不需要带引号了

//index.vue
<template>
	<view :class=className></view>
</template>


<script>
	export default {
		//初始化数据方法
		data() {
			return {
				className:'uni-app',
                
			}
		},
		methods: {

		}
	}
</script>
2.4.3、动态 onclick

①@click 是 v-on:click 的缩写

②通过this 可以获取data中的所有初始化数据，可利用this.content 直接修改

举个例子，点击事件实现修改content的值，

<template>
	<view class="container">
		
		<view class="" @click="open">
			{{content}}
		</view>
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				
				content:"initial data"
			}
		},
		methods: {
			open(){
				console.log("我被点击了");
				this.content =" i am a student,learning English very hard."
			}
		}
	}
</script>

2.5、uni-app 条件判断

1）借助标签内的v-if 属性，判断要不要渲染这个标签

其值为变量或者 bool 值，只用引号引起来，不需要双重花括号。

<template>
	<view class="" v-if="judge">
		this is true.
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				judge: true

			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

2）条件不成立不渲染，走下一个标签：

①严格等于 ===；

②在引号内写判断。

<view class="" v-if="content === '内容1'"  >this is content1.</view>
<view class="" v-else-if="content === '内容2'">this is content2</view>
<view class="" v-else="content === '内容3'">this is content3.</view>

2.6、uni-app 列表渲染

1）例如通过数组arr来渲染我们的列表，for 循环

<template>
	<view class="" v-for="item in arr">
		{{item}}
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				arr :[11,22,33,44]

			}
		},
		methods: {

		}
	}
</script>

2）数组下标也表示出来：

①可见默认只表示迭代元素的值，写个元组的形式，哎，索引他就有了。【按照 python 的理解】

②data方法里存放的数据就是字典类型的。【按照 python 的理解】

<template>
	<view class="" v-for="(value,index) in arr">
		{{index}} : {{value}}
	</view>
</template>

<script>
	export default {
		//初始化数据方法
		data() {
			return {
				arr:{
					name :"cold",
					age:22,
					sex:'man'
				}

			}
		},
		methods: {

		}
	}
</script>

2.7、uni-app 基础组件的使用

从常用组件入手，这里介绍几个，建议文档 uniapp.dcloud.io查阅进行全面学习。

文档中有组件 平台差异，性能问题，使用须知等更多细节。

1）容器组件

  • 普通容器<view></view>

  • 滚动容器<scroll-view></scroll-view>

2）表单组件

  • 按钮<button></button>，属性巨强。

  • 富文本编辑器<editor></editor>

  • 选择器<picker></picker>，以往原生实现<select><option></option><select>从数据库查值选地区

  • <input></input>，value 属性的动态绑定 ，比如绑定数据 value

    • <input type="text" :value="value">

<input type="text" v-bind:value="value">
<!-- 双向绑定 -->
<input type="text" v-model="value">

2.8、uni-app 自定义组件的使用⭐（初级）

属于高级用法，非常重要，可以实现一些自带事件，自带样式的组件定义，还可以返回数据到这个页面给这个页面的其他事件用。

1）自定义组件的一般流程：

  • 注册
  • diy 内容
  • 引入这个 diy 组件（有待考察，或许不必人为引入了）

以创建<btn></btn>这个组件为例，

1、在项目根目录下，新建目录 components ， 在里面新建组件，名为btn【勾选创建同名目录】

2、在btn.vue中，使用旧组件定义新组件

<template>
		<view class="btn-box" :style="{color:color}" @click="onClick">
			<slot></slot>
		</view>			
		
</template>

<script>
	export default {
		name:"btn",
		//样式变量
		props:{
			
			color:{
				type:String,
				default:'#ff0000'
			}
		},
		//自定义方法
		methods:{
			onClick(){
				console.log("wo bei dian ji le");
				//发送事件至目标页面
				this.$emit('change',this.color)
				
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.btn-box{
	border: 1;
}
</style>

其中，

  • 通过绑定数据实现动态样式:style
  • 样式变量要定义在 props{} 中，而不是初始数据 data中，而且两者内的数据都可以 this 提取。
  • 像正常的成对标签一样可以中间填入文本要用到<slot></slot>文本插槽。
  • 绑定操作都是在script组件中，style组件用的不多，可能就设计 flex 布局的时候有点存在感？
  • props 属性很多，还可以继续学。
  • 点击组件可以返回一个事件,并且是可控的，给页面某个事件发射数据：
this.$emit(自定义事件,参数)

3、在目标vue文件中引入

<script>
	import btn from '@/components/btn/btn.vue'
	export default{
        components:{
            btn
        },
    }
</script>

我发现现在不需要额外的引入也能用。 — 2023.05.25

4、在 index.vue使用 btn组件

<template>
	<view class="">
		<btn @change="change">点击</btn>
	</view>

</template>

<script>
	
	export default {
		//初始化数据方法
		data() {
			return {
			

			}
		},
		methods: {
			change(e){
				console.log("我是页面的事件，我返回了"+e);
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

强调这里的三个 change：

<btn @change="change">点击</btn>

前者对应 this.$emit('change',...)
后者对应 change(e){}

三者同名即可。

2.9、uni-app 基础 api 用法

uni.前缀，说明要调用API了。

比如请求系统信息，带有回调函数的写法：

onLoad() {
			uni.getSystemInfo({
				success(res) {
					console.log('成功的返回',res);
				},
				fail(err) {
					console.log('失败的返回',err);
				},
				complete(res) {
					console.log('不管成功失败都返回',res);
				}
			})
		},

更多的，比如上传、下载、路由 看文档。

2.10、uni-app 条件编译

  • 具有不冗余的特点，不会存在非当前平台的未编译代码。

  • 不同组件内的注释不同。

  • 更多注意，查阅文档。

<template>	
<!-- ifdef H5 || APP-LUS -->
组件
<!-- endif H5 || APP-LUS -->
</template>

<script>
//	ifdef H5
//	endif H5
</script>

<style>
/* ifdef H5 */
/* endif H5 */
</style>

ifndef 表示唯独不编译这个平台。

条件编译写法说明
#ifdef APP-PLUS 需条件编译的代码 #endif仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）
值生效条件
VUE3HBuilderX 3.2.0+ 详情
APP-PLUSApp
APP-PLUS-NVUE或APP-NVUEApp nvue 页面
APP-ANDROIDApp Android 平台 仅限 uts文件
APP-IOSApp iOS 平台 仅限 uts文件
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-LARK飞书小程序
MP-QQQQ小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360小程序
MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION快应用联盟
QUICKAPP-WEBVIEW-HUAWEI快应用华为

2.11、uni-app 页面布局

1）没有原生 body 标签怎么实现整个页面的样式？

uni-app 等价实现，

<style>
    page{
        /* 定义整个页面的样式*/
    }

</style>

2）flex布局，老朋友了

display: flex;
margin: 0 auto;
justify-content: center;

3）CSS 外联，比如外联 index.css

page{
	background-color: blue;
}

<style>
	@import './index.css'
</style>

3、浅谈

3.1、随笔目的

好记性不如烂笔头，

习惯做随笔，

造轮子。

3.2、一个话题

新东西太难理解，内容太多？太费时间？如何提效？

注：以下内容是说给我自己听的【保命叠甲】

首先下一个结论，方法可能不对！犯了一个一口吃成胖子的错误，学习是要分阶段的。

如果你在跟课，跟视频等等，啥都想记，是没有相关文档吗？还是文档不如你记得全面？还是你能做到比文档排版更好？更有深度？还是太前言了，没有前辈经验总结可以借鉴？时间就是这么浪费的，不理解不消化，越学负担越重，进度就是这么慢下来的。所以呢，要循序渐进，反对过度笔记。

印象很深刻，考研的时候，过于崇拜记笔记，投入了大量的时间成本，其实也不看。看过高数讲义，武老师的ppt，我在上面做批注，详略得当，既全面，又有重点突出，讲义|PPT排版明显比自己的笔记不知道好了多少，我翻看的频率也上去了，好了好了，不怀旧了。

我理解的学习过程是这样的，三个阶段：

主动的机械模仿阶段👉肤浅简单的理解阶段，学习一般用法👉深度理解阶段，学习使用高级用法。

其中，一二阶段是需要很长一段时间的训练，消化，经验值拉满后才会进入到第三阶段，这个是急不来的，除非，卷王式短时间持续刺激前两个阶段的训练，亦或是，积累一定相关经验，主观感受内容太过简单，也会加快学习进程。

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=301wv6epszgg8

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/23249.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

cdn配置（超详细+图解+原理）

cdn配置（超详细+图解+原理）

具体的详细配置在右侧目录翻到“三”&#xff0c;前面的一二是将原理 以腾讯云的cdn为例&#xff0c;其它家的大同小异 一、cdn作用和配置思路 &#xff08;一&#xff09;cdn作用 1.加速访问 cdn服务通常有多个节点缓存&#xff0c;用户可以就近获取&#xff0c;延迟较低 …
阅读更多...
如何运行Node.js脚本及读取环境变量

如何运行Node.js脚本及读取环境变量

目录 1、如何从CLI 运行Node.js 脚本 2、将字符串作为参数传递到节点&#xff0c;而不是文件路径 3、自动重新启动应用程序 4、如何从Node.js中读取环境变量 1、如何从CLI 运行Node.js 脚本 运行Node.js程序的通常方法是运行全局可用的Node命令&#xff08;一旦安装Node.js…
阅读更多...
Linux---文本处理命令（grep、wc、管道符 |）

Linux---文本处理命令（grep、wc、管道符 |）

1. grep命令 grep命令能够在一个或多个文件中&#xff0c;搜索某一特定的字符模式&#xff08;也就是正则表达式&#xff09;&#xff0c;此模式可以 是单一的字符、字符串、单词或句子。 注意&#xff1a;在基本正则表达式中&#xff0c;如通配符 *、、{、|、( 和 )等&#…
阅读更多...
蓝桥杯--挖地雷

蓝桥杯--挖地雷

没有白走的路&#xff0c;每一步都算数&#x1f388;&#x1f388;&#x1f388; 题目&#xff1a; 已知有很多的地窖&#xff0c;每一个地窖中又藏着很多的地雷&#xff0c;每个地窖之间都存在着相连性&#xff0c;但是不是任意的地窖都是相连的&#xff0c;要求我们找出一次能…
阅读更多...
深度学习—目标检测标注数据集

深度学习—目标检测标注数据集

深度学习之目标检测 PASCAL数据集 PASCAL VOC挑战赛&#xff08;The PASCAL Visual Object Classes&#xff09;是一个世界级的计算机视觉挑战赛&#xff0c;PASCAL全称&#xff1a;Pattern Analysis&#xff0c;Statical Modeling and Computational Learning&#xff0c;是…
阅读更多...
native层函数没有导出时，如何获得相应函数地址？

native层函数没有导出时，如何获得相应函数地址？

前言 每次App重新运行后native函数加载的绝对地址是会变化的&#xff0c;唯一不变的是函数相对于基地址的偏移&#xff0c;因此我们可以在获取模块的基地址后加上固定的偏移地址获取相应函数的地址&#xff0c;Frida中也正好提供了这种方式&#xff1a;先通过Module.findBaseA…
阅读更多...
Augmented Language Models（增强语言模型）

Augmented Language Models（增强语言模型）

Augmented Language Models: A Survey 先上地址&#xff1a;https://arxiv.org/pdf/2302.07842.pdf 概率论难以支撑通用人工智能技术的诞生。—— Yann LeCun LLMs取得的巨大进展不再多说&#xff0c;它目前被诟病最多的问题是其会提供非事实但看似可信答案&#xff0c;即幻觉…
阅读更多...
MySQL之索引初步

MySQL之索引初步

1. 索引概念 数据库是⽤来存储数据&#xff0c;在互联⽹应⽤中数据库中存储的数据可能会很多(⼤数据)&#xff0c; 数据表中数据的查询速度会随着数据量的增⻓而逐渐变慢 &#xff0c;从⽽导致响应⽤户请求的速度变慢——⽤户体验差&#xff0c;我们如何提⾼数据库的查询效率呢…
阅读更多...
第一个servlet的程序

第一个servlet的程序

文章目录 一.Hello World的程序1.创建项目2.引入依赖3.创建目录4.编写代码5.打包程序6.部署程序7.验证程序 二.简化部署方式1.下载插件2.配置smart Tomcat插件3.测试插件 三.常见的servelt问题出现 404出现 405出现 500出现 "空白页面"出现 "无法访问此网站&quo…
阅读更多...
【数据结构】队列详解

【数据结构】队列详解

本篇要分享的内容是队列的解析和增删查改的使用&#xff0c;以下为本篇目录 目录 1.队列的概念及结构 2.队列的结构 3.队列的初始化 4.队列空间释放 5.入队 6.出队 7.获取队头和队尾元素 获取对头 获取队尾 8.计算队列元素 9.判空 11.本篇所有代码展示 Queue.c Q…
阅读更多...
一、尚医通手机登录

一、尚医通手机登录

文章目录 一、登录需求1、登录效果2、登录需求 二、登录1&#xff0c;搭建service-user模块1.1 搭建service-user模块1.2 修改配置1.3 启动类1.4 配置网关 2、添加用户基础类2.1 添加model2.2 添加Mapper2.3 添加service接口及实现类2.4 添加controller 3、登录api接口3.1 添加…
阅读更多...
FPGA——HLS入门-LED闪烁仿真

FPGA——HLS入门-LED闪烁仿真

系列文章目录 文章目录 系列文章目录一、HLS介绍1、什么是HLS2、与VHDL/Verilog有什么关系?3、关键技术局限性 二、Vivado HLS - LED闪烁仿真1、项目配置2、C仿真3、联合仿真 三、总结 一、HLS介绍 1、什么是HLS HLS就是高综合&#xff08;High level Synthesis&#xff09;…
阅读更多...
公网远程访问本地jupyter notebook服务 - 内网穿透

公网远程访问本地jupyter notebook服务 - 内网穿透

文章目录 前言视频教程1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 转载自cpolar的文章&#xff1a;公网远程访问Jupyter Notebook【Cpolar内网穿透】 前言 Jupyter Notebook&am…
阅读更多...
最优化方法Python计算：一元函数搜索算法——牛顿法

最优化方法Python计算：一元函数搜索算法——牛顿法

设函数 f ( x ) f(x) f(x)&#xff0c;在 [ a , b ] [a,b] [a,b]上二阶连续可微且有唯一的最小值点 x 0 x_0 x0​。由于 f ( x ) f(x) f(x)是 [ a , b ] [a,b] [a,b]上的单峰函数&#xff0c;故 f ′ ′ ( x ) > 0 f(x)>0 f′′(x)>0&#xff0c; x ∈ ( a , b ) x\in…
阅读更多...
MyBatis快速入门

MyBatis快速入门

目录 一、什么是MyBatis 二、MyBatis的学习要领 三、搭建第一个MyBatis 3.1 创建数据库和表 3.2 添加MyBatis框架支持 3.2.1 老项目添加MyBatis 3.2.2 新项目去添加MyBatis 3.3 设置MyBatis配置信息 3.3.1 设置数据库连接的相关信息 3.3.2 设置MyBatis xml保存路径 和…
阅读更多...
vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建前端项目

vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建前端项目

移动端项目模板 基于 vue-cli4.0 webpack 4 vant ui sass rem 适配方案axios 封装&#xff0c;构建手机端模板脚手架 启动项目 git clone https://github.com/teach-tian/h5-vue-cli4.gitcd h5-vue-cli4npm installnpm run serve✅ 配置多环境变量 package.json 里的 s…
阅读更多...
SpringBoot【开发实用篇】---- 整合第三方技术（监控）

SpringBoot【开发实用篇】---- 整合第三方技术（监控）

SpringBoot【开发实用篇】---- 整合第三方技术&#xff08;监控&#xff09; 1. 监控的意义2. 可视化监控平台3. 监控原理 在说监控之前&#xff0c;需要回顾一下软件业的发展史。最早的软件完成一些非常简单的功能&#xff0c;代码不多&#xff0c;错误也少。随着软件功能的逐…
阅读更多...
Linux基于Apache服务搭建简易镜像站

Linux基于Apache服务搭建简易镜像站

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Linux基于Apache服务搭建简易镜像站 安装Apache服务器 yum install -y httpd.x86_64 配置Apache服务器&#xff1a;编辑Apache配置文件/etc/httpd/conf/httpd.conf #S…
阅读更多...
ospf的rip和ospf互通以及配置stub区域和totally stub

ospf的rip和ospf互通以及配置stub区域和totally stub

1. ospf与rip如何互通 我们需要在两台路由器上互相引入,如上图 AR5和AR6运行了rip,但AR5也运行了ospf要想路由器能够互相学习到路由,就需要在AR5上配置路由协议引入 什么是stub区域如何配置stub区域 Stub区域的功能&#xff1a;过滤4类LSA和5类LSA&#xff0c;对外产生缺省的…
阅读更多...
Unity之使用Photon Server + PUN2 开发局域网多人游戏

Unity之使用Photon Server + PUN2 开发局域网多人游戏

一.前言 Photon Engine是一款跨平台的实时多人游戏引擎，它提供了可靠的基础设施和工具，使开发者能够轻松地构建和部署多人游戏。Photon Engine支持多种平台，包括PC、移动设备和Web，同时还提供了多种语言的SDK，如C++、C#、Java、JavaScript等，使得开发者可以使用自己熟悉…
阅读更多...
最新文章

Copyright @ 2022~2023