Vue3基础

Waitfor_Me

已于 2024-08-24 08:03:03 修改

阅读量500

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js uni-app

于 2024-08-22 16:12:35 首次发布

本文链接：https://blog.youkuaiyun.com/Waitfor_Me/article/details/141428885

使用v-bind添加属性和不是用v-bind的区别

模板语法

引文(官方文档解释)：

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。

1.文本插值

{{ 变量or表达式 }}——简称插值表达式

使用方法:

<template>
	<view>我是一个变量我的值是：{{num}}</view>
	<view>我是一个三元表达式我执行的结果是：{{1>2?"大于":"不大于"}}</view>
</template>

<script setup>
	let num=1;
</script>

<style lang="scss">
</style>

执行后的结果：

假如我在插值表达式里面引用变量是一行代码会怎么样呢？

<template>
	<view>{{str}}</view>
	<view>-----------------------</view>
	<view v-html="str"></view>
</template>

<script setup>
	let str='<text class="myText" style="color: red;">我是一个红色的文本组件</text>';
</script>

<style>
</style>

结论：插值表达会将数据解释为纯文本，如果想要插入原始HTML要使用v-html指令

注意：v-html要谨慎使用可能会遭到XXS攻击

2.属性绑定

v-bind

说明：v-bind指令响应式地绑定一个 Attribute(属性)

为什么要用v-bind?

正常为组件属性绑定属性

<view class="box">内联样式添加属性</view>

使用v-bind添加属性和不是用v-bind的区别

<template>
	<view class="box" id="boxId" style="color: green;">内联样式添加属性</view>
	<view v-bind="attributes">v-bind添加属性</view>
</template>

<script setup>
	const attributes={
		id:'v-BoxId',
		class:'v-Box',
		style:'color:red'
	}
</script>

<style lang="scss">
</style>

结论：可以看到使用了v-bind绑定属性的组件比不使用v-bind的要短很多，简化了我们的模板代码，提高可维护性

一个v-bind用处实例

<button disabled="false">按钮</button>

可以看到从上面的代码中我们设置了 disabled为false，但是，这个按钮还是禁用的，这个原因我个人认为是uniapp将它判断成了一个字符串，而不是一个boolean值，解决方法就是使用v-bind指令

<button v-bind:disabled="false">按钮</button>

这样就解决了disabled设置了false却还是禁用的问题

v-bind动态绑定多个属性值

<template>
	<view v-bind="styles">动态绑定多个属性</view>
</template>

<script setup>
	let styles={
		id:'viewId',
		class:'viewClass',
		style:'color:red'
	}
</script>

<style lang="scss">
</style>

结果：

简写

<button :disabled="false">按钮</button>

可以使用:来代替v-bind:(简写)

3.响应式

ref()

为什么要使用响应式？

引文(来自官方文档的解释):

当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。然而，我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作。

如何使用：

1.引入ref到script

<script setup>
	import {ref} from "vue"
</script>

2.在赋值时使用ref()

<script setup>
	import {ref} from "vue"
	let num1=ref(10)
</script>

3.在插值表达式中调用这个变量

<text>{{num1}}</text>

为什么要使用响应式来为变量赋值？

通过一个小案例解释为什么要用响应式

<template>
	<text>变量：{{num1}}</text>
	<br />
	<text>响应式变量：{{num2}}</text>
</template>

<script setup>
	import {ref} from "vue"
	let num1=0;
	let num2=ref(0);
	setInterval(()=>{
		num1++;
		num2.value++;
		console.log("num1的值:"+num1);
		console.log("num2的值:"+num2.value);
	},1000)
</script>

<style lang="scss">
</style>

响应式变量案例

可以从上面的视频看到使用响应式赋值的变量会实时更新到页面显示，而没有用响应式赋值的变量，虽然值在改变，但是在页面上却一直显示的是初始值

响应式变量返回的是什么？

<template>
	<text>{{num}}</text>
</template>

<script setup>
	import {ref} from "vue"
	let num=ref(1)
	console.log(num);
</script>

<style lang="scss">
</style>

可以看到我们通过console.log(num)输入到浏览器控制台的是一个对象。

为什么在插值表达式里面是一个值呢？

因为Vue 自动将响应式变量转换为字符串，无需手动调用 .value。

注意：响应式变量的赋值时用.value，查看值的使用也是.value，在插值表达式里面不用.value来获得值，在插值表达式里面vue自动进行处理

4.Class 与 Style 绑定

引文(来自官方文档的解释)：

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

1.Calss

绑定对象

<template>
	<view :class="{box:flag}">111</view>
</template>

<script setup>
	import {ref} from "vue"
	const flag=ref(true);
</script>

<style lang="scss">
	.box{
		width: 200px;
		height: 200px;
		background: orange;
		text-align: center;
		line-height: 200px;
	}
</style>

上面这个例子可以是用了一个boolean类型的值来决定class样式是否存在，如果为true时class值就是'box'，并且会采用sstyle中的.box的样式，通常会在一些事件的执行方法中，通过这个值来决定是否改变样式

绑定数组

<template>
	<view :class="['box','font']">111</view>
</template>

<script setup>
</script>

<style lang="scss">
	.box{
		width: 200px;
		height: 200px;
		background: orange;
		text-align: center;
		line-height: 200px;
	}
	.font{
		font-size: 20px;
		font-weight: bold;
		color: black;
	}
</style>

可以通过一个数组来绑定多个class值，为其设置组件样式

2.style

绑定对象

绑定一个javascript响应式对象值，可在某些事件中响应式的改变其属性值

<template>
	<text :style="{color:color,fontSize:size+'px'}">响应式绑定javascript对象值</text>
</template>
<script setup>
	import {ref} from "vue"
	const color=ref("red")
	const size=ref(16)
</script>

<style lang="scss">
	
</style>

绑定一个样式对象，使代码变的更加的简洁

<template>
	<text :style="styles">绑定一个样式对象</text>
</template>
<script setup>
	import { reactive } from "vue"
	const styles=reactive({
		color:'green',
		'font-size':'25px',
		fontWeight:'bold'
	})
</script>

<style lang="scss">
	
</style>