vue快速入门(四十四)自定义组件

devtools/2024/9/24 23:57:05/

注释很详细,直接上代码

上一篇

新增内容

  1. 全局注册自定义组件并应用
  2. 局部注册自定义组件并应用

此篇使用了axios模块没有安装导入的先看这一篇

axios模块下载与导入

源码

main.js

import Vue from 'vue'
import App from './App.vue'//全局引入axios
// 引入axios
import axios from 'axios';
// 挂载到vue原型链上
Vue.prototype.axios = axios;Vue.config.productionTip = false//全局注册指令(自动获取焦点)
Vue.directive('focus', {// ele:绑定的元素(操作节点)// obj:指令的绑定对象(获取属性)bind(ele,obj){//只执行一次;DOM渲染之前执行,可以进行样式操作},inserted(ele,obj){//只执行一次,DOM渲染之后执行,可以进行行为操作ele.focus()// 聚焦元素console.log(obj)},update(ele,obj){//数据更新后执行},componentUpdated(ele,obj){//父子组件都更新后执行},unbind(ele,obj){//只执行一次,指令与元素解绑时执行}
})new Vue({render: h => h(App),
}).$mount('#app')

App.vue

<template><div id="app"><!-- 当然我们也可以写成v-focus="xxx"进行传值,值可以在对象属性中获取 --><input type="text" v-focus><TestComponent/></div>
</template>
<script>javascript">
import TestComponent from "./components/TestComponent.vue";
export default {name: "App",components: {TestComponent},data() {return {};},methods: {}
};
</script>
<style></style>

TestComponent.vue

<template><div class="main"><div class="box"><ul v-loading="list.length"><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt="" /></div></li></ul></div></div>
</template><script>javascript">//局部引入axios
//  import axios from 'axios'export default {data() {return {list: [],};},async created() {// 1. 发送请求获取数据const res = await this.axios.get("http://hmajax.itheima.net/api/news");setTimeout(() => {// 2. 更新到 list 中,用于页面渲染 v-forthis.list = res.data.data;}, 1000);},// 自定义指令directives: {loading: {inserted(ele, obj) {//刷新后立即判断//如果数据长度不为零则表示加载完毕,可以去除loading的类名obj.value <= 0? ele.classList.add("loading"): ele.classList.remove("loading");},update(ele, obj) {//数据改变后判断obj.value <= 0? ele.classList.add("loading"): ele.classList.remove("loading");},},},
};
</script><style>
/* 使用伪类覆盖的方法 */
.loading:before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-size: cover;background: #fff url("../../imgs/loading.gif") no-repeat center;
}/* 下面不是重点 */
.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>

效果演示:

在这里插入图片描述


http://www.ppmy.cn/devtools/16467.html

相关文章

ffmpeg ffplay 基于h264中SEI信息进行双摄画面拆分播放实践

1.背景 工作中用到IPCamera支持双摄&#xff08;即一个IPCamera带两个摄像头&#xff09;&#xff0c;IPC端将两个摄像头的画面上下拼接成了一个画面发布dash到云端&#xff0c;并且携带SEI信息。SEI信息中带两个frame&#xff08;x, y, width, height&#xff09;&#xff0c;…

leetcode题目69:x的平方根【python】

题目描述 计算并返回 x 的平方根&#xff0c;其中 x 是非负整数。 由于返回类型是整数&#xff0c;结果只保留整数部分&#xff0c;小数部分将被舍去。 输入格式 x&#xff1a;一个非负整数。 输出格式 返回整数部分的平方根。 示例 示例 1 输入: x 4 输出: 2示例 2 …

Vim学习笔记01~04

第01章&#xff1a; 遁入空门&#xff0c;模式当道 1.什么是vim Vim是一个高效的文本编辑工具&#xff0c;并且可以在编程开发过程中发挥越来越重要的作用。 事实上&#xff0c;有不少编程高手使用他们来进行代码的开发&#xff0c;并且对此赞不绝口。 2.本系列目的 但是让…

1、k8s问题pod从service中剔除

一、起因 redis原来由两服务器的集群变为三服务器的集群&#xff0c;通过statefulset扩展了两节点&#xff0c;并把redis-app-0和redis-app-3从集群中去除&#xff0c;但是由于service路由后端不变&#xff0c;导致程序连接后端仍然可能到redis-app-0和redis-app-3 二、处理 …

GitHub/R3D3项目环境配置踩坑记录

1、前言 项目链接地址&#xff1a;SysCV/r3d3 (github.com) 按照安装步骤容易出现的问题&#xff0c;environment.yaml文件中安装相关包&#xff0c;其中还有两个pip install githttps://github.com/..........这两个建议注释掉&#xff0c;后面再来安装这两个。 2、问题及解…

自然语言处理(NLP)技术

自然语言处理&#xff08;NLP&#xff09;技术是一种处理和分析人类语言的技术&#xff0c;它可以帮助计算机理解、解释和生成自然语言。 以下是一些常见的使用NLP技术的例子&#xff1a; 1. 机器翻译&#xff1a;NLP技术可以将一种语言翻译成另一种语言&#xff0c;比如将英…

深度学习中的黑科技:自监督学习(Self-Supervised Learning)

在人工智能领域&#xff0c;深度学习已成为推动技术革新的核心力量。然而&#xff0c;深度学习的一个重要瓶颈是对大量标记数据的依赖性。在这个背景下&#xff0c;自监督学习(Self-Supervised Learning, SSL)作为一种新兴的学习范式&#xff0c;越来越受到研究者的关注。自监督…

ClickHouse 数据类型、表引擎与TTL

文章目录 数据类型注意事项 表引擎1.TinyLog 引擎2.MergeTree 引擎3.ReplacingMergeTree 引擎4.AggregatingMergeTree 引擎5.SummingMergeTree 引擎6.CollapsingMergeTree 引擎7.Distributed 引擎 TTL列级 TTL表级TTL 数据类型 ClickHouse 数据类型Java 数据类型数据范围UInt8…