Vue js使用es6语法来实现组件

这篇博客介绍了如何在Vue.js中利用ES6语法来定义和使用组件。作者指出,尽管官方文档主要使用ES5,但随着vue-cli生成的模板转向ES6,以及ES6的模块化优势,采用ES6已成为趋势。文中通过一个简单的ItemTemplate.vue组件示例,指导读者学习,并建议参考iView组件库的源码以深入理解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

鉴于官方的文档是es5的,但是使用vue-cli生成的代码模板是es6的,而且es6的模块化等也非常方便,以后肯定是主流。

1)定义简单组件 ItemTemplate.vue

<template>
  <li>{{text}}</li>
</template>

<script>
  export default {
    props: ['text'],
  }
</script>

2)使用组件

<style>
  .test {
    text-align: left;
    width: 300px;
    margin-left:auto;
    margin-right:auto;
  }

</style>
<template>
  <div id="test" class="test">
    <h1>Hello {{person.name}}!</h1>
    介绍:<input type="text" v-model="person.introduce"/><br/>
    年龄:<input type="text" v-model="person.age"/><br/>
    TODO:<br/>
    <li v-for="todo in person.todos">
      {{todo.id}}{{todo.text}}
    </li>
    <Item text="todo"/>
    <button v-on:click="buttonClick">点我</button>
  </div>
</template>

<script>
  import Item from './ItemTemplate.vue'
  export default {
    name: 'test',
    components: { Item },
    data() {
      return {
        person: {
          name: 'VUE',
          introduce: null,
          age: null,
          todos:[
            {id:1, text:'任务1'},
            {id:2, text:'任务2'},
            {id:3, text:'任务3'},
          ]
        }
      };
    },
    methods: {
      buttonClick() {
        this.person.introduce = 'i am sure';
        this.person.age = 20;
      }
    }
  }

</script>

可以参考iView组件库的源码实现来学习:
https://github.com/iview/iview/blob/master/src/components

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值