Vue框架——组件的基本使用

全局组件的注册语法

Vue.component(组件名称, {
	data: 组件数据,
	template: 组件模板内容,
	methods: 用户自定义方法
})

简单案例演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件的基本使用</title>
</head>

<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //  组件注册
        Vue.component('button-counter', {
            data: function() {
                return {
                    count: 0
                }
            },
            template: '<button @click="handle">+{{count}}</button>',
            methods: {
                handle: function() {
                    this.count++;
                }
            }
        });
        //创建Vue实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

组件是可以重用的,并且它们当中的数据(比如案例中的count)都是独立的

组件注册的注意事项

  • data必须是一个函数

    函数必须返回一个值

  • ② 组件模板的内容必须是单个的根元素

    如果存在两个button,它们是兄弟关系,那么就会报错,因为存在两个根元素;如果两个buttondiv里面的话,就不会报错,因为div为一个根元素,两个button含在div

  • ③ 组件模板内容可以是模板字符串

    • 模板字符串需要浏览器提供支持(ES6语法)

      template: `
      	<div>
          	<button @click="handle">+{{count}}</button><button @click="handle">+{{count}}</button>    
      	</div>
      `,
      
  • ④ 组件命名方式

    • 短横线方式

      Vue.component('my-component', {})
      
    • 驼峰方式

      Vue.component('MyComponent', {})
      
    • 注意事项

      使用驼峰方式命名,如果放在其他组件的模板里使用,则可以使用<MyComponent></MyComponent>这种驼峰命名的方式去使用,如果放在body里使用,则使用<my-component></my-component>这种短横线命名的方式去使用

局部组件注册

vue代码

<script>
    var HelloWorld = {
        data: function() {
            return {
                msg: 'hello world'
            }
        },
        template: '<div>{{msg}}</div>'
    };
    var HelloEveryone = {
        data: function() {
            return {
                msg: 'hello everyone'
            }
        },
        template: '<div>{{msg}}</div>'
    };
    var HelloChina = {
        data: function() {
            return {
                msg: 'hello China'
            }
        },
        template: '<div>{{msg}}</div>'
    };

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            'hello-world': HelloWorld,
            'hello-everyone': HelloEveryone,
            'hello-china': HelloChina,
        }
    });
</script>

html代码

<div id="app">
    <hello-world></hello-world>
    <hello-everyone></hello-everyone>
    <hello-china></hello-china>
</div>

局部组件注册,只能在父组件中使用

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员陈_明勇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值