vue+uniapp

news2025/2/22 16:00:29

#vue支持的语法，基本上可以做uniapp中所使用（指绝大部分）

#知识点：插值表达式，响应式，指令，事件，指令修饰符

#拥有一些案例，补充，以及说明了如何在vscode运行vue项目

#如果没有安装依赖，请确保安装了vuejs 和 npm

#安装vuejs和npm教程

一.使用vs code 运行vue 项目

1.需要确保安装了依赖库

npm install

2.启动服务器

npm run serve

二. 插值表达式和响应式

表达式: 用于表达式进行插值,渲染到页面之中

语法: {{ 表达式 }}

案例

<template>
    <h1>{{ arr[2] }}</h1>
    <h1>{{ 9 + 5 }}</h1>
    <h1>{{ "神奇" }}</h1>
</template>

<script setup>
import { ref } from 'vue';
var arr = ref([1, 2, 4, 5])
</script>

<style></style>

响应式：数据的变化可以触发到界面

响应式语法：可以将任何类型的值转换为响应式数据

import { ref } from 'vue'; //用于引入组件，相对于java中的导包

const reactiveVar = ref('这是响应式变量');

普通变量和响应式的区别(当一个修改的区域块，同时出现了普通和响应式，两者都会是响应式)

响应式：修改响应式的值之后，页面可以发生改变

<template>
    <div>
        <!-- 显示响应式变量的值 -->
        <h1>响应式变量: {{ reactiveVar }}</h1>
        <!-- 点击按钮时调用updateRef函数以更新响应式变量的值 -->
        <button @click="updateRef">响应式变量</button>
    </div>
</template>

<script setup>
// 导入Vue的ref函数，用于创建响应式变量
import { ref } from 'vue';

// 创建一个响应式变量，初始值为'这是响应式变量'
const reactiveVar = ref('这是响应式变量');

/**
 * 更新响应式变量的值
 * 此函数将reactiveVar的值更新为'响应式变量已更新'，以演示响应式原理
 */
function updateRef() {
    reactiveVar.value = '响应式变量已更新';
}

</script>

点击后

普通变量：当我们修改普通变量的值之后，页面中显示的值并不会发生改变

<template>
    <div>
        <!-- 显示普通变量的值 -->
        <h1>普通变量: {{ normalVar }}</h1>
        <!-- 点击按钮时调用update函数以更新普通变量的值 -->
        <button @click="update">普通变量</button>
    </div>
</template>

<script setup>
// 普通变量，不会引起界面自动更新
let normalVar = '这是普通变量';

// 更新函数，用于更新普通变量的值
function update() {
    // 更新普通变量
    normalVar = '普通变量已更新';
}
</script>

<style></style>

三. vue 中的指令

指令是指使用 v- 开头的，常见的有：v-text，v-html，v-if，v-show，v-model，v-bind，v-on，v-for

v-text ：用于更新值，不会解析标签，和JavaScript中的innerTEXT类似

<p v-text="message"></p>

v-html：可以将解析标签，和JavaScript中的innerHTML类似

<template>
  <!-- 主体内容区域 -->
  <div>
    <!-- 使用v-html指令将html变量中的内容安全地渲染为HTML -->
    <span v-html="html"></span>
  </div>
</template>

<script setup>
// 定义一个包含HTML内容的字符串变量
var html="<h1>Hello Vue 3!</h1><p>Welcome to the Vue 3 world.</p>"
</script>

v-if：条件渲染，根据表达式的真假来判断是否渲染元素（值为false会直接销毁，不存在)

<template>
  <div>
  <!-- 主体内容区域 -->
  <!-- 条件渲染一个 span 元素，展示动态绑定的 HTML 内容 -->
  <span v-html="html" v-if="is"></span>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个包含 HTML 字符串的变量，用于在模板中动态展示
var html="<h1>Hello Vue 3!</h1><p>Welcome to the Vue 3 world.</p>";

// 使用 ref 创建一个响应式的布尔值变量 is，控制 span 元素的显示与隐藏
var is=ref(true);
</script>

v-show：控制元素的 CSS display 属性来切换显示和隐藏（值为false会隐藏，不会销毁）

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-show 控制 span 元素的显示与隐藏 -->
    <span v-show="is" v-html="html"></span>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个包含 HTML 字符串的变量，用于在模板中动态展示
var html = "<h1>Hello Vue 3!</h1><p>Welcome to the Vue 3 world.</p>";

// 使用 ref 创建一个响应式的布尔值变量 is，控制 span 元素的显示与隐藏
var is = ref(true);
</script>

v-model：实现表单输入和其他元素的双向数据绑定

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-show 控制 span 元素的显示与隐藏 -->
    <span v-show="is" v-html="html"></span>

    <!-- 添加一个输入框并使用 v-model 实现双向绑定 -->
    <input type="text" v-model="inputValue" placeholder="请输入文本">
    <p>输入的内容：{{ inputValue }}</p>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个包含 HTML 字符串的变量，用于在模板中动态展示
var html = "<h1>Hello Vue 3!</h1><p>Welcome to the Vue 3 world.</p>";

// 使用 ref 创建一个响应式的布尔值变量 is，控制 span 元素的显示与隐藏
var is = ref(true);

// 使用 ref 创建一个响应式的字符串变量 inputValue，用于双向绑定输入框的内容
var inputValue = ref('');
</script>

v-bind：（通常缩写为 :）用于动态绑定属性到表达式的值

属性内部默认都是字符串，通过v-bind可以将值解剖成变量或者响应式数据

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-bind 动态绑定 disabled 属性 -->
    <button :disabled="count >= maxCount" @click="increment">点击增加计数</button>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个响应式的计数值
var count = ref(0);

// 定义一个最大计数值
var maxCount = 5;

// 定义一个方法 increment，用于增加计数值
function increment() {
  count.value++;
}

</script>

v-on：绑定事件监听器（可以缩写成 @）

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-on 绑定 click 事件 -->
    <button @click="increment">点击增加计数</button>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个响应式的计数值
var count = ref(0);

// 定义一个方法 increment，用于增加计数值
function increment() {
  count.value++;
}

</script>

v-for：循环渲染列表或对象的属性

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-for 渲染列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
       <span>值:{{ item }},索引:{{ index }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个响应式的数组，用于存储列表项
var items = ref(['苹果', '香蕉', '橙子']);

</script>

四. 事件监听

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的

1.回车事件（点击回车触发）

@confirm   适用uni-app 

@keyup.enter  适用vue3

运用场景：通常在文本框输入的时候使用

2.点击事件（鼠标左键点击指定区域触发）

@click 

运用场景：用户登陆，按钮点击

3.更改事件 （值更改触发）

@change

运用场景：通常用于文本框的值被修改的时候进行验证

4.失去焦点事件（鼠标点击之后视为聚焦，鼠标点击另一块区域视为失去焦点）

@blur

运用场景：通常用于文本框失去焦点后验证

5.获得焦点事件

@focus

运用场景：通常用于选中某些区域之后进行高亮提示

5.输入框内容变化事件

@input

运用场景：可以实现输入框输入后，下面动态生成相关内容

6.提交事件 （表单提交的时候触发）

@submit

运用场景

7.滚动事件 （滚动条滚动触发）

@scroll

运用场景

8.下拉刷新事件  （uni-app独有）

@pullingDown 

运用场景:数据刷新，加载更多

9.触底事件 （uni-app独有）

@reachingBottom

运用场景：可以加载更多的数据，触底提示是否回到顶部

五. 指令修饰符

在Vue中，指令修饰符是一种扩展指令功能的方式，通过 . 来指定后缀，不同的后缀有不同的操作，用于简化代码

六. watch

补充：

1. 删除数组中的元素

		arrs.value.splice(index, 1)

解释：删除arrs数组中的指定索引，删除一个元素

2. 为什么使用v-for要定义  :key="" 

<view class="forBody" v-for="(item,index) in arrs" :key="item.id">
			
</view>

解释：

1.提高性能:

Vue 使用 key 来追踪每个节点的身份，这样就可以在更新列表时更高效地复用和重新排序现有元素，而不是每次都重新渲染整个列表。这有助于减少不必要的DOM操作，从而提高性能。

2.避免警告：

如果不为每个项指定唯一的 key，Vue 会发出警告，提示你添加 key。这是因为没有 key 会导致渲染问题，尤其是在涉及到状态管理或者动画效果时。

3.确保状态：

当列表中的数据发生变化时，Vue 会根据 key 的唯一性来判断哪些元素需要更新或移动。如果没有提供 key 或者提供的 key 不唯一，则可能导致组件状态混乱，例如计数器或其他动态数据可能不会按预期工作

因此，在使用 v-for 时，推荐为每个项提供一个唯一的 key 值，以确保正确的渲染行为和最佳性能。

3.vue案例（包含删除，新增，和回车，点击事件）

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newItem" placeholder="Add new item" @keyup.enter="addNewItem()" />
    <button @click="addNewItem">Add Item</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const items = ref([
  'Learn Vue',
  'Build something awesome',
  'Profit!',
]);
const newItem = ref('');
function addNewItem() {
  items.value.push(newItem.value);
  newItem.value = '';
}
function removeItem(index) {
  items.value.splice(index, 1);
}
</script>

4.uni-app案例（包含删除，新增，和回车，点击事件）

<template>
	<view class="out">
		<view class="top">
			<h1>近期热搜</h1>
		</view>
		<view class="body">
			<view class="forBody" v-for="(item,index) in titles" :key="item.id">
				<view class="textBody">
					<span class="title">{{index+1}}.</span>
					<span class="text">{{item.name}}</span>
					<span class="del" @click="del(index)">删除</span>
				</view>
			</view>
			<view class="num">共{{titles.length}}条热搜</view>
		</view>
		<view class="buttom">
			<input type="text" auto-focus="true" v-model="text" class="tex" placeholder="请输入热搜" @confirm="insert()">
			<button class="bton" @click="insert"><span class="btonText">添加</span></button>
			<button @click="remover()"><span>清空</span></button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	var remover = () => {
		titles.value=[]
	}

	var titles = ref([{
			id: 1,
			name: '老王被抓了??'
		},
		{
			id: 2,
			name: '日本被灭了'
		},
		{
			id: 3,
			name: '山中无老虎,台湾称王??'
		},
		{
			id: 4,
			name: '台湾回归?'
		},
		{
			id: 5,
			name: '重生之新一是首富??'
		},
		{
			id: 6,
			name: '早恋被逮到了??'
		}
	])
	var del = (index) => {
		console.log(index);
		titles.value.splice(index, 1)
	}
	var i = titles.value.length + 1;
	var insert = () => {
		console.log(text);
		titles.value.push({
			name: text.value,
			id: i
		})
		i++;
		text.value = ''
	}
	var text = ref('');
</script>

<style>
	.top {
		text-align: center;
		font-size: 30px;
		margin-bottom: 20px;
	}

	.buttom {
		margin-top: 5px;
		text-align: center;
	}

	.textBody {
		margin: auto;
		width: 80%;
		height: 30px;
		border-bottom: 1px solid red;
		position: relative;
	}

	.del {
		position: absolute;
		right: 20px;
		color: blue;
	}

	.num {
		margin-top: 5px;
		text-align: center;
	}

	.tex {
		display: inline-block;
		width: 60%;
		height: 30px;
		border: 1px solid gray;
	}

	.bton {
		display: inline-block;
		width: 30%;
		height: 30px;
		line-height: 30px;
		color: aliceblue;
		background-color: red;
	}
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何在 Android 智能手机上恢复已删除的图片

如何在 Android 智能手机上恢复已删除的图片

面对现实&#xff0c;从手机图库中丢失照片总是令人不安的&#xff0c;无论您是无意中删除了它们&#xff0c;还是甚至出于冲动而生气。但是&#xff0c;我们在这里告诉您&#xff0c;与大多数人的看法相反&#xff0c;从画廊中删除图像并不会使它们不可挽回地丢失。以下是一些…
阅读更多...
【MySQL进阶之路】内外链接

【MySQL进阶之路】内外链接

目录 内连接 外连接 左外连接 右外连接 个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选 select 字段 from 表1 inner join 表2 on 连接条件 and 其他条件&#xff1b; 外连接 外连接分为左外连接和…
阅读更多...
【Java】—— 数组元素的查找：顺序查找与二分查找

【Java】—— 数组元素的查找：顺序查找与二分查找

目录 1、顺序查找 2、二分查找 1、顺序查找 在Java编程中&#xff0c;我们经常需要查找数组中某个元素的下标。有时&#xff0c;我们需要找到该元素第一次出现的位置&#xff0c;而有时则需要找到最后一次出现的位置。在本文中&#xff0c;我们将重点介绍如何查找元素第一次出…
阅读更多...
AI依赖的隐患：技术能力退化、安全风险与社会不平等的未来

AI依赖的隐患：技术能力退化、安全风险与社会不平等的未来

现代科技的浪潮中&#xff0c;ChatGPT等人工智能工具已经成为我们工作和生活的得力助手。然而&#xff0c;当这种便利变成了依赖&#xff0c;潜在的风险开始显现。过度依赖AI不仅可能导致技术能力的严重退化&#xff0c;还可能加剧信息安全问题和社会不平等。让我们深度剖析这三…
阅读更多...
智慧社区信息系统建设：数据可视化与原型设计的力量

智慧社区信息系统建设：数据可视化与原型设计的力量

在数字化浪潮的推动下&#xff0c;智慧社区作为城市治理现代化的重要一环&#xff0c;正以前所未有的速度改变着我们的生活方式。智慧社区信息系统&#xff0c;作为支撑这一变革的核心&#xff0c;不仅要求高效的数据处理能力&#xff0c;还需具备直观的数据展示与强大的用户交…
阅读更多...
zdppy+vue3+onlyoffice文档管理系统实战 20240823上课笔记 zdppy_cache框架的低代码实现

zdppy+vue3+onlyoffice文档管理系统实战 20240823上课笔记 zdppy_cache框架的低代码实现

遗留问题 1、封装API2、有账号密码3、查询所有有效的具体数据&#xff0c;也就是缓存的所有字段 封装查询所有有效具体数据的方法 基本封装 def get_all(self, is_activeTrue, limit100000):"""遍历数据库中所有的key&#xff0c;默认查询所有没过期的:para…
阅读更多...
服务器数据恢复—重建RAID失败导致数据丢失的数据恢复案例

服务器数据恢复—重建RAID失败导致数据丢失的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌服务器中有一组由4块SAS磁盘做的RAID5磁盘阵列。该服务器操作系统为windows server&#xff0c;运行了一个单节点Oracle&#xff0c;数据存储为文件系统&#xff0c;无归档。该oracle数据库的数据量不大&#xff0c;oracle数据库内只有一…
阅读更多...
【SpringBoot】电脑商城-08-新增收获地址

【SpringBoot】电脑商城-08-新增收获地址

新增收货地址 1 新增收货地址-创建数据表 1.使用use命令先选中store数据库。 USE store; 2.在store数据库中创建t_address用户数据表。 CREATE TABLE t_address (aid INT AUTO_INCREMENT COMMENT 收货地址id,uid INT COMMENT 归属的用户id,name VARCHAR(20) COMMENT 收货人…
阅读更多...
Oracle Linux 7.9 安装minikube体验

Oracle Linux 7.9 安装minikube体验

1.环境信息 前置所需&#xff1a; 操作系统&#xff1a;Oracle Linux 7.9 虚拟机配置&#xff1a;CPU:4核 内存&#xff1a;4G 容器&#xff1a;docker 26.1.4 安装minikube后环境&#xff1a; minikube: v1.33.1 kubernetes:v1.23.3 minukube体验说明&#xff1a;使用Virtua…
阅读更多...
vs code中编写html的配置，插件安装

vs code中编写html的配置，插件安装

首先安装vs code 插件安装下面三个&#xff1a; 功能分别是&#xff1a; html css support &#xff1a;就是支持html环境&#xff0c;因为vs code就是一个文本编辑器 live server&#xff1a;自动更新编写的文件在浏览器刷新 auto rename tag&#xff1a;自动修改另一半标签…
阅读更多...
火语言RPA流程组件介绍--获取/结束进程

火语言RPA流程组件介绍--获取/结束进程

&#x1f6a9;【组件功能】&#xff1a;获取整个进程列表&#xff0c;或者根据进程名/进程ID获取或结束指定的进程 配置预览 配置说明 查找方式 进程名&#xff1a;进程的名称。 进程ID&#xff1a;进程ID标识。 所有进程列表&#xff1a;返回所有当前系统运行的所有进程列表…
阅读更多...
Vue的计算属性：methods方法、computed计算属性、watch监听属性

Vue的计算属性：methods方法、computed计算属性、watch监听属性

1、methods 方法 在创建的 Vue 应用程序实例中&#xff0c;可以通过 methods 选项定义方法。应用程序实例本身会代理 methods 选项中的所有方法&#xff0c;因此可以像访问 data 数据那样来调用方法。 【实例】在 Vue 应用程序中&#xff0c;使用 methods 选项定义获取用户信…
阅读更多...
JLMSR超分算法说明和效果

JLMSR超分算法说明和效果

一、简介 JLMSR是基于加权概率模型构造的一种超分算法&#xff0c;属于传统超分&#xff0c;无需训练&#xff0c;适合硬件化。与传统超分的插值方案最大区别在于基于16*16的块进行上下文概率统计&#xff0c;结合权重进行插值。目前该插值方案已经线性化和整数化&#xff0c;…
阅读更多...
适用于应用程序安全的 11 大 DevSecOps 工具

适用于应用程序安全的 11 大 DevSecOps 工具

DevSecOps&#xff08;开发者安全运营&#xff09;是指将安全最佳实践融入软件开发生命周期的过程&#xff0c;从而实现更好的安全结果。这是提供全面安全基础设施的重要方面。 市场格局&#xff1a;DevSecOps市场竞争激烈。该领域有数百家供应商提供工具&#xff0c;帮助组织…
阅读更多...
能实现可算不可见的同态加密技术详解

能实现可算不可见的同态加密技术详解

目录 同态加密的基本概念 同态加密示例 同态加密的原理 同态加密的类型 同态加密的应用场景 同态加密的挑战 小结 同态加密&#xff08;Homomorphic Encryption&#xff0c;HE&#xff09;是一种满足密文同态运算性质的加密算法&#xff0c;可以在加密数据上直接执行特定…
阅读更多...
【C++ Primer Plus习题】4.8

【C++ Primer Plus习题】4.8

问题: 解答: #include <iostream> #include <string> using namespace std;typedef struct _Pizza {string companyName;float diameter;float wieght; }Pizza;int main() {Pizza *pnew Pizza;cout << "请输入披萨的直径: ";cin >> p->d…
阅读更多...
如何定义、注册以及什么是异步组件？

如何定义、注册以及什么是异步组件？

一. 如何定义异步组件 定义异步组件需要使用vue提供的 defineAsyncComponent() 方法&#xff1a; 注意&#xff1a;通过观察大家也可以发现&#xff0c;所谓的异步组件就相当于给普通组件套了一层外壳(defineAsyncComponent()),当然现在还不能感受到异步组件的魅力&#xff0c…
阅读更多...
大模型入门到精通——Prompt Engineering工程

大模型入门到精通——Prompt Engineering工程

Prompt Engineering 1. Prompt Engineering 的意义 在 LLM&#xff08;大语言模型&#xff09;时代&#xff0c;Prompt Engineering&#xff08;提示工程&#xff09;已经成为开发者与用户的重要技能和概念。随着大模型&#xff08;如 GPT、GLM、BERT 等&#xff09;的快速发…
阅读更多...
Windows SDK（九）登录框和计算器练习

Windows SDK（九）登录框和计算器练习

这节课我们分别开始讲解登录框和计算机的实现 登录框实现 我们以上节课所学&#xff0c;自行创建一个对话框&#xff0c;ID为IDD_DIALOG1并将他编辑为一个登录框的样式。其中我们将账户的编辑框ID设置为IDC_ENIT_USERNAME&#xff0c;密码的编辑框ID设置为IDC_ENIT_PASSWORD。…
阅读更多...
tm和r商标哪个最放心用！

tm和r商标哪个最放心用！

有个网友联系普推知产老杨&#xff0c;问申请的商标可以授权使用不&#xff0c;这个没有下商标注册证&#xff0c;基本上没多大用&#xff0c;申请的商标也可以授权&#xff0c;但是由于该商标尚未获得注册&#xff0c;其权利状态尚不稳定会存大许多风险。 TM基本是下受理书后的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023