Vue框架学习篇(五)

news2025/6/9 18:43:46

Vue框架学习篇(五)

1 组件

1.1 组件的基本使用

1.1.1 基本流程

a 引入外部vue组件必须要的js文件
<script src="../js/httpVueLoader.js"></script>
b 创建.vue文件
<template>
      <!--公共模板内容-->
 </template>
 <script>
     <!--事件绑定的书写位置-->
 </script>
 <style>
     <!--样式文件的书写位置-->
</style>
c 引入外部组件,并给其取名
//这里的相对地址的是以当前html文件为基准的，组件名称不要和标签名冲突了哦
var 组件名=httpVueLoader(组件相对路径地址);
d 注册组件
//这里的组件名和c步骤的组件名是同一个
Vue.component('key值(使用时的标签名)',组件名)

1.1.2 示例代码

a header.vue代码
<template>
    <header>
       <h3>组件基本功能测试</h3>
    </header>
 </template>
 <script>
 </script>
 <style>
    header{
    color:red;
    border:1px solid blue;
    }
</style>
b 页面代码
<!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>组件的基本使用</title>
    <script src="../js/vue.js"></script>
    <!-- ①引入外部vue组件必须要的js文件-->
    <script src="../js/httpVueLoader.js"></script>
</head>
<body>
    <div id="app">
        <tou></tou>
        <div>这里是中间部分的内容</div>
    </div>
    <script>
        //②引入外部vue组件
        var tou=httpVueLoader("../vue/header.vue");
        //③ 注册组件
        Vue.component('tou',tou);
        new Vue({
            el:"#app",
        })
    </script>
</body>
</html>

1.1.3 运行效果

在这里插入图片描述

1.2 组件的绑定事件

1.2.1 使用方法

//在.vue文件的script标签里面写如下代码
module.exports={
 methods:{
     方法名(){
         //方法体执行内容
     }
 }
}

1.2.2 示例代码

a bangding.vue文件
<template>
    <header>
       <button @click="t()">点击触发弹窗效果</button>
    </header>
 </template>
 <script>
   module.exports={
      methods:{
         t(){
            alert('测试组件中事件的绑定');
         }
      }
  }
 </script>
 <style>
    header{
    color:red;
    border:1px solid blue;
    }
</style>
b 页面文件
<!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>测试绑定事件</title>
    <script src="../js/vue.js"></script>
    <!-- ①引入外部vue组件必须要的js文件-->
    <script src="../js/httpVueLoader.js"></script>
</head>
<body>
    <div id="app">
        <tou></tou>
        <div>测试绑定事件</div>
    </div>
    <script>
        //②引入外部vue组件
        var tou=httpVueLoader("../vue/bangding.vue");
        //③ 注册组件
        Vue.component('tou',tou);
        new Vue({
            el:"#app",
        })
    </script>
</body>
</html>

1.2.3 运行截图

在这里插入图片描述

1.3 父组件往子组件传值

1.3.1 使用方法

//① 在.vue文件里面写入如下代码
module.exports={
        props:[传递参数名1,传递参数名2...传递参数名n],
}
//②在vue文件中使用,是通过{{传递参数名}} 来使用(templates标签里面)
//③在页面文件中,通过:传递参数名="data里面的数据所对应的key值"的方式进行传值(可以联想到之前的:title)
<组件所使用的标签名 :参数名字="数据所对应的key"></组件所使用的标签名>

1.3.2 示例代码

a transmitValue.vue文件
<template>
    <footer>
       <h3>得到外部传入的参数 {{r}}-----{{m}}</h3>
    </footer>
</template>
<script>
    module.exports={
        props:['r','m'],
    }
</script>
<style> 
    footer{
    color:orangered;
    border:1px solid blue;
    }
</style>
b 页面文件
<!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>测试绑定事件</title>
    <script src="../js/vue.js"></script>
    <!-- ①引入外部vue组件必须要的js文件-->
    <script src="../js/httpVueLoader.js"></script>
</head>
<body>
    <div id="app">
        <div>测试绑定事件</div>
        <wei :r="className1" :m="className2"></wei>
    </div>
    <script>
        //②引入外部vue组件
        var wei=httpVueLoader("../vue/transmitValue.vue");
        //③ 注册组件
        Vue.component('wei',wei);
        new Vue({
            el:"#app",
            data:{
                className1:'HTML',
                className2:'JAVA',
            }
        })
    </script>
</body>
</html>

1.3.3 运行截图

在这里插入图片描述

2 Vue的生命周期

2.1 创建

2.1.1 组件实例创建之初

a 对应的方法
beforeCreate() {       
}
b 表现形式
el元素不存在,data和methods里面的数据还没有初始化

2.1.2 组件实例已经完全创建

a 对应的方法
created() {
}
b 表现形式
el元素不存在
data和methods里面的数据已经初始化好了

2.2 挂载

2.2.1 挂载前

a 对应的方法
beforeMount() {
      
},
b 表现形式
el元素存在,data和methods里面的数据已经有数据了
模板在内存中已经编译好了,但尚未挂载到页面中

2.2.2 挂载后

a 对应的方法
mounted() {
}
b 表现形式
el元素存在,data和methods里面的数据已经有数据了
页面已经被渲染成功了,此时进入运行状态
一般在这个方法里面写异步提交

2.3 修改

2.3.1 修改前

a 对应的方法
beforeUpdate() {
        
},
b 表现形式
组件数据更新前使用
页面数据为旧,但得到的data数据是最新的

2.3.2 修改后

a 对应的方法
updated() {
}
b 表现形式
组件数据更新以后,页面和data数据都是最新的(已经同步完成)

2.4 销毁

2.4.1 销毁前

a 对应的方法
 beforeDestroy() {
 }
b 表现形式
组件销毁前调用,vue实例从运行阶段进入到销毁阶段
但此时vue实例上的所有东西都是可以用的

2.4.2 销毁后

a 对应的方法
destroyed() {
}
b 表现形式
组件销毁后调用,vue实例上的所有东西都不可以用了

2.5 测试

2.5,1 测试代码

<!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">
    <!-- 生命周期需要记一下 -->
    <script src="../js/vue.js"></script>
    <title>Vue的生命周期</title>
</head>
<body>
     <div id="app">
        年龄{{age}}
        <button @click="age=30">修改年龄</button>
     </div>
     <script>
         var v=new Vue({
            el:'#app',
            data:{
               age:20
            },
            beforeCreate() {
                //el,data部分没有用
                //获取el这个对象
                console.log('beforeCreate----EL元素'+this.$el+'数据:'+this.age);
                
            },
            created() {
                //date methods都有了,最早可以在这里面设置数据
                console.log('created---EL元素'+this.$el+'数据:'+this.age);
            },
            beforeMount() {
                console.log('beforeMount---EL元素'+this.$el+'数据:'+this.age);
            },
            mounted() {
               //数据初始话了也渲染上去了 el和data都有
               console.log('mounted--EL元素'+this.$el+'数据:'+this.age);
            //    console.log('EL元素'+this.$el);
            },
            beforeUpdate() {
                console.log('beforeUpdae--EL元素'+this.$el+'数据:'+this.age);
            },
            updated() {
                console.log('updated--EL元素'+this.$el+'数据:'+this.age);
            },
            beforeDestroy() {
                console.log('beforeDestory--EL元素'+this.$el+'数据:'+this.age);
            },
            destroyed() {
                console.log('destroyed--EL元素'+this.$el+'数据:'+this.age);
            },
         })
     </script>
</body>
</html>

2.5.2 运行截图

a 初次进入页面时

在这里插入图片描述

b 变更age值后

在这里插入图片描述

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

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

相关文章

LaoCat带你认识容器与镜像（实践篇二上）

LaoCat带你认识容器与镜像（实践篇二上）

实践篇主要以各容器的挂载和附加命令为主。 本章内容 本文实操全部基于Ubuntu 20.04 宿主机 > linux服务器本身 Docker > 20.10.22 在开始本章内容之前&#xff0c;我解答一个问题&#xff0c;有小伙伴问我说&#xff0c;有的容器DockerHub官网并没有提供任何可参考的文…
阅读更多...
可信AI年度观察 | 智能语音产业需求不断升级，评测重点由技术转向产品

可信AI年度观察 | 智能语音产业需求不断升级，评测重点由技术转向产品

自《新一代人工智能发展规划》发布以来&#xff0c;人工智能发展已上升为国家战略&#xff0c;在“十四五”规划中&#xff0c;更是将人工智能列为科技前沿领域的“最高优先级”&#xff0c;国家政策支持为人工智能产业发展提供良好环境。同时&#xff0c;各行业逐渐重视改善价…
阅读更多...
ChatGPT 支持的搜索引擎 Bing 究竟什么样？

ChatGPT 支持的搜索引擎 Bing 究竟什么样？

微软于2月8日北京时间凌晨在 Redmond 线下举办一场媒体活动&#xff0c;围绕微软的产品以及 AI&#xff0c;公布最新消息。这里我们先回顾一下微软在 AI 上的布局。 2019年&#xff0c;微软向 OpenAI 投资10亿美元&#xff0c;成为了 OpenAI 紧密的合作伙伴&#xff0c;而微软…
阅读更多...
Git学习笔记-详细使用教程

Git学习笔记-详细使用教程

一、定义 Git&#xff08;读音为/gɪt/&#xff09;是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的。 二、Git与SVN的最主要的区别&#xff1f; SVN是集中式版本控制系统&#xff0c;版本库是集中放在中央服务器的&#xff0c;而干活的时…
阅读更多...
分享：提升你工作幸福感的11个工具软件！

分享：提升你工作幸福感的11个工具软件！

今天给大家分享11个非常好用的资源、工具网站。不论你是做运营、设计&#xff0c;还是个人生活中的应用&#xff0c;甚至只是提升你在线冲浪的快乐感&#xff0c;你都值得拥有它们。 1&#xff0c;在线一键抠图 https://www.remove.bg/ 免费的软件&#xff0c;自动抠图&…
阅读更多...
【官方 | 计算机二级Python教程】第八章：Python计算生态

【官方 | 计算机二级Python教程】第八章：Python计算生态

【官方 | 计算机二级Python教程】第八章&#xff1a;Python计算生态参考书目第八章&#xff1a;Python计算生态本章知识导图8.1 计算思维8.2 程序设计方法论8.3 计算生态与生态式编程8.4 基本的Python内置函数习题本文代码编译环境及版本更新日志参考书目 拜读的是计算机等级考…
阅读更多...
mysql安装指定版本详细教程mysql 8.0.28示例

mysql安装指定版本详细教程mysql 8.0.28示例

之前出过一版安装mysql5.7和安装mysql8.x最新版本的文档今天根据需求出一版指定版本的安装教程以8.0.28为例https://dev.mysql.com/downloads/mysql/ 下载mysql的官网下载好后上传到服务器安装时会报错公钥URL错误rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022 …
阅读更多...
Python中关于@修饰符、yeild关键词、next（）函数的基本功能简述

Python中关于@修饰符、yeild关键词、next（）函数的基本功能简述

关于修饰符&#xff1a;其实就是将修饰符下面的函数当成参数传给它上面的函数。 def a(x):print(a)adef b():print(b) 其效果等价为&#xff1a; def a(x):print(a)def b():print(b)a(b())有个记忆诀窍&#xff0c;的下面哪个函数最近&#xff0c;谁就是儿子&#xff0c;谁就…
阅读更多...
Windows环境下使用MySQL:实现自动定时备份

Windows环境下使用MySQL:实现自动定时备份

一、编写备份脚本 1 2 3 4 5 6 7 8 9 rem auther:www.yumi-info.com rem date:20230209 rem ******MySQL backup start******** echo off forfiles /p "E:\mysql\MySQL BackUp" /m backup_*.sql -d -30 /c "cmd /c del /f path" set "Ymd%date:~0,4%…
阅读更多...
[SSD固态硬盘技术 7] 固件概述和固件升级

[SSD固态硬盘技术 7] 固件概述和固件升级

固件英文叫Firmware&#xff0c;就是“固化在硬件中的软件”&#xff0c;不太恰当但是毕竟好理解的就是&#xff1a;固件就是硬盘的操作系统。固件Firmware是安装在硬盘的一个小记忆芯片上的&#xff0c;用于引导硬盘工作。其担任着一个系统最基础最底层的工作。对硬盘固件&…
阅读更多...
2023 AIME 答案与解析 - 第一期

2023 AIME 答案与解析 - 第一期

这里放广告 原题目 Five men and nine women stand equally spaced around a circle in random order. The probability that every man stands diametrically opposite a woman is where and are relatively prime positive integers. Find 绿树教育中心独家解析 先选取 5 对座…
阅读更多...
知道什么是“事件冒泡“和“事件捕获“吗？那该怎么阻止事件冒泡呢

知道什么是“事件冒泡“和“事件捕获“吗？那该怎么阻止事件冒泡呢

1. 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出&#xff0c;这两个概念都是为了解决页面中事件流&#xff08;事件发生顺序&#xff09;的问题。 <div id"outer"><p id"inner">Click me!</p> </div>上面的代码…
阅读更多...
【MySQL Shell】8.7 InnoDB ClusterSet 的受控切换

【MySQL Shell】8.7 InnoDB ClusterSet 的受控切换

受控切换使选定的副本集群成为 InnoDB ClusterSet 部署的主集群。在受控切换过程中&#xff0c;确保了数据的一致性。该过程验证所选副本集群是否与主集群同步&#xff08;如果存在复制延迟&#xff0c;这可能意味着需要短时间的等待&#xff09;&#xff0c;然后使该集群成为 …
阅读更多...
masscan的常用命令记录

masscan的常用命令记录

目录 masscan介绍 常见参数 常见命令 输出格式 案例测试 masscan介绍 默认情况下&#xff0c;masscan的发包速率是100每秒&#xff0c;可以通过 ‘–rate’ 命令设置发包速率。 常见参数 --top-port 100&#xff1a;扫描100个常⻅端⼝ --adapter-ip&#xff1a;指定发包…
阅读更多...
fwknop的安装和使用测试

fwknop的安装和使用测试

SAP名为单包授权&#xff0c;是一种认证方法&#xff0c;它是一种端口敲门的方法&#xff0c;是之前早起端口敲门的升级版本。目的是为了隐藏服务端口&#xff0c;防止DOS等其他网络攻击&#xff0c;保证服务端的安全。SPA的具体定义这里不细说&#xff0c;网上有太多的资料&am…
阅读更多...
微信小程序常用组件

微信小程序常用组件

文章目录微信小程序常用组件buttoniconimagescroll-viewswipercheckboxaudiovideo微信小程序常用组件 button 简单使用 wxml <view class"container"><button type"default">default</button><button type"default" siz…
阅读更多...
配置与管理Web服务器

配置与管理Web服务器

IIS是一个非常重要的Web服务器组件&#xff0c;包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器&#xff0c;分别用于网页浏览、文件传输、新闻服务和邮件发送。 Web服务的工作原理 HTTP是应用级的协议&#xff0c;主要用于分布式、协作的信息系统。HTTP协议是通用的、无状…
阅读更多...
第二章：创建虚拟机

第二章：创建虚拟机

创建Windows server&#xff1a;首先第一步就是打开我们的vm&#xff0c;然后找到上一章讲的主页图标创建新的虚拟机。点击这上面类似的&#xff0c;然后转站。博文地址&#xff1a;https://blog.csdn.net/ryduijftgvhj/article/details/127934939?spm1001.2014.3001.5502视频…
阅读更多...
工作进入第七年，开始幻想四十岁的生活

工作进入第七年，开始幻想四十岁的生活

2022年度总结&#xff0c;推迟了一些时间&#xff0c;但终究还是来了&#xff0c;忙里偷闲。 突然发现自己很久没有更新文章了&#xff0c;主要是因为自己换了部门&#xff0c;调整了技术方向&#xff0c;对于新技术不知道该怎么写。 2022年&#xff0c;那就依旧从工作、生活…
阅读更多...
今天面了一个来华为要求月薪25K，明显感觉他背了很多面试题...

今天面了一个来华为要求月薪25K，明显感觉他背了很多面试题...

最近有朋友去华为面试&#xff0c;面试前后进行了20天左右&#xff0c;包含4轮电话面试、1轮笔试、1轮主管视频面试、1轮hr视频面试。 据他所说&#xff0c;80%的人都会栽在第一轮面试&#xff0c;要不是他面试前做足准备&#xff0c;估计都坚持不完后面几轮面试。 其实&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023