vue第二天笔记01——组件的两种定义方式

最新推荐文章于 2024-06-19 15:46:35 发布
最新推荐文章于 2024-06-19 15:46:35 发布
阅读量69 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43861647/article/details/119778192
版权

一、第一种定义 

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- 书写占位符,占着这个位置，以后会被组件替换。
                  占位符的名字不能和标签名字一样-->
        <v-header></v-header>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //组件类似于一个小的页面，里面包括html，css，js
        /*定义主件:
           var 组件名={
               template : '页面结构',
               data(){
                   return{
                       变量名 : 变量值 
                   }
               },
               methods : {
                   方法名:function(){
                       具体方法
                   }
               }
           }

        */
        var header = {
            // template:书写页面结构，里面只能存在一个根标签
            template : '<div><p v-on:click="change()">文字{{msg}}</p><h5>标题</h5></div>',
            data(){
                return{
                    msg : 0
                }
            },
            methods : {
                change:function(){
                    this.msg++;
                }
            }
            //template : '<p>文字</p><h5>标题</h5>'//报错,只能存在一个根标签
        }
        new Vue({
            el : '#app',
            /* 挂载组件 : {
                '占位符' : 组件名
                }
                */
            components : {
                'v-header' : header
            }
        })
    </script>
</body>
</html>

二、第二种定义 

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- 占位符 -->
        <v-header></v-header>
    </div>
    <!-- template(模板:书写页面结构)必须独立写,不能写在app内部 -->
    <template id="header">
        <!-- 同样只能存在一个根标签 -->
        <div>
            <p v-on:click="change()">文字{{msg}}</p>
            <h5>标题</h5>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        /* 定义组件:
            var 组件名 = {
                template : '模板的id',
                data(){
                    return{
                        变量名 : 变量值
                    }
                },
                methods : {
                    方法名 : function(){
                        具体方法
                    }
                }
            }
        */
        var header = {
            template : '#header',
            data(){
                return{
                    msg : 0
                }
            },
            methods : {
                change : function(){
                    this.msg++;
                }
            }
        }
        new Vue({
            el : '#app',
            /* 挂载组件 : {
                '占位符' : 组件名
                }
            */
            components : {
                'v-header' : header
            }
        })
    </script>
</body>
</html>

组件的定义：

    1.书写占位符

    2.定义组件的页面结构、数据和方法等

    3.挂载组件

·青红造了个白·
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue第四天笔记01——路由整理
08-21
使用之前记得npm install
Vue自定义组件并引入
Java_young_man的博客
01-16 3925
      今天，bug菌为大家带来一期帝王级干货，有关于前端vue的组件教学，深入指引大家在vue中如何创建自定义的组件，并且在vue中引入你自定义的组件；       具有很好的教学价值，希望小伙伴们根据这篇文章可以有所收获，建议小伙伴们先收藏后阅读哦。       小伙伴们如果觉得文章不错...
【React】定义组件的两种方式
z914020826的博客
03-04 846
一、函数式组件定义一个组件最简单的方法就是写一个JavaScript函数//1.创建函数式组件 function MyComponent() {//此处的this是undefined，因为babel编译后开启了严格模式 return < h2 > 我是用函数定义的组件(适用于【简单组件】的定义) < / h2 > } //2.渲染组件到页面 ReactDOM . render(< MyComponent / > , document . getElementById('test'))
vue——全局组件和局部组件
weixin_54362381的博客
08-19 377
全局组件: 1、Vue.component是Vue提供的创建全局组件的方法。语法:Vue.component("组件名",{}) 2、props:['content'], 【接收传过来的content值】 3、template:"<li>{{content}}</li>"【组件的内容模板，接收内容替换原标签内容后进行渲染】 4、 v-bind:content="item"【向子组件传递一个绑定值】 <div id="app"> <input typ
二、两种定义组件的方法
快乐de馒头
08-08 363
代码】二、两种定义组件的方法。
vue组件中使用 css 变量 var()
Journey125的博客
07-19 1822
可在全局common.css中定义。调用document可进行修改。
vue第五天笔记04——打包
08-23
vue第五天笔记04中打包后的一个项目
vue第三天笔记06——vue-cli练习
08-21
vue-cli项目，使用之前记得npm install
vue第五天笔记02——vuex数据仓库练习
08-22
vue第五天笔记02——vuex数据仓库练习
vue第四天笔记02——axios请求中的例子
08-21
模仿王者荣耀官网做一个选项卡，要使用axios请求
"变量赋值"组件:<var> —— 快应用组件库H-UI
H-UI官方博客
04-17 126
<import name="var" src="../Common/ui/h-ui/code/c_var"></import> <template> <div class="container"> <div> <var text="x"></var> ...
React 中的 定义组件的 两种方式
博客
09-30 3113
React 中的 定义组件的 两种方式React 中创建 Components 的方式有两种：Function and Class定义一个组件最简单的方法就是写一个 JavaScript 函数function Welcome(props) { return <h1>Hello, {props.name}</h1> }因为Welcome函数接受单个携带数据的props对象并且返回一个React元素
React学习--定义组件的两种方法
weixin_42738354的博客
04-27 369
一.函数式组件 举例如下： <div id="test></div> <script type="text/babel"> //1.创建函数式组件 function MyComponent(){ console.log(this) return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2> } //2.渲染组件到页面 ReactDOM.render(<MyComponent />,document.getE
Vue学习笔记17-定义多组件
doublewe的博客
01-18 248
前言： 我们把组件单独拿出来，写在其他文件夹中，然后在一个index.html中去调用它们。 1.在src/js下新建login.js和register.js: 目录结构： login.js里面添加登录组件的代码： const loginForm = { //组件内的template只能有一个跟标签 template: ` <div> ...
JS面试题第一章
最新发布
2301_79858637的博客
06-19 285
undefined表示的是无的原始值。但是null表示的是无 对象 0。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 388
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
vue:对三种获取更新后的dom的方式进行分析
qq_45820271的博客
06-17 722
由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的针对这个问题，我们有三种解决方案获取更新后的dom:3.在微任务中获取因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。
2024 年最新 Python 使用 Flask 和 Vue 基于腾讯云向量数据库实现 RAG 搭建知识库问答系统
唤醒手腕的博客
06-19 871
AI 套件是腾讯云向量数据库（Tencent Cloud VectorDB）提供的一站式文档检索解决方案，包含自动化文档解析、信息补充、向量化、内容检索等能力，并拥有丰富的可配置项，助力显著提升文档检索召回效果。用户仅需上传原始文档，数分钟内即可快速构建专属知识库，大幅提高知识接入效率。
vue格网图
南北粉面馆
06-16 328
【代码】vue格网图。
Vue笔记（三）——组件&插槽
05-25
组件是 Vue.js 中最重要的概念之一。组件可以让我们将 UI 拆分为独立、可复用的部件，使得代码更加清晰、易于维护。在 Vue.js 中，组件可以分为全局组件和局部组件，其中全局组件可在任何地方使用，而局部组件只能在其父组件中使用。 定义组件时，需要使用 Vue.component() 方法，该方法需要传入两个参数：组件名称和组件配置对象。组件名称应该采用 kebab-case（短横线分隔命名）格式，以便在 HTML 中使用。 示例代码如下： ```javascript // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) ``` 在上述代码中，我们定义了一个名为 button-counter 的组件，该组件包含一个计数器，每次点击按钮计数器加一。 在 HTML 中使用组件时，需要使用组件名称作为自定义标签来调用组件。示例代码如下： ```html <div id="app"> <button-counter></button-counter> </div> ``` 在上述代码中，我们调用了 button-counter 组件，并将其渲染到了 id 为 app 的 div 元素中。 除了组件的 data 和 template 属性外，还可以使用 props 属性来传递组件之间的数据。使用 props 时，需要在组件的配置对象中定义 props 属性，并在 HTML 中使用 v-bind 指令来传递数据。 示例代码如下： ```javascript // 定义一个名为 todo-item 的新组件 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) // 创建一个 Vue 实例 var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '水果' }, { id: 2, text: '奶酪' } ] } }) ``` 在上述代码中，我们定义了一个名为 todo-item 的组件，并使用 props 属性定义了一个名为 todo 的 prop。在 HTML 中，我们使用 v-bind 指令将 groceryList 数组中的每个对象传递给了 todo-item 组件。示例代码如下： ```html <div id="app"> <ul> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ul> </div> ``` 在上述代码中，我们使用 v-for 指令遍历 groceryList 数组，并使用 v-bind 指令将数组中的每个对象传递给了 todo-item 组件。注意，我们还需要使用 v-bind:key 指令来为每个列表项指定一个唯一的 key 值。 插槽是 Vue.js 中另一个重要的概念。插槽可以让父组件在子组件中插入任意的 HTML 内容，使得组件更加灵活、可复用。 在子组件中，使用 <slot> 标签来定义插槽。在父组件中，使用子组件的自定义标签来调用组件，并在标签内部插入 HTML 内容。示例代码如下： ```javascript // 定义一个名为 alert-box 的新组件 Vue.component('alert-box', { template: ` <div class="alert-box"> <strong>Error!</strong> <slot></slot> </div> ` }) // 创建一个 Vue 实例 var app = new Vue({ el: '#app' }) ``` 在上述代码中，我们定义了一个名为 alert-box 的组件，并在组件中定义了一个插槽。在 HTML 中，我们调用了 alert-box 组件，并在标签内部插入了一些 HTML 内容。示例代码如下： ```html <div id="app"> <alert-box> <p>Something bad happened.</p> </alert-box> </div> ``` 在上述代码中，我们调用了 alert-box 组件，并在标签内部插入了一些 HTML 内容。该 HTML 内容会被插入到 alert-box 组件的插槽中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值