3. 基础语法详解

一、前言

通过前面两章,我们已经了解了vue的基本结构组成,从本文开始,我们就正式踏入vue的语法学习。

这里提醒一下,当运行命令npm run dev后,你在项目中对代码文件做出的一切改动都会直接反应到页面上。

不过前提是你编辑文件后按了Ctr+S保存文件,又或者开启了vscode中“自动保存”文件的功能,否则是看不到效果的。

二、响应式

vue中最重要且最基础的内容就是“响应式”,这部分的内容你同样也可以在官方文档中找到:

image-20240116203644518

不过官方教程的目标群众是给对前端有一定基础的人看的,新手一上去很可能就会被其各种专业名词搞得头昏脑胀。

说简单点响应式其实就是一个更高级的变量,比如在前文中我写过这样的代码:

image-20240116204107805

如果你写普通的变量:

let msg="hello world,vue"

其实也能用上图中的语法将其显示到html中:

<div>
    {{ msg }}
</div> 

但不同的地方在于,如果之后你修改了msg的值,比如在某个点击事件中将msg修改为了"hello",html中的字符串是不会变的,依旧还是前面的"hello world,vue"

而响应式变量就比较高级了,它就是用来弥补这一缺点的, 无论你怎么变,它都会实时显示到html页面中。

1.ref

响应式变量的创建在vue中有两种方式,第一种就是这里用到的ref函数,你可以直接从vue中将其引入。

而使用方法就是用它将数据包括起来即可:

const a1=ref(10); //数字
const a2=ref(true); //bool
const a3=ref("string"); //string
const a4=ref(['1','2']); //array
const a5=ref({ //object
    msg:'111',
    age:999
});
const a6=ref(); //undefine
const a7=ref(null); //null

同时要注意我这里的写法,因为ref函数返回的是一个特殊的对象,并不是其原始的数据,所以我们一般都是使用const声明的。

正如这里所说,它是一个对象,我们的数据其实是放在该对象上的属性value上的,所以如果你想要在js代码中修改、访问该数据,就必须通过value属性进行访问,以上面声明好的响应式变量为例:

a1.value=20;
a2.value=false;
a3.value="test";
a4.value[0]='3';
a5.value.msg="222";
a6.value="string";
a7.value=999;

上面分别是各种数据类型的访问、修改方式,可以看到,和正常的数据相比,其实也是中间多了一个value属性而已。

而之所以在html中我们不需要写value,是因为vue自动帮我们解引用了。

ref函数名实际上是reference单词的缩写,也就是“引用”的意思。

当然,我们也可以自己手动对其解引用,使用到的函数为unref

console.log(a1.value);
console.log(unref(a1));

该函数就是专门用来解引用、获取其原始数据对象的,比如上面两句代码的效果就是完全一样的。

不过要注意,解引用之后得到的值是只读的,也就是不能对其进行修改,如果你希望修改,那还是要使用value属性进行。

所以可能很多情况下都只会在响应式的对象上对其使用解引用,方面书写。

下面对其代码演示一下:

image-20240116211433821

可以看到,两个打印语句打印出来的内容都是一样,同时修改响应式变量的值也会直接反应到页面标签上。

当然,这里举的例子并不明显,因为这种情况下即使只是普通变量修改依旧会反映到html标签上,原因在于这里同在初始化的代码块中,执行完成后msg变量就直接是hello了,显示的自然也是hello

而如果是在点击事件中修改两者的数据,就能非常清晰的看出普通变量与响应式变量两者之间的差距了。

2.reactive

创建响应式变量的方式在vue中有两种,上面ref是第一种,而第二种就是这里的reactive函数。

不同于前面refreactive创建的响应式变量主要有两个区别:

  1. 不需要value属性、不需要解引用,可以直接像正常变量一样修改、访问。
  2. 只能作用于数组、对象这种复杂的数据类型。

除了这两点外,其它的使用方式和前面的ref其实都是一样的:

image-20240116212507924

可以看到,对于对象而言,此时无论是对其访问或者修改都和普通的对象变量一样,但不同之处在于此时它是响应式的,只要其上的数据变量,就会立即反映到html标签中去。

这里使用的对象,对于数组也是同理,但要注意的是,不能将其作用在普通、单一的数据类型上,比如字符串、数字、布尔等。

3.总结

简单总结一下,所谓响应式,其实你就可以将其看做是vue提供的一种变量,只要变量中的值一变,就会立马反应到页面上。

平时使用的时候基本也没什么太多需要纠结的,只要你需要将某个变量显示到html页面上,那么直接就使用ref函数创建即可,它是通用的。

只不过使用它的使用必须要记住,在html中把它当作普通变量使用即可,只有在js代码中才需要将其当作一个对象看待,我们的实际数据是放在该对象上的value属性上的。

而对于对象、数组这种数据类型使用它会比较麻烦,这是你可以使用reactive对其进行简化,可以让你少写一个value属性。

总得来说,这两者并非是谁取代谁,对于基本数据类型而言,你只能使用ref,而对于复杂的类型,比如对象、数组等等,就可以选择使用reactive简化代码。

如果你就是不希望使用ref要多写一个value属性才能修改、访问值,还有另外一种常见的做法是将多个需要用ref绑定的基本数据类型组合成为一个对象,然后对该对象使用reactive就可以了。

三、模板语法

上面我们提到的响应式变量之所以能够实时将数据刷新到页面上,用的是两个大括号{{}}将其包裹起来。

而这就是本节要介绍的“模板语法”,其中{{}}又被称为“文本插值”,这部分内容你同样也可以在官方文档中找到:

image-20240119115501409

“文本插值”很简单,说白了就是官方定义的两个大括号写法{{}},它可以用来将script块中的变量值显示到html页面上,如果这个变量是响应式的变量,那它还会实时跟踪变化。

事实上模板语法并不是仅仅只能用于显示变量值,它甚至还能执行一段js表达式,就像下面这样:

image-20240120221110393

上图代码中的{{}}中写了一个js中的三元运算符,只不过我直接将变量换为了确定的true,也就是最终的渲染结果为YES

但要注意的是,它只能执行一句表达式,即使是许多级函数链接都行,就像下面这样:

image-20240120221445289

如果你想要执行复杂的操作,它也可以调用函数:

image-20240120221630446

以上就是模板语法中“文本”差值语法的基本用法,简单点来说就是{{}}可以实现在html中执行一句js语句、并显示结果。

除此之外,模板语法还涉及html标签渲染、以及便签的属性绑定。

首先是标签渲染,比较简单,其实就等价于原生的js代码:

let ele=document.querySelector('#test');
ele.innerHTML="<span>测试</span>"

通过标签对象上的innerHTML属性,就可以将html字符串直接渲染为其子标签,这个特性在很多时候都非常有用。

而vue就通过了v-html这个指令替换了上面的代码,使其更加容易被使用:

image-20240120222358737

可以看到,上图中实现的效果和前面的代码是一样的,但此时我们却可以将其设置为响应式的变量,此时如果我们想要修改该div标签内部的内容时,只需要修改变量test_label中保存的标签字符串。

最后就是属性绑定。

总的来说,一个标签无非就是两个部分:标签内部的内容、标签本身的各种属性。

{{}}v-html这两个语法都可以让我们动态设置标签内的内容,最后我们还需要学习一下如何动态设置某个标签上的属性,也被称为“属性绑定”。

举一个最简单的例子,图片标签img,如果我想要让它更换图片链接,使用纯js代码的话就得写一长串代码去动态更改它的src属性对吧!

而在vue中使用属性绑定一切都变得简单起来了,还是像前面一样,定义一个响应式变量:

<script setup>
import { ref } from 'vue';
const link=ref("www.baidu.com/12345.png");
</script>

当然了,这里的链接是随便写的,然后重点来了,在html中就要写为下面这样:

<template>
  <img :src="link">
</template>

是不是非常的简单,你只需要在想要动态设置属性名的前面添加一个冒号:即可,比如这里的img标签上的src属性,这里就是再前面添加:,然后让其等于我们的响应式变量,就能完成动态属性绑定。

此后,如果你想要更改这个img标签要显示的图片,就可以直接更改这个响应式变量的值即可!

这个语法与前面的{{}}语法差不多,里面同样可以写一句表达式、甚至调用函数,只是要注意的是前面有一个冒号。

表达式示例:

  <img :src="true?'YES':'NO'">

函数示例:

image-20240120223159224

四、类与样式绑定

这部分的内容其实和上面刚提到的属性绑定是一样的,只是绑定标签的属性而已。

只不过特殊在于两个属性是“类”和“样式”,这是所有标签都有的两个属性。

毕竟vue是前端框架,好看第一位,类和样式这两个属性就是决定控制、调整标签美观的两个非常重要的属性。

首先聊聊绑定类,与前面的绑定标签属性其实是一样的:

image-20240120223740095

一个比较常见的用法是切换主题,就像上面代码那样:

  1. 首先在css中写两个类的样式
  2. 通过动态修改标签的类,从而让其在两个样式之间进行切换

而改变的方式也很简单,直接改变上图代码中的theme这个变量值的字符串即可。

除此之外,另一个用途就是标记某个类是否启用:

image-20240120224204394

注意这里与前面的不同之处,这里让其等于的是一个对象,需要用一个大括号将其包裹起来。

前面的键是你想要绑定的类名,后面的值为一个布尔类型,只有后面的值为true,前面的键才会被绑定到标签之上。

既然是类,当然就可以绑定多个了,所以上图代码中我绑定了两个键值对,前面的键分别为dark、light,如果后面的值为true,那么该键就会作为类名添加到该标签上。

此时其实现的效果其实和前面是一样的。

绑定类主要是适用于那种样式变化有限的,比如主题色就只有两个,那你就写两个类,然后更改类名即可。

但有些属性却不一样,比如我写过的一个看小说的软件,需要让用户动态调整字体的大小、行高。

这时候用类绑定肯定就不行了,最简单直接的方式是直接用js查询到所有行,然后动态更改它们的相应属性。

这样当然可以,但既然我们都用vue了,也没必要再自己去亲力亲为这种麻烦事情,而这就可以使用样式绑定的方法来解决。

它用起来和上面的类绑定非常像,同样是一个对象:

<template>
  <p :style="{'font-size':font_size+'px'}"></p>
</template>

<script setup>
import { ref} from 'vue';
const font_size=ref(16);
</script>

此时你就可以直接更改变量font_size的值来动态更改p标签的字体大小了,是不是相当方便!

正如前面说的,它是一个对象,所以你可以绑定多个样式。

太多写在标签中不好看?你也可以将其放在一个响应式对象中:

<template>
  <p :style="p_config"></p>
</template>

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

const p_config=reactive({
  'font-size':font_size+'px',
  'font-weight':font_weight
})
作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux