Vue.js基础——贼简单易懂!!(响应式 ref 和 reactive、v-on、v-show 和 v-if、v-for、v-bind)

ops/2024/11/27 15:41:10/

 Vue.js是一个渐进式JavaScript框架,用于构建用户界面。它专门设计用于Web应用程序,并专注于视图层。Vue允许开发人员创建可重用的组件,并轻松管理状态和数据绑定。它还提供了一个虚拟DOM系统,用于高效地渲染和重新渲染组件。Vue以其简单易用的特点而闻名,使其成为初学者和有经验的开发人员的首选。

使用以下方法构建版本

 下载 vue.esm-browser.js 这个模块文件

 使用了<script type="module">,且导入了上面的js文件(详细点击这里)

<div id="app">{{ msg }}</div><!-- ES6基准新的特性,支持类似Python的模板开发方式 -->
<script type="module">import { createApp } from "../vue.esm-browser.js"createApp({data() {return {msg: 'Hello Vue!'}}}).mount('#app')
</script>

一、创建一个 Vue 应用程序

 每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例

<script type="module">  import { createApp } from "../vue.esm-browser.js" //​通过 createApp 函数创建一个新的应用实例createApp({})

应用实例必须在调用了.mount() 方法后才会渲染出来,该方法接收一个“容器”参数,可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串,createApp 里面的内容将会被渲染在容器元素里面

<div id="app"> </div><!-- ES6基准新的特性,支持类似Python的模板开发方式 -->
<script type="module">import { createApp } from "../vue.esm-browser.js"createApp({}).mount('#app'); //将 Vue 应用程序挂载(mount) 到 app 元素上</script>

然后手写一个setup函数, 用于设置组件的响应式"数据(属性)"和"函数(方法)"等

创建一个Vue实例,并利用setup函数配置好这个实例里的数据和方法,并将需要用到的数据和方法暴露出来,供HTML调用。

<div id="app"></div><script type="module">import { createApp } from "../vue.esm-browser.js"createApp({setup(){// 定义数据(属性)let msg = "成功创建第一个Vue应用程序!";const web = {title: "百度一下,你就知道",url: "www.baidu.com"}// 定义函数(方法)const func = ()=> console.log("方法func被调用");// 返回一个对象类型的数据return { msg,   web,func}}}).mount('#app'); </script>

 {{  }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染 

<div id="app"><!-- 如: Vue 实例中定义一个 msg 变量, 值为 "成功创建第一个Vue应用程序!", 在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "成功创建第一个Vue应用程序!" --><p>{{ msg }}</p><p>{{ web.title }}</p><p>{{ web.url }}</p><p>{{ func() }}</p>
</div><script type="module">import { createApp } from "../vue.esm-browser.js"createApp({setup(){// 定义数据(属性)let msg = "成功创建第一个Vue应用程序!";const web = {title: "百度一下,你就知道",url: "www.baidu.com"}// 定义函数(方法)const func = ()=> console.log("方法func被调用");// 返回一个对象类型的数据return { msg,   web,func}}}).mount('#app'); </script>

 接下来需要下载一个live-server插件,我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。(实现自动刷新,架设本地服务器环境)

二、让数据变成响应式 ref 和 reactive

在Vue 3中,非响应式数据,在模板中普通变量不会自动更新,我们可以使用 ref reactive 函数来将数据变成响应式。

1、ref 函数:可以将基本类型数据包装成响应式对象

//使用 {{  }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
<div id="app"><p>{{ msg }}</p>
</div>
<script type="module">  
//导入 refimport {createApp, ref} from "../vue.esm-browser.js"createApp({setup(){// 定义数据let msg = ref("成功创建第一个Vue应用程序!");// 返回一个对象类型的数据return { msg, }}}).mount("#app");
</script>

在上面的例子中,使用 ref 函数将 "成功创建第一个Vue应用程序!" 包装成响应式对象 msg,然后使用 {{  }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染

 2、reactive 函数:可以将对象或数组转换成响应式对象。

javascript">//使用 {{  }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
<div id="app"><p>{{ web.title }}</p><p>{{ web.url }}</p>
</div>
<script type="module">  
//导入 refimport {createApp, reactive} from "../vue.esm-browser.js"createApp({setup(){// 定义数据const web = reactive({title: "百度一下,你就知道",url: "www.baidu.com"});// 返回一个对象类型的数据return { web, }}}).mount("#app");
</script>

在上面的例子中,我们使用 reactive 函数将包含 title 和 url 属性的对象转换成响应式对象 web。我们可以直接访问和修改 web 中的属性。

ref 和 reactive 函数的不同之处在于,ref 返回的是一个包装对象,我们需要使用 .value 来访问和修改数据。而 reactive 返回的是一个原始对象,我们可以直接访问和修改其中的属性。

无论是 ref 还是 reactive,当数据发生变化时,相应的视图也会自动更新。这使得我们能够轻松地实现数据的响应性。

三、事件绑定指令 v-on

在Vue中,可以使用 v-on 指令来绑定事件处理函数。

v-on指令可以简写为@,使用方式如下:

        <!-- v-on:click 表示在 button 元素上监听 click 事件 --><button v-on:click="edit">修改</button> <br><!-- @click 简写形式 --><button @click="edit">修改</button>

上面的代码将 edit 方法绑定到 click 事件上。当按钮被点击时,edit 方法将被执行。


事件处理函数可以是一个直接的方法引用,也可以是一个内联函数。例如:

<div id="app"><h3>{{ web.user }}</h3><!-- @click 简写形式 --><button @click="add(20, 30)">加法</button> <br></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({user: 0});const add = (a, b) => {web.user += a + b}return {web,//响应式数据add,//方法}}}).mount("#app")</script>

 在上面的例子中,将 add 方法绑定到 click 事件上,我们通过传递 "20" 和 "30" 来调用 add 方法修改web中的user属性,并使用 {{  }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染


除了click事件,v-on 指令还可以绑定其他DOM事件,如keyup、keydown等(点击这里了解DOM事件) 。例如:

        <!-- enter space tab 按键修饰符keyup是在用户松开按键时才触发keydown是在用户按下按键时立即触发-->        回车 <input type="text" @keyup.enter="add(40, 60)"> <br>空格 <input type="text" @keyup.space="add(20, 30)"> <br>Tab <input type="text" @keydown.tab="add(10, 20)"> <br>w <input type="text" @keyup.w="add(5, 10)"> <br>

 例如上面的代码将add方法绑定到keyup.enter事件上,当用户按下回车键时,add方法将被执行。

四、条件渲染指令 v-show 和 v-if

条件渲染指令在Vue.js中用于控制元素的显示或隐藏,它们分别是v-showv-if

v-show指令根据其后表达式的真假值来控制元素的显示与隐藏。它通过修改元素的display:none实现隐藏的,当表达式为真时,元素显示,为假时,元素隐藏。例如:
    <div id="app"><h3>显示状态: {{ web.show }}</h3><!-- Vue处理v-show变化时,是用display:none实现隐藏的(可以通过F12检查源代码,当点击时,源码会加入display:none) --><p v-show="web.show">广东云浮中医药职业学院计算机学院v-show</p>   </div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据show: true, //真});return {web,}}}).mount("#app");</script>

上面的代码将根据web中show属性的值来显示或隐藏<p>元素 


v-if指令是真正地条件渲染。当表达式为真时,元素会被渲染到DOM中,为假时,元素会被移除。 例如:
    <div id="app"><h3>显示状态: {{ web.show }}</h3><!-- Vue处理v-if变化时,是通过删除节点实现隐藏的(可以通过F12检查源代码,当点击时,源码会删除节点) 。当遇到需要频繁显示和隐藏的场景时,不是合使用v-if, 因为频繁增删节点,会导致渲染效率下降 --><p v-if="web.show">广东云浮中医药职业学院基础学院v-if</p><button @click="toggle">切换显示状态</button></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据show: true});const toggle = () => {web.show = !web.show;   // 这个布尔变量被切换后,模板中用到的地方会自动更新,进而被v-show捕获}return {web,toggle}}}).mount("#app");</script>

 上面的代码定义了一个toggle 方法将其绑定到 click 事件上,当按钮被点击时,toggle 方法将被执行。改变web中show属性的布尔变量,根据web中show属性的值来渲染或移除<p>元素

v-if 是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建。

相比之下,v-show 简单许多,元素无论初始条件如何,始终会被渲染,只有 CSS display 属性会被切换。

总的来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要频繁切换,则使用 v-show 较好;如果在运行时绑定条件很少改变,则 v-if 会更合适。


在使用 v-if 时,还可以通过使用 v-else-if v-else 指令来实现条件分支。

例如: (当用户数量小于100为新网站;用户数量大于等于100,小于1000为优秀网站;用户数量大于等于1000,小于10000为资深网站;否则为超级网站)

    <div id="app"><h3>{{ web.user }}</h3><p v-if="web.user < 100">新网站</p><p v-else-if="web.user >= 100 && web.user < 1000">优秀网站</p><p v-else-if="web.user >= 1000 && web.user < 10000">资深网站</p><p v-else>超级网站</p><button @click="add_user">增加用户</button></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据user: 50  //初始用户为50});const add_user = () => {web.user += 1000;}return {web,add_user}}}).mount("#app");</script>

上面的代码展示了如何使用 v-else-if 和 v-else 来创建条件分支。根据不同的条件,会显示不同的内容。 

五、遍历指令 v-for

在Vue中,使用 v-for 指令可以遍历数组或对象,根据每个元素生成相应的元素或组件。它用于数组或者对象的迭代,帮助开发者轻松地将数据渲染成列表或重复结构。

它的基本语法如下:

    <div id="app"><!-- 遍历对象的值 --><h4>实验1:遍历对象的值</h4><p v-for="value in data.user"> {{value}} </p></div><script type="module">import { createApp, reactive } from '../vue.esm-browser.js'createApp({setup() {const data = reactive({//数组number: ["十",  "十一",  "十二"], //对象user: { name: "李雷",   gender: "女",  class:1}});return {data}}}).mount("#app")</script>

其中,data.user是data中的user属性(对象),value是对象中的每个值 


除了对对象的值进行遍历,v-for还支持对对象、数组的值、索引和键进行遍历,以及迭代数字。下面是一些示例: 

遍历对象的值和索引(先值后索引):

        <!-- 遍历对象的值和索引。 注意:写指令时,先值后索引 --><h4>实验2:遍历对象的值和索引(键)。 注意:写指令时,先值后索引</h4><p v-for="(value, key) in data.user"> {{key}} : {{value}} </p>

 遍历数组的值和索引(先值后索引):

        <!-- 遍历数组的值和索引。 注意:写指令时,先值后索引 --><h4>实验3:遍历数组的值和索引。 注意:写指令时,先值后索引</h4><p v-for="(v, i) in data.number"> {{i}} : {{v}} </p>

 上面代码中值和索引的名字可改变,但要一定注意的是写指令时,先值后索引

 遍历对象的值、键和索引(先值再键后索引):

        <!-- 遍历对象的值,键和索引。 注意:写指令时,先值再键后索引 --><h4>实验4:遍历对象的值,键和索引。 注意:写指令时,先值再键后索引</h4><p v-for="(v, k, i) in data.user"> {{i}} : {{k}}: {{v}} </p>

 遍历数字: 

        <ul><li v-for="n in 10">{{ n }}</li></ul>

 总结起来,v-for指令用于在Vue.js模板中进行循环遍历,可以对数组、对象和数字进行遍历 

六、节点的动态属性 v-bind (单向绑定)

v-bind是Vue.js的指令之一,用于动态地绑定节点的属性。它可以将Vue实例的数据或计算属性绑定到节点的属性上,实现单向绑定。

v-bind的基本语法是在属性名前加上 v-bind: 或简写为 : ,后面跟上要绑定的表达式。例如:

input标签动态属性绑定

    <div id="app"><h3>  实验1:input标签动态属性绑定    v-bind:value </h3><input type="text" v-bind:value="web.str"><!-- 简写形式: <input type="text" :value="web.str"> --></div><script type="module">import { createApp, reactive } from '../vue.esm-browser.js'createApp({setup() {const web = reactive({str: "www.baidu.com"})return {web}}}).mount("#app")</script>

上面的代码中,:value 是 v-bind:value 的简写形式,web.str 是一个Vue实例的数据或属性,它会在渲染时被动态地绑定到 <input> 节点的 value 属性上。


 img标签动态属性绑定

    <div id="app"><h3>  实验2: img标签动态属性绑定</h3><img v-bind:src="web.img"></div><script type="module">import { createApp, reactive } from '../vue.esm-browser.js'createApp({setup() {const web = reactive({img: "../img_src/logo0.png"})return {web}}}).mount("#app")</script>

上面的代码中,web.img 是一个Vue实例的数据或属性,它会在渲染时被动态地绑定到<img>节点的src属性上。


控制HTML标签的class中某个值是否存在

除了绑定属性值,v-bind还可以绑定动态的CSS类和内联样式。例如:

 控制HTML标签的class中某个值是否存在使用 v-bind:class或 v-bind:id(通过布尔值控制该类名是否存在,进而控制CSS样式是否被选择生效)

<head><style>.textColor{color: red;font-size: larger;}</style>
</head><body><div id="app"><b v-bind:class="{textColor:web.fontStatus}"  id="b1">广东云浮中医药职业学院</b><br><br><br><button v-on:click="change">修改</button></div><script type="module">import { createApp, reactive } from '../vue.esm-browser.js'createApp({setup() {const web = reactive({fontStatus: false})const change = () => {web.fontStatus = !web.fontStatus; //修改布尔变量}return {web,change}}}).mount("#app")</script></body>

上面的代码中,web.fontStatus 是Vue实例的数据或计算属性,根据它的布尔值来动态地控制CSS样式是否被选择生效。 fontStatus的初始值为false,所以不生效。定义了一个change方法来修改布尔变量,将 change方法绑定到 click 事件上。当按钮被点击时,change方法将被执行,此时fontStatus 的值变为true,textColor的CSS样式就被选择生效。

需要注意的是,v-bind实现的是单向绑定,也就是数据变化会导致视图更新,但视图更新不会反过来改变数据。如果需要实现双向绑定,则应该使用v-model指令。

综上所述,v-bind指令用于动态绑定节点的属性,可以绑定属性值、CSS类和内联样式。它通过将Vue实例的数据或计算属性与节点属性进行绑定,实现数据的单向绑定。


http://www.ppmy.cn/ops/137110.html

相关文章

CentOS 7 安装部署 KVM

1.关闭虚拟机 打开相关选项 打开虚拟机centos7 连接xshell 测试网络&#xff0c;现在就是没问题的&#xff0c;因为我们要使用网络源 安装 GNOME 桌面环境 安装KVM 模块 安装KVM 调试工具 构建虚拟机的命令行工具 qemu 组件,创建磁盘、启动虚拟机等 输入这条命令&#xff0c;…

01 [51单片机 PROTEUS仿真设计]基于温度传感器的恒温控制系统

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 五个按键&#xff0c;分别为启动按键&#xff0c;则LCD1602显示倒计时&#xff0c;音乐播放 设置按键&#xff0c;可以设置倒计时的分秒&#xff0c;然后加减按键&#xff0c;还有最后一个暂停音乐…

Linux进程与资源管理

在Linux学习&#xff0c;进行各种操作过程中需要用到很多种命令&#xff0c;本篇主要讲Linux进程与资源管理命令仅供大家参考。绝对是干货满满的一篇文章&#xff01;&#xff01;&#xff01; Linux进程与资源管理命令&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&am…

《向量数据库指南》——MoE应用:解锁深度学习新境界的钥匙

在深度学习的广阔天地里,混合专家(MoE)模型如同一把锐利的钥匙,正逐步解锁着各种复杂应用场景的新境界。作为大禹智库的向量数据库高级研究员,同时也是《向量数据库指南》的作者,我深感MoE模型在推动AI技术向前发展中所扮演的重要角色。今天,我将带大家深入探讨MoE模型在…

Bug--python画图

今天在画图的时候遇见了bug&#xff1a; import matplotlib.pyplot as plt AttributeError: partially initialized module matplotlib.backends.backend_macosx has no attribute FigureCanvas (most likely due to a circular import) 原因&#xff1a; 画图的时候后端显示…

【NCL数据分析与处理】经验正交函数分解(EOF)、奇异值分解(SVD)、功率谱分析,1维、2维、3维数据的插值,等

NCAR Command Language&#xff08;NCL&#xff09;是由美国大气研究中心&#xff08;NCAR&#xff09;推出的一款用于科学数据计算和可视化的免费软件。它有着非常强大的文件输入和输出功能&#xff0c;可读写netCDF-3、netCDF-4 classic、HDF4、binary、ASCII数据&#xff0c…

【WEB开发.js】getElementById :通过元素id属性获取HTML元素

getElementById 是 JavaScript 中常用的一个 DOM 方法&#xff0c;用于通过元素的 id 属性获取文档中对应的 HTML 元素。这个方法返回的是一个包含该元素的引用&#xff0c;如果没有找到指定的元素&#xff0c;则返回 null。 语法&#xff1a; document.getElementById(id);i…

【单片机的结构和组成】

目录 1、中央处理单元&#xff08;CPU&#xff09;&#xff1a;2、存储器&#xff1a;3、输入/输出&#xff08;I/O&#xff09;接口&#xff1a;4、定时器/计数器&#xff1a;5、模拟-数字转换器&#xff08;ADC&#xff09;&#xff1a;6、数字-模拟转换器&#xff08;DAC&am…