被迫学习Vue——组件学习

客官°小女子只卖身不卖艺 2023-07-14 10:54 44阅读 0赞

Vue的组件，其实也就是模板，就是把网站上公共的部分提取出来，像导航栏什么的

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <aaa></aaa>
        
        <bbb v-for="item in items" v-bind:hzy="item"></bbb>
    </div>
    
    <script>
        // 定义一个vue组件，组件也就是component
        Vue.component('aaa',{
         
            template: '<h1>hello template</h1>'
        });
    
        Vue.component('bbb',{
         
            // props属性用来传递参数
            props: ['hzy'],
            template: '<li>{
         {hzy}}</li>>'
        });
    
    
    
        var vm = new Vue({
         
            el: "#app", // 绑定元素，el是element的意思
            data: {
         
                items: [
                    'java',
                    'vue',
                    'spring'
                ]
            }
        });
    </script>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlWmhpWWluZ18_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlWmhpWWluZ18_size_16_color_FFFFFF_t_70]: /images/20230529/000f082c0980445face78dcefdcd532d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关前端基础学习——Vue组件介绍

目录一. Vue组件 1.1.全局组件 1.2.局部组件 1.3.组件模板二. 父子组件三. 组件之间的通信 3.1.子组件获取父组件数据 3.2.父组件

曾经终败给现在/ 2023年09月28日 14:38/ 0 赞/ 161 阅读

相关被迫学习Vue——计算属性

computed，跟methods差不多，他是计算属性，能缓存 <!DOCTYPE html> <html lang="en" xmlns:v-on="htt

た入场券/ 2023年07月14日 12:57/ 0 赞/ 38 阅读

相关被迫学习Vue——组件学习

Vue的组件，其实也就是模板，就是把网站上公共的部分提取出来，像导航栏什么的 <!DOCTYPE html> <html lang="en"> <he

客官°小女子只卖身不卖艺/ 2023年07月14日 10:54/ 0 赞/ 45 阅读

相关 Vue组件学习相关

组件相关知识 ①组件注册：变量名大小写不敏感，全局注册共有三种方式： Ⅰ：camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (

蔚落/ 2023年02月26日 09:27/ 0 赞/ 33 阅读

相关最详细之--Vue组件定义学习

一、组件的定义 1、全局组件定义（两种定义法） // 定义全局组件写法一： Vue.component('comp', //注意组件字母别写错

电玩女神/ 2023年02月25日 15:29/ 0 赞/ 9 阅读

相关 VUE项目学习（五）：引用echarts组件

VUE项目学习（五）：引用echarts组件演示效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

逃离我推掉我的手/ 2023年01月05日 03:55/ 0 赞/ 354 阅读

相关 Vue学习（二）Vue组件化编程

文章目录一、模块与组件相关概念说明二、Vue 中使用组件的三大步骤三、非单文件组件四、单文件组件 4.1 Vue 单文件组件的

迈不过友情╰/ 2022年10月22日 13:56/ 0 赞/ 335 阅读

相关【SpringCloud学习】feign组件学习

Feign简介 -------------------- 什么是Feign Feign是spring cloud `netflix`组件中的一个轻量级`RESTful

墨蓝/ 2022年10月09日 03:30/ 0 赞/ 176 阅读

相关 Vue组件学习

知识要点(基础) Vue实例以及Component注册都是通过选项完成的 props 表示是你可以在组件上注册的一些自定义特性，组件实例上的一个属性使

逃离我推掉我的手/ 2022年05月21日 01:38/ 0 赞/ 269 阅读

相关 vue.js入门（3）——vue.js组件学习and组件间通信

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的

男娘i/ 2021年09月14日 20:46/ 0 赞/ 522 阅读