vue学习-02vue入门之组件

2023-09-18 19:57:57

删除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>
            <transition
                name="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>

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

更多推荐

【SpringMVC】基础部分

SpringMvcSpringMVC是Spring提供的一个实现了WebMVC设计模式的轻量级Web框架。MVC（ModelViewController），一种用于设计创建Web应用程序表现层的模式Model（模型）：数据模型，用于封装数据View（视图）：页面视图，用于展示数据Controller（Handle处理器

【校招VIP】交流技巧之面试时合理表达观点

考点介绍：交流和表达是产品的面试最重要的考查点之一，也是产品必备工作技能。如果在面试中不能合理的与面试官沟通，或者不能把自己的思路和分析有逻辑的表达出来，都会对面试结果产生不好的影响。交流技巧之面试时合理表达观点-相关题目及解析内容可点击文章末尾链接查看！一、考点题目1.需求评审时研发说需求实现不了怎么办？解析:这种情

第二证券：今年来港股回购金额超700亿港元 9月近200家公司获增持

本年以来，港股上市公司回购力度不断增强。据恒生指数公司计算，到9月15日，本年以来港股回购金额到达735亿港元，占去年全年总额的70%。该公司预测，2023年港股回购金额可能到达929亿港元，是前5年年度平均水平的3.9倍。除回购外，9月以来，约190家港股公司获产业本钱、公司股东或出资组织的增持。业内人士表明，现在恒

力学性能和工艺性能

声明本文是学习GB-T713.1-2023承压设备用钢板和钢带第1部分：一般要求.而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们1范围本文件规定了承压设备用钢板和钢带的牌号表示方法、订货内容、尺寸、外形、重量、技术要求、检验规则、试验方法、包装、标志及质量证明书。本文件适用于锅炉、压力容器、压力管

python单例模式的使用

之前写过这样的一篇文章：腾讯云COS的快速接入,里边讲到了我对于cosutil这个类初始化的时候的一点改造。但是我发现了一个问题：我的接口每次去请求的时候都要初始化一次，因为我的接口是这样定义的：@router.post('/upload/{cos}')asyncdefupload_file(cos:str,file:

【副业合集】60个正规可做兼职的网站

分为两大板块，技能类和非技能类，大家可以根据自己个人情况进行选择。一、非技能类下苦力气，不用动什么脑子1.任务类无门槛，赚的不多，可能一天也就只能赚十几块，但都是官方平台，有保障，对于学生党来说还行。阿里众包京东微工腾讯搜活帮龙猫众包百度众测百川任务有道众包2.跑腿类跑腿类的性质就是出卖劳动力了，只要你愿意干，有时间干

组合拳SSRF+redis未授权访问

目录一、SSRF二、redis未授权访问三、组合利用1.写入Webshell2.反弹shell一、SSRF一台web服务器对其他服务器发起请求，以加载其他服务器的web内容或数据但因请求参数没有进行严格过滤，攻击者可能会通过SSRF漏洞来访问敏感数据、执行未经授权的操作，或者将服务器用于发起攻击其他系统的请求。二、re

基于YOLOv8模型的深海鱼目标检测系统（PyTorch+Pyside6+YOLOv8模型）

摘要：基于YOLOv8模型和BDD数据集的自动驾驶目标检测系统可用于日常生活与海洋中检测与定位深海鱼目标，利用深度学习算法可实现图片、视频、摄像头等方式的目标检测，另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法训练数据集，使用Pysdie6库来搭建前端页面展示系统。另外本系统

探索以太坊 Layer 2 解决方案的后起之秀——Starknet

作者:stella@footprint.network数据来源:StarknetDashboard“区块链三难题”，或“可扩展性三难题”，强调了区块链平台想要去平衡安全性、去中心化和可扩展性将面临的挑战。通常情况下，区块链架构只能有效地优先考虑其中两个难题。例如，以太坊优先考虑了安全性和去中心化，导致了可扩展性方面面临

1. 快速体验 VSCode 和 CMake 创建 C/C++项目

1.快速体验VSCode和CMake创建C/C++项目本章的全部代码和markdown文件地址:CMake_Tutorial，欢迎互相交流.此次介绍的内容都是针对于Linux操作系统上的开发过程.1.1安装开发工具VSCode:自行下载安装,然后安装插件Cmake:在Ubuntu系统上,可以采用apt工具安装：sudo

本地Tomcat网页搭建结合Cpolar内网穿透实现公网访问

文章目录1.前言2.本地Tomcat网页搭建2.1Tomcat安装2.2配置环境变量2.3环境配置2.4Tomcat运行测试2.5Cpolar安装和注册3.本地网页发布3.1.Cpolar云端设置3.2Cpolar本地设置4.公网访问测试5.结语1.前言Tomcat作为一个轻量级的服务器，不仅名字很有趣（让人想起童年）

热文推荐
  1. 方案：AI赋能，森林防火可视化智能监管与风险预警系统解决方案

    一、方案背景森林火灾是世界八大自然灾害之一，具有发生面广、突发性强、破坏性大、危险性高、处置扑救特别困难等特点，严重危及人民生命财产和森林资源安全，甚至引发生态灾难。有效预防和及时控制森林火灾是保护国家生态建设成果、推进生态文明建设的重要措施。监管痛点：1）现有的森林防火监测系统落后，以人工地面巡护、瞭望塔高点巡查为主

  2. 【群晖NAS】Synology drive套件安装设置与结合内网穿透实现远程访问——“cpolar内网穿透”

    文章目录前言1.群晖SynologyDrive套件的安装1.1安装SynologyDrive套件1.2设置SynologyDrive套件1.3局域网内电脑测试和使用2.使用cpolar远程访问内网SynologyDrive2.1Cpolar云端设置2.2Cpolar本地设置2.3测试和使用3.结语前言群晖作为专业的数据

  3. 【基础篇】六、基于SpringBoot来整合SSM的案例（下）

    文章目录1、前后端调用：axios发送异步请求2、添加功能3、删除功能4、修改功能5、异常消息处理6、分页功能7、分页Bug处理8、条件查询接下来加入前端页面，使用axios发送异步请求调用上篇的接口。调前端代码时，发现还挺有趣，刷新、隐藏、调用、以及一些交互逻辑的代码翻译，等框架学完看看前端的东西。1、前后端调用：a

  4. 学习视觉SLAM需要会些什么？

    前言SLAM是现阶段很多研究生的研究方向，我也是作为一个即将步入视觉SLAM的研究生，网上对于SLAM的介绍很多，但很少有人完整系统的告诉你学习视觉SLAM该有那些基础，那么此贴将告诉你学习SLAM你要有那些方面的基础。文章目录前言1.经典视觉SLAM的框架2.高等数学、线性代数、概率论、矩阵论3.C++语法基础4.L

  5. 【Linux】如何使用 WSL 在 Windows 上安装 Linux

    Linux如何使用WSL在Windows上安装Linux开发人员可以在Windows计算机上同时访问Windows和Linux的强大功能。通过适用于Linux的Windows子系统(WSL)，开发人员可以安装Linux发行版（例如Ubuntu、OpenSUSE、Kali、Debian、ArchLinux等），并直接在W

  6. nodejs中的错误类型及捕获处理

    nodejs中的错误类型及捕获处理在node中，提供了error模块，并且内置了标准的JavaScript错误，本文将介绍在node中错误类型以及如何捕获。错误类型js错误标准的js错误，跟在浏览器中运行js时提示的错误类型一样RangeError当一个值不在其所允许的范围或者集合中。例如不能将数字的有效位数位1-10

  7. Python语言学习实战-内置函数sorted()的使用（附源码和实现效果）

    实现功能sorted()函数是Python的内置函数之一，用于对可迭代对象进行排序操作。它可以对列表、元组、字符串等可迭代对象进行排序，并返回一个新的已排序的列表。sorted()函数的语法如下：sorted(iterable,key=None,reverse=False)其中，iterable是要排序的可迭代对象；k

  8. 【基于MBD开发模式的matlab持续集成（一）】

    基于MBD开发模式的matlab持续集成引言或许是感受到行业内卷的愈加激烈，在传统制造和高新技术相结合的新能源领域对软件工程开发的要求也愈加提高，尤其在互联网已经大行其道的敏捷开发，便顺其自然的被新能源的老板们所看重。概述本文包含两块内容，第一是使用jenkins+git打造一个可自动构建的持续集成环境，这个是互联网的

  9. 以创新抵御经济环境压力：自动化测试ReadyAPI帮助企业平衡软件质量与成本控制

    任何行业的公司都可能会经历严重的财务困境，这种困境往往导致供应链中断、劳动力短缺和运营成本增加。通货膨胀压力、利率上升和地缘政治不确定性的压力加重了企业的资产负债。企业需要适应不断演变的消费者需求和数字化转型，加上面临着激烈的竞争，利润空间收到压缩。这些财务困境迫使企业探索创新的方法，在高度不稳定的经济环境中保持弹性并