Vue3（JavaScript框架）（响应式数据ref，v-on、v-show、v-is、v-for、v-bind）

🕗 发布于 2024-11-28 18:38 vue.js 前端 javascript

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

在创建我们第一个vue程序之前，我们需要构建一个版本

需要使用到两个模块文件http://vue.esm-brower.js和http://vue.glabal.js

使用script标签导入

 <script src="./vue.global.js"></script>

并且需要下载一个插件live server来作为我们一个虚拟的服务器

一、第一个vue程序

首先来看一下我们的基础代码

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

如: Vue 实例中定义一个 msg 变量, 值为 "Hello world",

在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Vue程序</title>
    <script src="./vue.global.js"></script>
</head>
<body>

    
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ web.title }}</p>
        <p>{{ web.url }}</p>
        <p>{{ func() }}</p>
    </div>

    <script>




    
    </script>



</body>
</html>

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：
import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

根组件

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

【第1步】手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等

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

    function setup(){
        // 定义数据
        let msg = "成功创建第一个Vue应用程序!";
        const web = Vue.reactive(
            {
                title: "百度一下，你就知道",
                url: "www.baidu.com"
            });
        // 定义方法（函数）
        const func = () => {
            web.title = "广东云浮中医药职业学院";       
            console.log("方法func被调用");
        }           
        // 返回一个对象类型的数据
        return { msg, web, func}
    }
    const set_ =  { setup,   }

【第2步】创建一个 Vue 组件


    const vm = Vue.createApp(set_);

【第3步】将 Vue 应用程序挂载(mount) 到 app 元素上

vm.mount("#app");

通过虚拟服务器，点击open with live server来运行，这样就是一个简单的vue程序的实现。

通过控制台可以看到我们调用了两次

二、响应式数据（ref和reactive）

一个网页页面，它是会自动更新的，这种叫做响应式数据，那么我们该如何将非响应式数据变为相响应式数据呢。

ref( ) 接受一个内部值，返回一个ref 对象，这个对象是响应式的、可更改的，且只有一个指向其内部值的属性 .value。

ref() 将传入参数的值包装为一个带 value 属性的 ref 对象。

reactive是Vue3 中的一个函数，它用于将普通对象转换为响应式对象。与ref不同，reactive适用于复杂对象（如对象和数组），而ref仅适用于基本数据类型和对象引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让数据变成响应式</title>
</head>

<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ web.title }}</p>
        <p>{{ web.url }}</p>
        <p>{{number}}</p>
        <button @click="change">点击我更换网址</button>
    </div>

    <script type="module">
        import {createApp, ref, reactive} from "./vue.esm-browser.js"  //模块化开发方式
        createApp({
            setup(){
                
                // const number = ref(10);
                // console.log(typeof number,number);  
                // number.value = 20;
                let number = 10;
                console.log(typeof number,number);  
                 number = 30;

                const web = reactive({
                    title: "百度一下，你就知道",
                    url: "www.baidu.com"
                });
                console.log(typeof web, web);

                const change = () => {
                    web.url += "-->数据被修改";
                }
                // 返回一个对象类型的数据
                return { msg: "成功创建第一个Vue应用程序!" ,   
                         web,
                         number,
                         change
                 }
            }
        }
        ).mount("#app");

    </script>



</body>
</html>

我们可以看到使用的ref函数包装msg成为了响应对象，使用了reactive将其做了个点击就修改一次{{web.url}}。

三、事件绑定事件v-on

使用 v-on:事件名= "触发事件" 可以用来绑定标签事件。也可以缩写为@事件名="触发事件" 。事件如:点击，双击，键盘按下等。当触发该事件后，就会调用语句执行。

<!-- v-on:click 表示在 button 元素上监听 click 事件 -->
        <button v-on:click="edit">修改</button> <br>
    
        <!-- @click 简写形式 -->
        <button @click="add(20, 30)">加法</button> <br>

常见的事件:

click: 点击一次; 当鼠标点击，触发事件

dblclick: 双击；当鼠标双击，触发事件

focus: 获取焦点；当得到了光标，触发事件

blur: 失去焦点; 当失去了光标，触发事件

mouseover:鼠标移至；鼠标移至某标签上方，触发事件

mouserout:鼠标移出；鼠标移出某标签上方，触发事件

keyup:键盘按下；键盘按下，触发事件

接着通过例子来解析一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定事件</title>
</head>

<body>
    <div id="app">
        <h3>{{ msg }}</h3>
        <h3>{{ web.url }}</h3>
        <h3>{{ web.user }}</h3>
        <h3>{{ sub(100, 20) }}</h3>
    
        <!-- v-on:click 表示在 button 元素上监听 click 事件 -->
        <button v-on:click="edit">修改</button> <br>
    
        <!-- @click 简写形式 -->
        <button @click="add(20, 30)">加法</button> <br>
    

    </div>

    <script type="module">
        import { createApp, reactive, ref } from './vue.esm-browser.js'
        
        createApp({
            setup() {

                let msg = "成功启动!!!";

                const web = reactive({
                    title: "百度",
                    url: "baidu.com",
                    user: 0
                });
    
                const edit = () => {
                    web.url = "www.baidu.com"
                    msg = "云中医" //错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据
                    console.log(`msg修改为: ${msg}`); //从控制台打印信息可以知道确实改变了，但是模板没有响应更新（非响应式数据）    
                }
    
                const add = (a, b) => {
                    web.user += a + b
                }
    
                const sub = (a, b) => {
                    return a - b
                }
    
                return {
                    msg, //普通变量, 非响应式数据, 在模板中普通变量不会自动更新
                    web, //响应式数据
                    edit, //方法
                    add,
                    sub,
                }
            }
        }).mount("#app")
    
    </script>



</body>
</html>

这是没有进行点击前的页面

这是通过v-on绑定后点击的页面

我们通过控制台可以看到，我们通过设置函数通过v-on绑定事件以及加入了点击触发事件，使用了响应式数据让我们数据产生了变化。

不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据

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

在Vue.js中，v-if和v-show都是用于控制元素显示与隐藏的指令。尽管它们的目的相同，但在实现机制和适用场景上有显著的区别。

Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none）

Vue处理v-if变化时，是通过删除节点实现隐藏的（可以通过F12检查源代码，当点击时，源码会删除节点）。当遇到需要频繁显示和隐藏的场景时，不适合使用v-if，因为频繁增删节点，会导致渲染效率下降

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点的条件渲染</title>
</head>

<body>
    <div id="app">


        <h3>显示状态: {{ web.show }}</h3>
   
        <p v-show="web.show">广东云浮中医药职业学院计算机学院v-show</p>   
        <p v-if="web.show">广东云浮中医药职业学院基础学院v-if</p>
        <button @click="toggle">切换显示状态</button>


        <hr>



        <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({   // 响应式数据
                    show: true,
                    user: 500
                });

                const toggle = () => {
                    web.show = !web.show;   // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获
                }

                const add_user = () => {
                    web.user += 1000;
                }

                return {
                    web,
                    toggle,
                    add_user
                }
            }
        }).mount("#app");
    
    </script>



</body>
</html>

我们可以通过控制台发现v-show和v-on的不同，在使用 v-if 时，还可以通过使用 v-else-if 和 v-else 指令来实现条件分支。

五、遍历指令 v-for

Vue.js 提供的一个用于遍历数组和对象的指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历指令</title>

    <style>
        .textColor{
            color: red;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- 遍历对象的值 -->
        <h4>遍历对象的值。</h4>
        <ul>
            <li v-for="value in data.user">
                {{ value }}
            </li>
        </ul>

      
        <h4>遍历对象的值和索引。 注意：写指令时，先值后索引</h4>
        <ul>
            <li v-for="(value, index) in data.number">
                {{ index }} : {{ value }}
            </li>
        </ul>
    

   
        <h4>遍历对象的值和键。 注意：写指令时，先值后键</h4>
        <ul>
            <li v-for="(value, key) in data.user">
                {{ key }} : {{ value }}
            </li>
        </ul>
    
        <h4>遍历对象的值，键和索引。 注意：写指令时，先值再键后索引</h4>
        <ul>
            <li v-for="(value, key, index) in data.user">
                {{ index }} : {{ key }} : {{ value }}
            </li>
        </ul>
    


        <h4>指令嵌套： 先用v-for指令遍历对象，然后展示符合v-if条件的节点</h4>
        <ul>
           
            
            <template v-for="(value, key, index) in data.user">
                <li v-if="index == 1">  
                    {{ index }} : {{ key }} : {{ value }}
                </li>           
            </template>
        </ul>
    
        
    </div>




    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
        setup() {
                const data = reactive({
                    //数组
                    number: ["十",  "十一",  "十二"], 
                    //对象
                    user: { name: "李雷",   gender: "女" }
                });

                return {
                    data
                }
            }
        }).mount("#app")
    </script>



</body>
</html>

遍历对象的值和索引。注意：写指令时，先值后索引

遍历对象的值和键。注意：写指令时，先值后键

遍历对象的值，键和索引。注意：写指令时，先值再键后索引

指令嵌套：先用v-for指令遍历对象，然后展示符合v-if条件的节点

<template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染

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

v-bind 指令用于动态绑定 HTML 属性和组件属性。通过 v-bind 指令，可以将 Vue 实例中的数据动态地绑定到 HTML 元素的属性上，从而实现数据的动态更新和响应式渲染。 v-bind 指令有一个常用的简写形式，即使用 : 前缀。例如， v-bind:href 可以简写为 :href。

<body>
    <div id="app">

        <h3>  iuput标签动态属性绑定    v-bind:value </h3>
        <input type="text" v-bind:value="web.str">
      </div>
 <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
    
        createApp({
            setup() {
                const web = reactive({
                    str: "w",
                    img: "./img_src/logo0.png",
                    fontStatus: false
                })

                const change = () => {
                    web.str += "w";
                    web.img=`./img_src/logo1.png`;
                    web.fontStatus = !web.fontStatus;
                }
    
                return {
                    web,
                    change
                }
            }
        }).mount("#app")
    </script>

我们可以看到通过v-bind单向绑定后，点击修改按钮，input框里面会被添加一个w（代码里写了个函“+w”）

img标签以及内嵌的css样式也可以绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点的动态属性(单向绑定)</title>

    <style>
        .textColor{
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">

        <h3>  iuput标签动态属性绑定    v-bind:value </h3>
        <input type="text" v-bind:value="web.str">
    
        <h3>  iuput标签动态属性绑定(简写形式)   :str </h3>
        <input type="text" :value="web.str">
    

        <h3>  img标签动态属性绑定(简写形式)    :src </h3>
        <img :src="web.img">
    

        <h3>  b标签动态属性绑定(简写形式)   :class</h3>
        <h4>  注：通过布尔值控制某个类名是否存在，进而控制对应的CSS样式是否被选中生效</h4>
        <b :class="{textColor:web.fontStatus}">广东云浮中医药职业学院</b>


        <br>
        <button @click="change">修改</button>
    </div>




    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
    
        createApp({
            setup() {
                const web = reactive({
                    str: "w",
                    img: "./img_src/logo0.png",
                    fontStatus: false
                })

                const change = () => {
                    web.str += "w";
                    web.img=`./img_src/logo1.png`;
                    web.fontStatus = !web.fontStatus;
                }
    
                return {
                    web,
                    change
                }
            }
        }).mount("#app")
    </script>



</body>
</html>

没点击前：

点击后：

可以看到直接将图片路径被修改以及css样式是直接给添加上去

在实际开发中，v-bind 指令广泛应用于动态绑定样式、动态绑定类名和动态绑定属性等场景。通过深入理解 v-bind 指令的作用和使用方法，开发者可以更好地应用 Vue.js 来构建高效、灵活的前端应用。

原文地址：https://blog.csdn.net/DZ_OP/article/details/144009207

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

Flink 任务启动脚本-V2（包括ck启动）
备注：由于Flink checkpoint 个别情况下，不一定能保证落地的checkpoint文件一定有效，所以需要人工介入支持。本次新增一个不从 ck 启动的选择，默认从最新 ck 启动，用法 s
阅读更多2024-11-29
UML的相关介绍
UML作为一种标准化的建模语言，在软件开发中扮演着重要的角色。通过一套丰富的图表和符号，UML为复杂系统的设计和分析提供了强大的支持。这种通用性和标准化使得UML成为各类软件项目中不可或缺的工具。
阅读更多2024-11-29
23种设计模式-外观(Facade)设计模式
软考中级-软件设计师外观模式
阅读更多2024-11-29
RabbitMQ学习-Four
昨天我们通过Linux命令，创建好了角色，那么我们就可以登录管理端的web页面，然后进行响应的操作；今天来学习一下RabbitMQ的具体的。
阅读更多2024-11-29
ftdi_sio应用学习笔记 5 - SPI
SPI的SCK/MOSI/MISO分别对应（A/B)D0/D1/D2，其他IO作为CS。和I2C一样，最大支持2路MPSSE通道，一路MPSSE最大13路SPI。定义spi设备的信息结构体。
阅读更多2024-11-29
＜＜WTF-Solidity＞＞学习笔记(part 5-8)
尤其是如果返回数据类型是变长的情况下，必须加memory修饰，例如：string, bytes, array和自定义结构。在不同存储类型相互赋值时候，有时会产生独立的副本（修改新变量不会影响原变量），
阅读更多2024-11-29
大数据实战之Zookeeper集群
zookeeper集群部署
阅读更多2024-11-29
word2vec
无监督训练模式 model 可选 'skipgram'(默认) or 'cbow'print(f'donkey的词向量类型是{type(result)}')print(f'donkey的词向量形状是{
阅读更多2024-11-29
vue element-ui的el-image 和 el-table冲突层级冲突问题问题preview-teleported
image-viewer 是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为。解决代码:preview-teleported。
阅读更多2024-11-29
CTF-RE 从0到N:Chacha20逆向实战 2024 强网杯青少年专项赛 EnterGame WP (END)
化简,因为i + j + a4 等价于 a4[i + j]直接定位到比较函数,在此处动态调试抽取s2的值。建立数组使用插件dump数组备用。无视换位直接动态调试在此句断下。
阅读更多2024-11-29