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

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

article 2024/11/26 11:26:55

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 来构建高效、灵活的前端应用。


http://www.kler.cn/a/409870.html

相关文章：

  • 机器学习与图像处理中上采样与下采样
  • 优化Docker镜像：提升部署效率与降低资源消耗
  • Swift 实现链表重新排列：L0 → Ln → L1 → Ln-1
  • wireshark使用lua解析自定义协议
  • Python爬取豆瓣电影全部分类数据并存入数据库
  • leetcode-24-两两交换链表中的节点
  • Linux网络——NAT/代理服务器
  • DAMODEL丹摩｜ 智谱清影 -CogVideoX-2b-部署与使用
  • 使用 Maven 构建一个简单的 Java 项目
  • C#水仙花
  • 请求响应(学习笔记)
  • 亚信安全发布《2024年第三季度网络安全威胁报告》
  • SPFA算法
  • STL(一)
  • C# Dictionary实现原理
  • 面向对象高级（9）包装
  • 什么是Portage-学习笔记
  • 学习threejs，使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱
  • Python Selenium介绍（一）
  • 深入解析Java面向对象编程：Object类、泛型、序列化与网络编程
  • 如何通过cPanel创建品牌电子邮件
  • H5流媒体播放器EasyPlayer.js网页直播/点播播放器如果H.265视频在播放器上播放不流畅，可以考虑的解决方案
  • JavaWeb——Ajax、Element、打包部署
  • 鱼眼相机模型-MEI
  • 24/11/25 视觉笔记 深度传感器和手势识别
  • Spring Boot英语知识网站：性能优化