vue组件注册

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量60 收藏
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sfchl2020/article/details/119918192
版权 
<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
        <Button-Test></Button-Test>
    </div>
    <script>
        /* Vue.component('button-counter', {
                                    data: function() {
                                        return {
                                            count: 0
                                        }
                                    },
                                    template: ' <button v-on:click="handle">点击了{{ count }}次</button>',
                                    methods: {
                                        handle: function() {
                                            this.count++;
                                        }
                                    },
                                }); */
        Vue.component('button-counter', {
            data: function() {
                return {
                    count: 0
                }
            },
            template: `<div>
                <button v-on:click="handle">点击了{{ count }}次</button>
                <button >测试1</button>
                <ButtonTest></ButtonTest>
             </div>`,
            methods: {
                handle: function() {
                    this.count++;
                }
            },
        });
        Vue.component('ButtonTest', {
            data: function() {
                return {
                    count: 0
                }
            },
            template: `<div>
    
                <button >测试123</button>
             </div>`
        });
        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <compontent-hello></compontent-hello>
        <compontent-test></compontent-test> -->
        {{title}}
        <button-test title="this is a parent component"></button-test>
        <button-test v-bind:title="title"></button-test>
    </div>
    <script>
        /*var helloword = {
                                                            data: function() {
                                                                return {
                                                                    msg: 'helloword'
                                                                }
                                                            },
                                                            template: '  <div>{{ msg }}</div>'
                                                        }

                                                        var hellotest = {
                                                            data: function() {
                                                                return {
                                                                    msg: 'hellotest'
                                                                }
                                                            },
                                                            template: '  <div>{{ msg }}</div>'
                                                        } */
        Vue.component('button-test', {
            props: ['title'],
            data: function() {
                return {
                    msg: '这是子组件的内容'
                }
            },
            template: "<div> <span>{{ msg }}</span><span>{{ title }}</span></div>"
        })
        var vm = new Vue({
            el: '#app',
            data: {
                title: '这是父组件的值的内容'
            },
            /*components: {
                "compontent-hello": helloword,
                "compontent-test": hellotest,
            }*/
        })
    </script>

</body>

</html>
sfchl2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE组件注册与基础用法
2201_75791332的博客
12-14 7032
- 组件 (Component) 是 Vue.js 最强大的功能之一 - 组件可以扩展 HTML 元素，封装可重用的代
Vue项目注册组件
weixin_62946736的博客
10-14 2185
注册组件的三步走：1、定义组件（创建组件）2、注册组件 3、使用组件（写组件标签）
VUE动态引入并注册子组件
weixin_43257360的博客
07-29 2105
VUE动态引入并注册子组件 // An highlighted block <template> <div> <component :is="item.location" v-for="(item,index) in simulateData" :key="index" /> </div> </template> <script> export default { data() { return {
Vue框架基础6-单文件组件（SFC）
AKindofo的博客
05-22 3517
single-file components（单个文件组件） 文件后缀（扩展）名为 .vue，解决的问题： 全局定义组件可能会出现命名冲突 字符串的 template 没有语法高亮 对 CSS 的支持不友好 没有明显的构建过程 … 单文件组件语法： <template> 模板语法 </template> <script> // 定义并导出组件的选项对象模块 </script> <style lang="scss" scoped>
Vue-写组件的时候报错,说是组件未注册
热门推荐
Good Luck
01-31 9万+
是因为模板必须用 &lt;template&gt; &lt;div&gt;...&lt;/&gt; &lt;/&gt; 包起来。 注意:template下面只能有一级标签。
组件化开发
weixin_43728184的博客
11-09 257
vue-组件化组件的使用分为三个步骤代码 组件的使用分为三个步骤 创建组件构造器 调用Vue.extend()方法创建组件构造器 注册组件 调用Vue.component()方法注册组件 使用组件 在Vue实例的作用范围内使用组件 代码 ...
Vue的组件注册方式
DFXVHG的博客
05-18 2596
Vue的组件注册 1.全局注册：当Vue创建，组件就会被加载，不管该组件使不使用，都会被加载【占内存】【入门程序】 2.局部注册：当我们使用到某个组件，该组件才会被创建，如果不使用该组件，那么该组件不会被创建 ...
Vue中组件的三种注册方式
yxf0448的博客
09-12 2666
Vue中组件的注册方式
Vue组件
溪斜山遮的博客
01-25 1万+
Vue组件（一）      Vue组件介绍      Vue组件使用步骤      Vue组件的使用      组件中data 和 el 选项      使用 <script> 或 <template> 标签 V组件 组件系统是Vue
Vue 组件注册实例详解
10-17
主要介绍了Vue 组件注册,结合实例形式较为详细的分析了vue.js组件的常见分类、注册方法及相关操作注意事项,需要的朋友可以参考下
详解vue 组件注册
01-22
一、了解组件注册的两种方式 1.1 全局组件的注册方法 //main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false let Hello = { name: 'hello',...
vue复合组件实现注册表单功能
08-28
在本示例中，我们将深入探讨如何使用Vue.js来实现一个复合组件，用于创建一个注册表单。 首先，我们要理解什么是Vue中的复合组件。复合组件是两个或更多简单组件的组合，它们共同完成一个更复杂的任务。在这个例子...
浅谈Vue组件及组件的注册方法
10-18
组件注册后，可以通过`<my-component-name>`这样的自定义标签在模板中插入和使用组件。全局注册的组件可以在任何地方直接使用，而局部注册的组件仅限于注册所在的组件及其子组件内使用。 总的来说，Vue组件提供了...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 456
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 260
Python Formulas库，JSON格式导出导入。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 292
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
前端三大主流框架Vue React Angular有何不同？
2401_85955297的博客
07-21 1439
前端三大主流框架Vue React Angular比较，前端三大主流框架Vue React Angular有何不同？
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 240
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
vue 组件注册事件
07-28
在Vue中，你可以使用`@`或`v-on`指令来注册组件事件。以下是两种不同的方法： 1. 使用`@`指令： ```vue <template> <button @click="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { // 处理点击事件的逻辑 } } } </script> ``` 2. 使用`v-on`指令： ```vue <template> <button v-on:click="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { // 处理点击事件的逻辑 } } } </script> ``` 无论你选择哪种方式，都需要在组件的`methods`选项中定义对应的方法来处理事件。在上面的例子中，当按钮被点击时，`handleClick`方法将被调用，并执行相应的逻辑。你可以根据需要在方法中编写任何自定义的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值