当前位置：首页 > news >正文

vue+uniapp

news 来源：原创 2024/9/19 9:23:16

#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>