专栏首页sringboot快速搞懂Vue里面components和template

快速搞懂Vue里面components和template

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/weixin_44580977/article/details/99252231

vue可以把内容变成组件化,然后提高复用性,那是怎样进行组件化,然后使用呢?

1.先写组件

2.引用组件

我们是单独写的一个js文件存放组件的所以它不是全局引用的,所以我就要把上面写好的registerForm组件引用过来,在这里它的名字被我指定做了loginForm

3.使用组件

上面我们只是 引用了,就好像声明一样,我还没有使用它,所以,要使用它就要在template:写出我们的引用后的组件名,每个组件都是一个标签,就想input ,radio一样, 所以是。

4.运行结果

5.易混淆点 Vue.component

Vue.component 是注册全局组件,如果注册全局组件,我们就可以直接在html直接写了,全局可以。

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定义全局组件,两个参数:1,组件名称。2,组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
6.运行结果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 层及管理界面实现分析

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • SpringMVC ResponseBody响应json数据

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • Spring 事务控制基于AOP的XML配置

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • 如何使用Vue.js渲染JSON中定义的动态组件

    json数据content里边有个body数组,每个元素中都有一个component的字段,这个字段决定了使用哪个组件去渲染。

    前端知否
  • 【译】选择Bit.dev构建组件库的15个理由

    2019年的时候,UI组件库在普及度上有了巨大的飞跃。当然这并不多么令人惊奇,因为像Uber、Airbnb、Booking等等公司都在通过共享的UI组件来保证其...

    腾讯IVWEB团队
  • uni组件传值注意

    杨充
  • Vue父子组件通信

    Vue开发,父子组件之间通信很常用,有传数据的,有调用方法的,有子组件操作父组件,也有父组件操作子组件,今天就简单说一下几个父子组件之间通信的方法。

    wade
  • 组件化通用模式

    一、前言 模式是一种规律或者说有效的方法,所以掌握某一种实践总结出来的模式是快速学习和积累的较好方法,模式的对错需要自己去把握,但是只有量的积累才会发生质的改变...

    企鹅号小编
  • 企业 SOA 设计(2)–组件化产品开发平台

    上一篇《企业 SOA 设计(1)–ESB 设计》中,写到我们的 SOA 设计分为两个层面来进行:一个是系统间的 SOA 设计,主要通过 ESB 来完成;另一方面...

    用户1172223
  • 【美团技术团队博客】前端组件化开发实践

    前言 一位计算机前辈曾说过: Controlling complexity is the essence of computer programming. 随着...

    美团技术团队

扫码关注云+社区

领取腾讯云代金券