首页 > 其他分享 >Vue入门

Vue入门

时间：2024-10-23 19:21:16浏览次数：7  
标签：Vue 入门 DOM data 元素 实例 数据

Vue入门

一、插值表达式

​ 插值表达式是一种Vue的模版语法

1、作用：

​ 利用表达式进行插值，渲染到页面

​ 表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

2、语法：

​ 该语法为：{{ 表达式 }}

<h3>{{ title }}</h3>
<p>{{ name.toUpperCase() }}</p>
<P>{{ age >= 18 ? '成年' : '未成年'}}</P>
<P>{{ obj.name }}</P>

3、注意点：

  • 使用的数据必须存在（先在data里面声明一下）
  • 支持的是表达式，而非语句，比如：if for……
  • 不能再标签属性中使用{{}}插值
<P title="{{ username }}">我是p标签 </P>

以上为错误示范

二、Vue的响应式

​ Vue 的响应式系统是其核心特性之一，允许数据的变化自动反映到视图中。这个机制使得开发者可以更加专注于业务逻辑，而不需要手动操作 DOM。响应式：数据变化，视图自动更新

响应式原理

  1. 数据劫持：
    • Vue 通过使用 Object.defineProperty（在 Vue 2 中）或 Proxy（在 Vue 3 中）对 JavaScript 对象的属性进行劫持。这样，当数据被读取或修改时，Vue 可以监听这些操作。
  2. 依赖收集：
    • 当组件渲染时，Vue 会记录哪些数据属性被使用。这个过程称为依赖收集。每当这些数据发生变化时，Vue 会通知依赖于这些数据的组件进行重新渲染。
  3. 派发更新：
    • 一旦数据发生变化，Vue 会触发相应的更新。更新的过程包括重新渲染组件并更新 DOM。
演示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门测试03</title>
</head>
<body>
    <div id="div01">
        <p>{{ meg }}</p>
        <p>{{ num }}</p>
        <!-- @click是Vue的事件指令的简写形式，等同于v-on:click -->
        <button @click="updatemeg">更新消息</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    const a = new Vue({
        el: '#div01',
        data: {
            meg: 'Hello Vue!',
            num: 19,
            sum: 10086
        },
        methods: {
            updatemeg() {
                this.meg = '消息已更新！';
            }
        }
    })
</script>
</html>

在这里插入图片描述

点击按钮：

在这里插入图片描述

可以通过控制台访问数据和修改数据：

  1. 访问数据：“实例.属性名”
  2. 修改数据：“实例.属性名” = “值”

可以进行一下操作：

在这里插入图片描述

使用Vue开发——专注于业务核心逻辑即可

三、Vue指令

Vue会根据不同的指令，针对标签实现不同的功能

**指令：**带有v- 前缀的特殊标签属性

1、v-html指令

解析html格式，插值表达式不能解析html格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门测试04</title>
</head>
<body>
    <div id="div01">
        <div v-html="mas"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    const a = new Vue({
        el: '#div01',
        data: {
            mas: 
                '<a href="https://juejin.cn/" target="_blank">稀土掘金</a> '
        }
    })
</script>
</html>

在这里插入图片描述

2、v-bind指令

为HTML标签绑定属性值，如设置href,css样式等

示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门测试05</title>
    <script src="js/vue.js"></script>
    <style>
        .cls {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="div01">
        <a v-bind:href = "mes">稀土掘金</a>
        <p><a :href="mes">稀土</a></p>
        <p :style="headst">博客园</p>
        <button @click="toog()">加深</button>
        <p v-bind:class="{ cls: act }">up day!</p>
    </div>
</body>
<script>
    const a = new Vue({
        el: '#div01',
        data: {
            mes: 'https://juejin.cn/',
            act: false,
            headst: {
                color: 'blue',
                fontSize: '20px'
            }
        },
            methods: {
                toog() {
                    this.act = !this.act;
                }
            }
        
    })
</script>
</html>

在这里插入图片描述

3、v-model指令

在表单元素上创建双向数据绑定

工作原理
  1. 双向绑定: v-model 实现了数据与视图之间的双向绑定。这意味着：
    • 当用户在表单元素中输入数据时，Vue 实例中的数据会自动更新。
    • 当 Vue 实例中的数据发生变化时，表单元素的显示内容也会随之更新。
  2. 支持的元素: v-model 可以用于多种表单元素，包括：
    • <input>（文本框、复选框、单选框等）
    • <textarea>
    • <select>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门测试06</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="div01">
        <a v-bind:href="temp">点击</a>
        <input type="text" v-model="temp">
        <p>
            <input type="text" placeholder="请输入一些内容" v-model="pase">
        </p>
        <p>你输入的内容是{{pase}}</p>
    </div>
</body>
<script>
    const a = new Vue({
        el: '#div01',
        data: {
            temp: 'https://juejin.cn/',
            pase: ""
        }
    })
</script>
</html>

在这里插入图片描述

4、v-on指令

为HTML标签绑定事件——处理单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门测试07</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="div01">
        <input type="button" v-on:click="click01()" value="按钮1">
        <input type="button" @click="click02()" value="按钮2">
    </div>
</body>
<script>
    const a = new Vue({
        el: "#div01",
        data: {

        },
        methods: {
            click01() {
                alert("按钮1被点击了");
            },
            click02() {
                alert("按钮2被点击了")
            }
        }
    })
</script>
</html>

在这里插入图片描述

5、v-if与v-show

v-if

条件性的渲染某元素，判定为true时渲染，否则不渲染

  • 功能: v-if 根据表达式的真假动态地添加或移除 DOM 元素。
  • DOM 操作: 如果条件为 false，相关的 DOM 元素会被完全销毁；如果条件变为 true，则会重新创建。
  • 性能: 由于涉及 DOM 的添加和删除，v-if 的性能开销较大，适合用于条件不频繁变化的场景。
v-show

根据条件展示某元素，区别在于切换的是display属性的值

  • 功能: v-show 根据表达式的真假来控制元素的显示和隐藏，但不会移除或添加 DOM 元素。
  • DOM 操作: 当条件为 false 时，元素的 display 样式被设置为 none，而条件为 true 时元素会显示。
  • 性能: 由于不涉及 DOM 的添加和删除，v-show 更高效，适合用于频繁切换显示与隐藏的场景。
主要区别
特性v-ifv-show
DOM 操作元素会被添加或移除元素始终存在，但显示或隐藏
性能开销较高（适合不频繁切换的情况）较低（适合频繁切换的情况）
使用场景适合条件不频繁变化的情况适合需要频繁切换显示和隐藏的情况
总结
  • 使用 v-if 时，适合处理复杂的条件逻辑，尤其是在不需要频繁切换显示的场景。
  • 使用 v-show 时，适合需要频繁显示和隐藏的元素，能够提供更好的性能。选择哪个指令取决于具体的使用场景和性能需求。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门测试08</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="div01">
        <input type="text" placeholder="请输入年龄" v-model="age">
        <span v-if=" age < 30">年轻人</span>
        <span v-else-if="age >= 30 && age < 60">中年人</span>
        <span v-else>老年人</span>

        <br><br>

        <input type="text" placeholder="请输入年龄" v-model="age02">
        <span v-show="age02 < 30">年轻人</span>
        <span v-show="age02 >= 30 && age02 < 60">中年人</span>
        <span v-show="age02 >= 60">老年人</span>
    </div>
</body>
<script>
    const a = new Vue({
        el: "#div01",
        data: {
            age: 20,
            age02: 30,
        }
    })
</script>
</html>

在这里插入图片描述

5、v-for指令

v-for 是 Vue.js 中用于列表渲染的指令。它允许你通过遍历数组或对象来动态生成元素，从而高效地渲染列表。

基本用法

v-for 的基本语法是：

v-for="(item, index) in items"
  • item: 当前循环项的变量名。
  • index: 当前项的索引（可选）。
  • items: 要遍历的数组或对象。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门测试09</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="div01">
        <div v-for="addr in addrs">{{ addr }}</div>

        <hr>

        <div v-for="(addr, i) in addrs">{{ i + 1 }} : {{ addr }}</div>
    </div>
</body>
<script>
    const a = new Vue({
        el: "#div01",
        data: {
            addrs: ['北京', '上海', '广州', '深圳', '成都', '杭州'],
        }
    })
</script>
</html>

在这里插入图片描述

四、通过Vue完成表格数据的渲染展示

<!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="js/vue.js"></script>
</head>
<body>
    <div id="div01">
        <table border="1px" cellspacing="0" width="75%">
            <caption>学生成绩单</caption>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>成绩</th>
                    <th>等级</th>
                </tr>
            </thead>
            <tbody>
                <tr align="center" v-for="(user,i) in users">
                    <td>{{ i + 1 }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.age }}</td>
                    <td v-show="user.gender == 1">男</td>
                    <td v-show="user.gender == 2">女</td>
                    <td>{{ user.score }}</td>
                    <td v-if="user.score < 60"><span style="color: red">不及格</span></td>
                    <td v-else-if="user.score < 85">及格</td>
                    <td v-else>及格</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    const a = new Vue({
        el: '#div01',
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        }
    })
</script>
</html>

在这里插入图片描述

五、Vue的生命周期

​ Vue.js 的生命周期指的是 Vue 实例从创建到销毁的整个过程。每个 Vue 实例在其生命周期内会经历一系列的阶段，每个阶段都有特定的生命周期钩子（Lifecycle Hooks），可以在这些钩子中执行特定的代码。这些生命周期钩子允许你在实例的不同阶段执行操作，例如初始化数据、挂载 DOM、更新和销毁实例等。

  • 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

生命周期阶段

  1. 创建阶段
    • beforeCreate: 实例刚被创建，数据观测和事件配置尚未开始。
    • created: 实例已创建，数据观测和事件配置完成，但 DOM 还未挂载。
  2. 挂载阶段
    • beforeMount: 在挂载开始之前调用，此时模板已编译为虚拟 DOM。
    • mounted: 实例已挂载到 DOM 上，适合进行 DOM 操作和发起网络请求。
  3. 更新阶段
    • beforeUpdate: 数据变化导致虚拟 DOM 重新渲染之前调用。
    • updated: 由于数据变化，虚拟 DOM 已重新渲染并应用到 DOM。
  4. 销毁阶段
    • beforeDestroy: 实例销毁之前调用，此时可以进行清理操作。
    • destroyed: 实例已销毁，所有的事件监听和子实例均已被移除。

主要的钩子：

  • mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

示例：

<!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="js/vue.js"></script>
</head>
<body>
    <div id="div01">

    </div>
</body>
<script>
    const a = new Vue({
        el: '#div01',
        data() {
            return {
                
            }
        },
        methods: {

        },
        mounted(){
            alert("Vue挂载完毕，发送请求获取数据");
        }
    })
</script>
</html>

在这里插入图片描述

标签：Vue,入门,DOM,data,元素,实例,数据
From： https://blog.csdn.net/2302_81034736/article/details/143191754

相关文章

  • 玩转vulnhub靶场（非常详细），零基础入门到精通，看这一篇就够了
    前言vulnhub是我们学习网络安全最常用的靶场之一。难易度适中，内容全面。是我们学习的不二选择。本文让我们一起学习吧！声明：本文旨在网络安全学习和研究，坚决反对一切危害网络安全的行为。请务必遵守相关法律法规。下载靶场我们需要登录vulnhub官网对用的靶场。如上，涉及......
  • 了解网络安全（黑灰产）黑话（非常详细），零基础入门到精通，看这一篇就够了
    前言网络安全黑话大多集中在黑灰产行业，为了逃避网络监管逐渐形成了行业黑话。我接触黑话大概有两个用途：1、黑灰产情报解读：公司体量也不小经常被薅羊毛，SRC开放了情报提供积分，所以对于白帽子提供的情报，通过掌握的黑话去了解情况。2、和黑灰产沟通：应该有人有相似经历，作为买家......
  • hydra安装（非常详细），零基础入门到精通，看这一篇就够了
    前言安装Hydra1.安装必要的依赖库在终端中执行以下命令，安装Hydra所需的依赖库：sudoapt-getinstallbuild-essentialcheckinstalllibssl-devlibssh-devlibidn11-devlibpcre3-devlibgtk2.0-devlibmysqlclient-devlibpq-devlibsvn-devfirebird-devlibmemcache......
  • 明解c语言入门篇练习4-2do语句延伸
    明解c语言练习4-2我们可以看到题目:编写一段程序，像右面这样读取两个整数的值，然后计算出他们之间所有整数的和。上次我发了一段这个练习4-2的代码可以看一下#include<stdio.h>intmain(void){  inta,b,max,min;  intsum=0;  printf("请输入两个整数:......
  • 《Python游戏编程入门》注-第3章2
    《Python游戏编程入门》的“3.2.2获取用户输入”部分介绍了input()函数的用法；“3.2.3异常处理”部分介绍了try...except语句的用法。1input()函数的用法input()函数用于接受用户的输入，该函数的参数可以在等待用户输入之前显示文本。该函数主要有两种用法：第一个是将当前程......
  • 《Python游戏编程入门》注-第3章1
    《Python游戏编程入门》的第三章是“I/O、数据和字体：Trivia游戏”，介绍了print()函数、input()函数、异常处理以及文件的输入输出，最后根据以上内容完成了Trivia游戏。本章的“3.1了解Trivia游戏”介绍了Trivia游戏的界面和玩法。“3.2Python数据类型”中讲解了print()函数、i......
  • java基于springboot的中药材进存销管理系统(源码+vue+部署文档+前后端分离等)
    收藏关注不迷路！！......
  • nodejs基于Vue的二手交易系统(源码+vue+部署文档+前后端分离等)
    收藏关注不迷路！！......
  • vue3使用踩坑总结
    1、使用reactive定义的对象定义对象时，后面由于页面需求需要，把这个对象设置为空对象，如果直接把变量设置{}会导致响应式失效！state=reactive({})由于后面业务需求需要把State设置为空对象state={}正常的做法是这样，这个时候就会出现响应式丢失问题！注：在实际应用中，你应该避免直......
  • PDManer 入门教程：超强代码生成工具！
    操作手册说明：https://www.yuque.com/pdmaner/docs/pdmaner-manual下载地址说明：https://gitee.com/robergroup/pdmaner/releases开源博客介绍说明：4.0最新版说明https://my.oschina.net/skymozn/blog/5515012PDman2.2.0下载地址：http://www.downza.cn/soft/278049.htmlPD......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99