当前位置: 首页 > news >正文

vue学习-02vue入门之组件

删除Vue-cli预设

在用户根目录下(C:\Users\你的用户名)这个地址里有一个.vuerc 文件,修改或删除配置

组件

  1. Props(组件之间的数据传递)
    1. Prop 的大小写 (camelCase vs kebab-case)不敏感
    2. Prop 类型: String Number Boolean Array Object Date Function Symbol
    3. 传递静态或动态 Prop
    4. 单向数据流:只能父传子,不能子传父
    5. Prop 验证:
      类型验证 空验证(是否允许为空) 默认值(缺省值)
      注意:对象或数组默认值必须从一个工厂函数获取
  2. 自定义事件
    子传父
    .sync修饰符
  3. 插槽
    1. 插槽内容:tab切换
    2. 编译作用域:父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。(动态数据写在哪里就在哪里声明)
    3. 后备内容(默认值,缺省值)
    4. 具名插槽
    5. 作用域插槽
    6. 解构插槽 Prop
    7. 具名插槽的缩写 v-slot: -> #
    8. 废弃了的语法(了解性知识)
  4. 动态组件 & 异步组件
    1. 动态组件:keep-alive
      include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
      exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
      max - 数字。最多可以缓存多少组件实例。
    2. 异步组件:程序运行时不加载组件,什么时候组件被使用了,才会被加载
  5. 处理边界情况
    $root property $parent
  6. Vue 实例
    Vue是MVVM的模型,但是大家记住,他并不是完整的MVVM
    M:Model
    VM:ViewModel
    V:View
    MVC标准的设计模型,Angular
    **实例生命周期钩子:生命周期函数会随着我们对程序理解越深,可参考价值越高
  7. 进入/离开 & 列表过渡
  8. 自定义指令
    1. 全局指令
    2. 局部指令
      自定义指令存在三个钩子函数
      bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
      inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
      update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
      componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      unbind:只调用一次,指令与元素解绑时调用。
  9. 渲染函数 & JSX
    过滤器:商城平台,价格¥
    1. 局部过滤器
    2. 全局过滤器

目录结构:
在这里插入图片描述
App.vue

<template><div id="app"><!-- <MyComponent :title="num" :age="age" :banner="banner" demo="hello"></MyComponent> --><ul><li>hello</li><li>world</li></ul><hr><!-- <Parent /> --><hr><!-- <SlotParent /> --><hr><keep-alive include="Home"><component v-bind:is="currentPage"></component></keep-alive><button @click="changeComponent">切换组件</button><hr><p>{{ $root.foo }}</p><p>{{ $root.getVue() }}</p><hr><!-- <ComponentInstance /> --><hr><!-- <AnimComponent /> --><hr><!-- <DirectiveComponent /> --><RenderComponent><h3>我是插槽</h3></RenderComponent><FilterComponent /></div>
</template><script>
//引入各个组件
import MyComponent from "./components/MyComponent"
import Parent from "./components/group/Parent"
import SlotParent from "./components/slotComponents/SlotParent"// import HomePage from "./components/pages/HomePage"
// 异步加载
const HomePage = () => import("./components/pages/HomePage");
import UserPage from "./components/pages/UserPage"
import ComponentInstance  from "./components/ComponentInstance"import AnimComponent from "./components/AnimComponent"
import DirectiveComponent from "./components/directiveComponent"import RenderComponent from "./components/renderComponent"
import FilterComponent from "./components/fitlerComponent"export default {name: 'App',data(){return{num:100,age:"300",banner:["导航","新闻"],currentPage:UserPage,flag:true}},components: {MyComponent,Parent,SlotParent,HomePage,UserPage,ComponentInstance,AnimComponent,DirectiveComponent,RenderComponent,FilterComponent},methods:{changeComponent(){if(this.flag){this.currentPage = HomePage}else{this.currentPage = UserPage}this.flag = !this.flag}}
}
</script><style lang="less">
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

index.js

import Vue from "vue"Vue.filter('rmb', (value) => {// value就是{{}}或者v-bind绑定的值if (value) {return "¥" + value}
})

focus.js文件

import Vue from "vue"
// 全局指令
Vue.directive("focus", {inserted(el) {el.focus(); // focus是js的获取input焦点的方法}
})Vue.directive('red',{inserted(el){el.style.color = '#ff0000'}
})

AnimComponent.vue

<template><div><div><button @click="flag = !flag">切换</button><transition name="fade"><p v-if="flag">HelloAnim</p></transition></div><div><button @click="flagAnim = !flagAnim">切换</button><transitionname="custom-classes-transition"enter-active-class="animated rollIn"leave-active-class="animated rollOut"><p v-if="flagAnim">HelloAnim</p></transition></div></div>
</template>
<script>
export default {name: "Anim",data() {return {flag: true,flagAnim: true};}
};
</script>
<style scoped>
.fade-enter,
.fade-leave-to {opacity: 0;font-size: 15px;
}.fade-enter-to,
.fade-leave {opacity: 1;font-size: 30px;
}.fade-enter-active,
.fade-leave-active {transition: all 1s;
}
</style>

ComponentInstance.vue

<template><div><p>{{ msg }}</p><button @click="msg = '生命周期钩子函数重新渲染'">修改数据</button></div>
</template>
<script>
export default {name: "Life",data() {return {msg:"生命周期钩子函数"};},beforeCreate() {// 做初始化操作console.log("组件创建之前:beforeCreate");},created() {// 做初始化操作console.log("组件创建之后:created");},beforeMount(){// 判断组件渲染之前要做的额外事前console.log("组件渲染之前:beforeMount");},mounted(){// 网络请求console.log("组件渲染之后:mounted");},beforeUpdate(){console.log("数据更新之前:beforeUpdate");},updated(){console.log("数据更新之后:updated");},beforeDestory(){// 将组件中需要清除掉的在次函数中清除// 定时器、持续事件、组件数据清空、清除未完成的网络请求console.log("组件销毁之前:beforeDestory");},destoryed(){console.log("组件销毁之后:destoryed");}
};
</script>

directiveComponent.vue

<template><div>自定义指令<input v-focus type="text"><p v-red>{{ msg }}</p><button @click=" msg = '嘿嘿嘿' ">修改</button></div>
</template>
<script>
export default {name:"dir",data(){return{msg:"哈哈哈哈"}},// 局部指令,只能在当前组件中使用directives:{focus:{inserted(el){el.focus();}},red:{bind(el,binding,vnode,oldVnode){console.log("初始化");},inserted(el,binding,vnode,oldVnode){el.style.color = '#ff0000'},update(el,binding,vnode,oldVnode){console.log("指令有更新的时候调用");},componentUpdated(el,binding,vnode,oldVnode){console.log("指令有更新的时候调用!!");},unbind(el,binding,vnode,oldVnode){console.log("解绑调用");}}}
}
</script>

filterComponent.vue

<template><div>filter过滤器:<span>{{ money | rmb }}</span><p>{{ text | author | rmb}}</p></div>
</template><script>
export default {data(){return{money:"101.00",text:"喧闹任其喧闹,自由我自为知,我自风情万种,与世无争"}},filters:{author(value){if(value){return value +"  ____  陈果"}}}
}
</script><style></style>

MyComponent.vue

<template><div>MyComponent:{{ title }}:{{ age }}<ul><li v-for="(item,index) in banner" :key="index">{{item }}</li></ul><p v-if="user">{{ user.username }}</p></div>
</template>
<script>
export default {name:"MyComponent",data(){return{}},// props:["title"]props:{title:{type:Number},age:{type:[Number,String],default:1},banner:{type:Array,required:true},user:{type:Object,default:function(){return{username:"iwen"}}}}
}
</script>
<style lang="less" scoped>li{list-style: none;
}</style>

renderComponent.vue

<script>
export default {name:"RenderComponent",data(){return{count:10,username:''}},methods:{clicikHandle(){this.count += 1}},render(){return(<div>Render函数:{ this.count }<button onClick={ this.clicikHandle }>按钮</button><div>{ this.$slots.default }</div><input v-model={this.username} /><p>{ this.username }</p></div>)}
}
</script>

作为引入的js
registerServiceWorker.js

/* eslint-disable no-console */import { register } from 'register-service-worker'if (process.env.NODE_ENV === 'production') {register(`${process.env.BASE_URL}service-worker.js`, {ready () {console.log('App is being served from cache by a service worker.\n' +'For more details, visit https://goo.gl/AFskqB')},registered () {console.log('Service worker has been registered.')},cached () {console.log('Content has been cached for offline use.')},updatefound () {console.log('New content is downloading.')},updated () {console.log('New content is available; please refresh.')},offline () {console.log('No internet connection found. App is running in offline mode.')},error (error) {console.error('Error during service worker registration:', error)}})
}

components/group/
Child.vue

<template><div>Child<input type="text" v-model="username" @keyup="changeHandle"><p>{{ username }}</p><button @click="sendMsgHandle">发送数据</button><button @click="sendMsg2Handle">发送数据2</button></div>
</template>
<script>
export default {name:"Child",data(){return{msg:[1,2,3],username:"",msg2:"数据"}},methods:{sendMsgHandle(){this.$emit('onEvent',this.msg)},changeHandle(){this.$emit("myChange",this.username)},sendMsg2Handle(){this.$emit("update:msg2Event",this.msg2)}}
}
</script>

components/group/
Parent.vue

<template><div>Parent:{{ msg }}:{{ username }}:{{ msg2 }}<!-- <Child @update:msg2Event="getMsg2Handle" @onEvent="getMsgHandle" @myChange="getChangeHandle"/> --><Child :msg2Event.sync="msg2" @onEvent="getMsgHandle" @myChange="getChangeHandle"/></div>
</template>
<script>import Child from "./Child"export default {name:"Parent",data(){return{msg:"",username:"",msg2:""}},components:{Child},methods:{getMsgHandle(data){this.msg = data},getChangeHandle(data){this.username = data},getMsg2Handle(data){console.log(data);}}
}
</script>

components/pages/
HomePage.vue

<template><div>Home:{{ msg }}<button @click="msg = '我是修改之后的数据'">修改数据</button></div>
</template>
<script>
export default {name:"Home",data(){return{msg:"我是修改之前的数据"}}
}
</script>

components/pages/
UserPage.vue

<template><div>User:{{ msg }}<button @click="msg = '哈哈哈哈'">修改数据</button></div>
</template>
<script>
export default {name:"User",data(){return{msg:"呵呵呵呵"}}
}
</script>

components/slotComponents/
SlotChild.vue

<template><div><slot :user="user"></slot><slot name="head" :msg="msg">我是默认值1</slot>SlotChild<slot name='foot'>我是默认值2</slot><p>{{ $parent.message }}</p></div>
</template>
<script>
export default {name:"SlotChild",data(){return{msg:"我是插槽数据",user:{name:"iwens"}}}
}
</script>

components/slotComponents/
SlotParent.vue

<template><div>SlotParent<SlotChild><template v-slot:head="slotProps"><h3>我是头部{{ demo }}:{{ slotProps.msg }}</h3></template><template #foot><h3>我是底部{{ demo }}</h3></template><template v-slot:default="{ user }"><h3>哈哈哈:{{ user.name }}</h3></template><!-- <template slot="default" slot-scope="slotProps"><h3>哈哈哈:{{ slotProps.user.name }}</h3></template> --></SlotChild></div>
</template>
<script>
import SlotChild from "./SlotChild";export default {name: "SlotParent",data() {return {demo: "我是demo",message:"我是SlotParent的数据!!"};},components: {SlotChild}
};
</script>

运行效果图
在这里插入图片描述

相关文章:

vue学习-02vue入门之组件

删除Vue-cli预设 在用户根目录下(C:\Users\你的用户名)这个地址里有一个.vuerc 文件,修改或删除配置 组件 Props(组件之间的数据传递) Prop 的大小写 (camelCase vs kebab-case)不敏感Prop 类型: String Number Boolean Array Object Date Function Symbol传递静态或动态 Pr…...

解决Pycharm使用Conda激活环境失败的问题

Q:公司电脑终端使用powershell来激活conda环境时报错? 同时手动打开powershell报"profile.ps1” 无法被加载的错误 A: 1,手动打开powershell&#xff0c;设置管理员打开 2,打开powershell 打开 PowerShell 终端&#xff0c;并输入以下命令&#xff1a;Get-ExecutionPo…...

SpringSecurity 核心组件

文章目录 SpringSecurity 结构组件&#xff1a;SecurityContextHolder组件&#xff1a;Authentication组件&#xff1a;UserDetailsService组件&#xff1a;GrantedAuthority组件总结 SpringSecurity 结构 在SpringSecurity中的jar分为4个&#xff0c;作用分别为 jar作用spri…...

【Vue】快速入门和生命周期

目录 前言 一、vue的介绍 1. Vue.js是什么&#xff1f; 2. 库和框架的区别 3.基本概念和用法&#xff1a; 二、MVVM的介绍 1. 什么是MVVM&#xff1f; 2. MVVM的组成部分 3. MVVM的工作流程 4. MVVM的优势 5. MVVM的应用场景 三、vue实例 1.模板语法&#xff1a; …...

JVM架构和内存管理优化

Java虚拟机&#xff08;JVM&#xff09;是Java编程语言的核心组件&#xff0c;负责执行Java字节码并提供运行时环境&#xff0c;使得Java程序可以在不同的平台上运行。了解JVM的工作原理和内存管理对于优化代码性能和理解Java的内存管理和垃圾收集机制非常重要。在本文中&#…...

C语言——贪吃蛇小游戏

目录 一、ncurse 1.1 为什么需要用ncurse&#xff1a; 1.2 ncurse的输入输出&#xff1a; 1.2.1 如何使用ncurse&#xff1a; 1.2.2 编译ncurse的程序&#xff1a; 1.2.3 测试输入一个按键ncurse的响应速度&#xff1a; 1.3 ncurse上下左右键获取&#xff1a; 1.3.1 如…...

PHP8中获取并删除数组中第一个元素-PHP8知识详解

我在上一节关于数组的教程&#xff0c;讲的是在php8中获取并删除数组中最后一个元素&#xff0c;今天分享的是相反的&#xff1a;PHP8中获取并删除数组中第一个元素。 回顾一下昨天的知识&#xff0c;array_pop()函数将返回数组的最后一个元素&#xff0c;今天学习的是使用arr…...

EtherCAT 总线型 4 轴电机控制卡解决方案

 技术特点  支持标准 100M/s 带宽全双工 EtherCAT 总线网络接口及 CoE 通信协议一 进一出&#xff08;RJ45 接口&#xff09;&#xff0c;支持多组动态 PDO 分组和对象字典的自动映射&#xff0c;支持站 号 ID 的自动设置与保存&#xff0c;支持 SDO 的电机参数设置与…...

Upload-labs十六和十七关

目录 第十六关第十七关 第十六关 直接上传php文件判断限制方式&#xff1a; 同第十五关白名单限制 第十六关源码&#xff1a; 代码逻辑判断了后缀名、content-type&#xff0c;以及利用imagecreatefromgif判断是否为gif图片&#xff0c;最后再做了一次二次渲染 第71行检测…...

软件包的管理

概念 在早期Linux系统中&#xff0c;要想在Linux系统中安装软件只能采取编译源码包的方式进行安装&#xff0c;所以早期安装软件是一件非常困难、耗费耐心的事情&#xff0c;而且大多数服务程序仅提供源代码&#xff0c;还需要运维人员编译后自行解决软件之间的依赖关系。所以…...

常见入门级进销存系统合集

进销存系统是企业管理中不可或缺的一环&#xff0c;它们可以帮助企业有效管理库存、销售和采购等关键业务。然而&#xff0c;对于初创企业和小型企业来说&#xff0c;选择一个合适的进销存系统可能是一项挑战。在这篇文章中&#xff0c;我们将探讨入门级和资深级进销存系统之间…...

爬虫逆向实战(32)-某号店登录(RSA、补环境、混淆)

一、数据接口分析 主页地址&#xff1a;某号店 1、抓包 通过抓包可以发现登录接口是/publicPassport/login.do 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现&#xff0c;有三个加密参数&#xff1a;username、password、captchaTok…...

正则表达式学习和高级用法

以下所有的验证都在 在线验证 1. 起始符 / 正则表达式的起始符2. 限定符 匹配前面的子表达式**1次或多次**。例如&#xff0c;zo 能匹配 "zo" 以及"zoo"&#xff0c;但不能匹配 "z"。等价于 {1,}。 ? 匹配前面的子表达式**0次或1次**。例如…...

C# Onnx Yolov8 Fire Detect 火焰识别,火灾检测

效果 项目 代码 using Microsoft.ML.OnnxRuntime.Tensors; using Microsoft.ML.OnnxRuntime; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using Syste…...

线程安全问题

目录 一、线程安全 二、线程安全问题 三、线程安全 1.同步代码块 2.同步方法 3.Lock锁 3.1常用方法&#xff1a; 3.2 死锁 3.3 练习&#xff1a; 四、生产者和消费者&#xff08;线程通信问题&#xff09; 一、线程安全 如果有多个线程在同时运行&#xff0c;而这些…...

【力扣每日一题】2023.9.18 打家劫舍Ⅲ

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 今天是打家劫舍3&#xff0c;明天估计就是打家劫舍4了。 今天的打家劫舍不太一样&#xff0c;改成二叉树了&#xff0c;不过规则没有变&…...

Docker基础学习

Docker 学习目标&#xff1a; 掌握Docker基础知识&#xff0c;能够理解Docker镜像与容器的概念 完成Docker安装与启动 掌握Docker镜像与容器相关命令 掌握Tomcat Nginx 等软件的常用应用的安装 掌握docker迁移与备份相关命令 能够运用Dockerfile编写创建容器的脚本 能够…...

esbuild中文文档-路径解析配置项(Path resolution - Alias、Conditions)

文章目录 路径解析配置项 Path resolution别名 Alias条件解析 Conditionsconditions是如何工作的 结语 哈喽&#xff0c;大家好&#xff01;我是「励志前端小黑哥」&#xff0c;我带着最新发布的文章又来了&#xff01; 老规矩&#xff0c;小手动起来~点赞关注不迷路&#xff0…...

您的应用存在隐藏最近任务列表名称的行为,不符合华为应用市场审核标准

最近各家应用市场&#xff0c;唯独华为审核被拒了。。理由是您的应用存在隐藏最近任务列表名称的行为&#xff0c;不符合华为应用市场审核标准。 根据华为给出的视频&#xff0c;app在任务队列&#xff08;也就是俗称的安卓多任务管理后台&#xff09;不显示应用名。因为我们ap…...

Spring的 webFlux 和 webMVC

看到一个测评文章&#xff0c;并发在300的时候webMVC 和 webFlux的处理能力不相上下&#xff0c; 当并发达到3000的时候, webFlux明显优于webMVC, 有图有真相&#xff0c; 我信了. webMVC 是 one-request-one thread 堵塞模式, flux是非阻塞模式&#xff0c; 是spring家族系列…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...