Vue基础学习 -- Vue数据与方法 v-指令补充 vue生命周期

news2024/11/24 16:20:09

Vue数据与方法

实例化Vue对象时,需要在data中定义数据,data选项是一个函数,它应该返回一个对象,然后Vue通过响应性系统将其包裹起来,并以$data形式储存在实例中。为了方便起见,该归降的任何顶级property可直接通过组件实例暴露出来。

例子:data数据的绑定与显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">{{num}}</div>
    <script>
        const app = {
            data() {
                return {
                    num: 10
                }
            }
        }

        const vm = Vue.creatApp(app).mount("#app")
        console.log("vm.$data.num:" + vm.$data.num)
        console.log("vm.num:" + vm.num)
    </script>
</body>

</html>

在这里插入图片描述

v-model指令常用的三个修饰符

1、.lazy修饰符
在默认情况下,v-model指令在每次input事件触发后会将输入框的值与数据进行同步,
如果为v-model指令添加.lazy修饰符:
代码如下:

<body>
    <div id="app">
        <input type="text" v-model.lazy="text">
        {{text}}


    </div>
    <script>


        const vm = new Vue({

            el: "#app",
            data: {
                text: "这是我自学的第一个vue"
            },

        })



    </script>
</body>

这样子的话,实时同步就会变成失去焦点同步,也就是说,这时在文本框中输入字符时,左侧又侧text的值不会即时改变,要等光标移到文本框外面或者按下回车键才同步改变。

2、.number 修饰符
如果想将用户的输入值自动转换为数值类型,可以给v-model 指令添加.number 修饰符。


<body>
    <div id="app">
        <input type="text" v-model.number="num1">
        <input type="text " v-model.number="num2">
        {{num1+num2}}


    </div>
    <script>
        const vm = new Vue({

            el: "#app",
            data: {
                num1: 12,
                num2: 13
            },

        })

    </script>
</body>

在这里插入图片描述

如果没有.number修饰符,那么右侧的数字就会变成两个字符串的拼接而不会实现求和。

3、.trim 修饰符
如果要自动过滤用户在首尾输入的空白字符,可以给v-model 指令添加.trim修饰符。

在这里插入图片描述

在图中的文本框前后分别加上不等数量的空格,但是vm.text属性的值是没有空格的,这就是.trim的作用。

v-cloak指令

{{}}模板语法有一个缺点:可能会出现闪烁问题,即页面数据可能还没加载渲染完成,就提前出现了两对{} 。实际应用中可能就是Vue实例中的data数据。例如,通过发送异步请求获取来自网络服务器的数据,由于网络或者数据量大,需要一定的时间,这个时候Vue中的data尚没有数据,就不会去渲染view,那么在View中会提前看到类似{{text}}的情况,这给用户的体验很不好,所以在数据尚未加载渲染完成时不要让类似{{text}} 的效果出现,那么如何解决呢?

答:我们可以使用v-cloak指令来解决这个问题

使用v-cloak指令需要配合css样式一起使用,否则不会生效。通过css样式先设置为不显示,在数据渲染完成之后就会自动修改display值为显示。

例子:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none
        }
    </style>
</head>

<body>
    <div id="app">
        <h3 v-cloak>{{text}}</h3>


    </div>
    <script>
        const vm = new Vue({

            el: "#app",
            data: {
                text: "我想学vue学细一点"
            },
            created: function () {
                alert("Vue实例刚创建,页面尚未渲染数据")
            }

        })

    </script>
</body>

</html>

在数据尚未渲染完毕时看不到{{text}}。这里通过运行生命周钩子函数created来测试尚未u渲染的效果。

v-if指令

1、单分支
单分支只有一个v-if指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="flag">
            Yes
        </div>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                flag: true
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

当flag为flase时DOM元素会销毁,当为true时又会重新创建。

2、多分支
多分支除了有v-if,还有v-else或v-else-if 等指令的组合。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="grade>=90">优秀</div>
        <div v-if="grade>=70">中等</div>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                grade: 70
            }
        })
    </script>
</body>

</html>

Vue生命周期

vue生命周期就是指Vue实例从创建到消亡的过程。在这个过程中有不同的时期,开发者可以用对应的生命周期钩子函数在合适的时期上执行相应的代码。

在这里插入图片描述
在这里插入图片描述

生命周期钩子函数

Vue实例中几个主要的生命周期钩子函数说明如下。
before Create,在Vue实例开始初始化时调用。
.created,在实例创建之后进行调用,此时尚未开始DOM编译。
.before Mount Vue ,在Vue实例挂载之前,render函数首次被调时。
.mount Vue , 实例挂载到DOM节点上之后进行调用,相当于Javascript中的window.onload()方法
.before Update,当数据变化发生变化时,在虚拟DON状态变化之前。

.updated,虚拟DOM被重新渲染之后调用。
.before Unmont ,实例销毁之前,Vue实例依然可用。
.unmounted Vue ,实例销毁之后,Vue实例及其子实例将完全解绑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/392056.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【蓝桥杯刷题】盗版Huybery系列之手抓饼赛马

【蓝桥杯刷题】—— 盗版Huybery系列之手抓饼赛马&#x1f60e;&#x1f60e;&#x1f60e; 目录 &#x1f4a1;前言&#x1f31e;&#xff1a; &#x1f49b;盗版Huybery系列之手抓饼赛马题目&#x1f49b; &#x1f4aa; 解题思路的分享&#x1f4aa; &#x1f60a;题…

计算机SCI期刊投稿,除了投稿信,还要做什么准备? - 易智编译EaseEditing

投稿信的准备 期刊的编辑往往需要一些有关作者及其论文的信息。 而作者也希望给编辑提供一些有助于其全文送审及决策的信息。 这些信息都应该包括在投稿信中。 投稿信应包括以下几方面的内容&#xff1a; 文题和所有作者的姓名;稿件适宜的栏目; 为什么此论文适合于在该刊而…

大数据框架之Hive:第2章 Hive安装

第2章 Hive安装 2.1 Hive安装地址 1&#xff09;Hive官网地址 http://hive.apache.org/ 2&#xff09;文档查看地址 https://cwiki.apache.org/confluence/display/Hive/GettingStarted 3&#xff09;下载地址 http://archive.apache.org/dist/hive/ 4&#xff09;gith…

OpenCV入门(四)快速学会OpenCV3画基本图形

OpenCV入门&#xff08;四&#xff09;快速学会OpenCV3画基本图形 1.画点 在OpenCV中&#xff0c;点分为2D平面中的点和3D平面中的点&#xff0c;区别就是3D中点多了一个z坐标。我们首先介绍2D中的点&#xff0c;坐标为整数的点可以直接用(x, y)代替&#xff0c;其中x是横坐标…

快速幂----快速求解底数的n次幂

目录 一.快速幂 1.问题的引入 2.快速幂的介绍 3.核心思想 4.代码实现 2.猴子碰撞的方法数 1.题目描述 2.问题分析 3.代码实现 一.快速幂 1.问题的引入 问题:求解num的n次幂,结果需要求余7 对于这个问题我们可能就是直接调用函数pow(a,b)来直接求解a的b次幂问题,但是如果…

灵巧手抓持<分类><仿真>

获取灵巧手抓取物体时的抓持类型&#xff0c;需要考虑&#xff1a;手本身的结构、被抓取物体的形状尺寸、抓持操作任务的条件。 研究方法&#xff1a;基于模型的方法、基于数据驱动的方法 基于模型的方法&#xff1a;建立灵巧手抓持相关的运动学和动力学模型建立目标函数求解…

【操作系统】进程和线程的区别

文章目录1. 概述2. 进程3. 线程4. 协程5. 进程与线程区别1. 概述 进程和线程这两个名词天天听&#xff0c;但是对于它们的含义和关系其实还有点懵的&#xff0c;其实除了进程和线程&#xff0c;还存在一个协程&#xff0c;它们的关系如下&#xff1a; 首先&#xff0c;我们需要…

C++基础——Ubuntu下编写C++环境配置总结(C++基本简介、Ubuntu环境配置、编写简单C++例程)

【系列专栏】&#xff1a;博主结合工作实践输出的&#xff0c;解决实际问题的专栏&#xff0c;朋友们看过来&#xff01; 《QT开发实战》 《嵌入式通用开发实战》 《从0到1学习嵌入式Linux开发》 《Android开发实战》 《实用硬件方案设计》 长期持续带来更多案例与技术文章分享…

优思学院|质量管理简史:从质检到质控,到六西格玛管理

在现代的工业化生产中&#xff0c;质量管理已成为企业生产运营的不可或缺的一部分。经过长时间的探索和实践&#xff0c;质量管理的理论和实践已经逐步成熟&#xff0c;并形成了完整的体系。下面&#xff0c;我将简要介绍一下质量管理学的发展历程。 质量管理的萌芽期&#xff…

socket聊天室--socket的建立

socket聊天室–socket实现 文章目录 socket聊天室--socket实现socket()bind()listen()accept()connect()发送接收read()函数recv()函数write()函数send()函数close()关闭套接字IP 地址格式转换函数socket() #include <sys/types

web餐饮开源程序

简介 一款专门针对餐饮行业而开发桌面应用程序 技术 借助Panuon.UI.Silver控件库&#xff0c;开发的一款餐饮软件。 运行环境&#xff1a;.NETFramework,Versionv4.8。 运行数据库&#xff1a;MySql。 ORM框架&#xff1a;SqlSugar。 第三方插件&#xff1a;Panuon.UI.Silv…

OpenKruise 开发者不容错过的带薪实习机会!马上加入 LFX Mentorship 计划

LFX Mentorship 计划由 Linux Foundation 组织发起&#xff0c;为像 OpenKruise 这样的 CNCF 托管项目提供了激励开源贡献、扶植社区发展的优秀土壤。参与其中的开发者不仅有机会在经验丰富的社区 Mentor 指导下贡献开源项目、为职业生涯加分&#xff0c;完成工作后还能获得 $3…

【JAVA】Java中集合的遍历

&#x1f3c6;今日学习目标&#xff1a;集合遍历 &#x1f603;创作者&#xff1a;颜颜yan_ ✨个人主页&#xff1a;颜颜yan_的个人主页 ⏰本期期数&#xff1a;第五期 &#x1f389;专栏系列&#xff1a;JAVA 集合遍历前言一、Iterator接口二、foreach循环总结前言 在实际开发…

JavaScript基础二、变量

零、文章目录 文章地址 个人博客-CSDN地址&#xff1a;https://blog.csdn.net/liyou123456789个人博客-GiteePages&#xff1a;https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee&#xff1a;https://gitee.com/bluecusliyou/TechLearnGithub&#xff1a;https:…

UE4 材质学习 (焚烧材质)

效果步骤随便从网上下载一张图片&#xff08;地址&#xff1a;链接/链接&#xff09;&#xff0c;导入UE中新建一个材质函数这里命名为“E_Function”双击打开该材质函数&#xff0c;由于需要输出变发光和变透明两种效果&#xff0c;因此这里需要两个输出节点&#xff1a;分别命…

MIPI协议

MIPI调试指南Rev.0.1 June 18, 2019 © 2018 Horizon Robotics. All rights reserved.Revision HistoryThissection tracks the significant documentation changes that occur fromrelease-to-release. The following table lists the technical content changes foreach …

RK3568平台开发系列讲解(显示篇)framebuffer屏幕显示

🚀返回专栏总目录 文章目录 一、FrameBuffer介绍二、FrameBuffer应用程序沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将介绍如何通过framebuffer进行显示。 一、FrameBuffer介绍 FrameBuffer中文译名为帧缓冲驱动,它是出现在2.2.xx内核中的一种驱动程序接口…

飞沃科技上市,张友君还缺颗“螺丝”

文丨熔财经作者|余一去年7月&#xff0c;湖南飞沃新能源科技股份有限公司(下称&#xff1a;飞沃科技)首发过会&#xff0c;至今7个多过去了&#xff0c;若是按照2022年以来整体IPO排队时长来计算&#xff0c;飞沃科技已经来到了临近上市的关键节点。资料显示&#xff0c;近年来…

测开:前端基础-css页面布局-定位

一 、传统网页布局的三种方式 网页布局的本质–用CSS来摆放盒子&#xff0c;把盒子摆放到相应的位置&#xff0c;css提供了三种传统布局方式&#xff0c;分别是标准流&#xff0c;浮动和定位三种。 二、 定位 2.1 啥是定位 我的理解&#xff0c;就是要把这个元素&#xff0c…

一文掌握组织项目等级划分维度,标准和实例

当你遇到多项目怎么管&#xff1f;遇到项目之间的冲突怎么解决&#xff1f;很多公司没有项目优先级的划分&#xff0c;会对企业造成很多严重的问题。首先&#xff0c;会造成不合理的资源分配&#xff1a;缺少项目优先级的情况下&#xff0c;很难确定哪些项目是最重要的&#xf…