Vue3基础知识

2025-01-07

官方快速上手

以下是uni-app的语法示范：

花括号可以写表达式（需要有返回值）

<template>
    {{ 2+3 }}
    {{ a + 5 }}
    {{ Date.now() }}
    {{ Math.random() }}
    {{ 1<2 ? '张三' : '李四' }}
</template>

函数基本调用

函数声明：

<script setup>
	function sayHello(){
		return "hello world"
	}
</script>

调用：

<view>{{\ sayHello() }}</view>

响应式数据（页面渲染）

需要用ref。

<script setup>
	import {ref} from 'vue';

	let name = ref('linxz');

	function changeName() {
		name.value = 'Mary'; 
	}
</script>

使用ref()的时候，取值必须通过.value完成。

而针对对象，可以用reactive()，取值就不用加.value。不过开发中一般都是用ref()，容易记。

let car = reactive({ brand: 'benz', price: 100 })

属性使用script中的变量

使用v-bind:，或者简写方式-冒号:

<image v-bind:src="picUrl />
//简写方式
<image :src="picUrl />

<script>
import {ref} from "vue";

cosnt picUrl = ref("../../static/pic1.png")
</script>

属性放表达式也需要用v-bind:

<div :class="{active: isActive}"></div>

常见应用：

若条件为true时，添加.active，否则啥也不加。

<view class="box" :class="true?'active':''"></view>

内联样式

<view style="width: 300px"></view>

如果需要用变量。

注意，纯数字比如300是不用打引号的，300px这样的表达才需要。

<view :style="{width: '300px'}"></view>

如何让图片循环播放？

取余操作即可。

import {ref} from "vue";
const arrs = ref(["url1", "url2", "url3","url4"])

let i = 0;
setInterval(()=>{
	i++;
	picUrl.value = arrs.value[i%4]
})