学习Uni-app开发小程序Day4

  • 今天是学习的第四天,老师的视频开始穿插讲解vue的知识,对身为小白的我还是很友好的。
  • vue3的模版语法插值表达式
    在根据视频学习的过程中,也对vue有一个回顾,但是出现一种情况,在script中声名一个值,在template中调用,网页端可以显示,但是在微信小程序中不能显示
html 复制代码
<template>
	<view>{{ a }}</view>
</template>
<script setup>
	const a = 6;
</script>

这种情况下,微信开发者工具上就是不显示,网页显示,不清楚原因。然后将const更改为let,就可以正常显示,包括是在templat中做数值加减,都是可以,使用const不行,查看文档,说是const不能更改常量,具体原因不是很清楚,在看文档的时候,发现可以把这个属性更改为var,这样就不存在这个问题,但是var是全局的,不像const和let是块域的,这里记录下,不知道正确不,后期有错误在修改。

刚刚才说完,在网上查看资料的时候,突然有个问题和我这个问题很相似,这里记录下
ES6 标准引入了新的关键字 const 来定义常量,const 与 let 都具有块级作用域:
使用 const 定义的常量,不能修改它的值,且定义的常量必须赋初值;
let 定义的是变量,可以进行变量赋值操作,且不需要赋初值。

今天在编写这个的时候,才发现vue忘记的差不多了,看来,还是需要把vue从头再学习几次,那就得把自己的学习时间做个调整,白天需要边学习uni-app,晚上学习vue,需要齐头并进,不然是跟不上的

  • vue响应式基础
    响应式的使用是需要ref的,在script中引入ref;
html 复制代码
<template>
	<view>
		<view>{{num1}}</view>
		<view>{{num2}}</view>
		<view>{{text}}</view>
		<view>{{arr[3]}}</view>
		<view>{{objec.name}}</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'; // 这是引用ref的声名状态
	let num1 = 9;  //这里切记,不能使用const,const是定义常量的,let是定义变量的
	let num2 = ref(11);
	setInterval(() => {  //这是定时器,
		num2.value++;  //这里要修改值,就得使用名称.value,不然是不能修改的
	}, 10000);

	let text = ref("你好,学习vue响应式");
	let arr = ref([1, 2, 3, 4, 5]);
	let objec = ref({
		name: "张三",
		age: 19
	})
	// 如果要修改对应的值时,需要使value
	objec.value.name = "李四"
</script>

以上可以看出来,ref是可以使用多种类型的,数组型、对象、数值、文本等。需要谨记,

所有的类型需要获取修改的时候,是需要加上value的,不然获取的时候,是获取到一个ref的对象的

相关推荐
CHB38 分钟前
uni-app x 蒸汽模式 iOS版 性能测试基准报告 Benchmark
ios·uni-app·swiftui
衍生星球1 小时前
SpringBoot3 + Vue3 + 微信小程序如何学习,以及学哪些技术,组件
sql·微信小程序·uni-app·vue·springboot
濮水大叔5 小时前
在大型 Vue 项目中,如何有效管理复杂的状态?“散装版” vs “套装版”
前端·vue.js·typescript
laowang3576 小时前
依赖故障时,日志体系需要埋哪些关键节点才能快速定位是安装失败、解析失败还是运行时缺失?
前端·javascript·vue.js·webpack·node.js
大爱编程♡11 小时前
Vue3基础
前端·javascript·vue.js
志尊宝11 小时前
Vue3 环境搭建 + 第一个 HelloVue 项目(零基础入门)
vue.js·node.js·vue·css3
这是个栗子12 小时前
【Vue代码分析】Vue响应式数据驱动视图(三):ref 和 computed 本质上是在做同一件事吗?
javascript·vue.js·ecmascript·computed·响应式·ref
daols8813 小时前
vue 甘特图 vxe-gantt 实现双进度条:计划 vs 实际,支持多级子任务拆分
vue.js·甘特图·vxe-table·vxe-gantt
踩着两条虫1 天前
可视化 vs 终端 vs 云端:VTJ.PRO、Claude Code、Codex 三强横评
前端·vue.js·人工智能·低代码·架构
前端毕业班1 天前
uni-app 小程序支持 teleport 了
前端·javascript·vue.js