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

秒速五厘米 2022-09-27 12:27 122阅读 0赞

鉴于官方的文档是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][https_github.com_iview_iview_blob_master_src_components]

[https_github.com_iview_iview_blob_master_src_components]: https://github.com/iview/iview/blob/master/src/components

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js——6.创建组件

Vue组件组件就是为了拆分Vue实例的代码量，能够不同的功能定义不同的组件创建组件的方法 1. // 创建组件 let com1=Vue.extend(

悠悠/ 2023年10月11日 13:18/ 0 赞/ 24 阅读

相关【Vue.js 知识量化】ES6 语法积累

ES6 语法 let / var const 的使用 class、extends、super 箭头函数（arrow function）模版

矫情吗；*/ 2023年01月24日 02:18/ 0 赞/ 21 阅读

相关 vue---ES6语法

1：变量声明： var 声明的变量不存在的时候返回notdefind,let声明的变量如果不存在则报错，也就是let没有预编译的功能。const声明的变量，不但不允许提前访

超、凢脫俗/ 2022年12月02日 12:20/ 0 赞/ 216 阅读

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

鉴于官方的文档是es5的，但是使用vue-cli生成的代码模板是es6的，而且es6的模块化等也非常方便，以后肯定是主流。 1）定义简单组件 ItemTemplate.vue

秒速五厘米/ 2022年09月27日 12:27/ 0 赞/ 123 阅读

相关 JS & ES6 -- 语法糖：类

类的声明举个栗子： class Cat{ constructor(name){ this.name = name /

忘是亡心i/ 2022年06月03日 00:10/ 0 赞/ 214 阅读

相关 Es6语法

1.var要比let的位高,作用域要大 2.let的作用范围很小很小 3.若果在函数内定义一个var变量,在函数外是不能被访问的. function user()

素颜马尾好姑娘i/ 2022年05月09日 06:20/ 0 赞/ 395 阅读

相关 Vue.js 使用$refs来获取元素和组件

使用 `this.$refs` 来获取元素和组件 <div id="app"> <div> <input type="butt

逃离我推掉我的手/ 2022年03月17日 14:19/ 0 赞/ 703 阅读

相关 Vue.js基础语法（二）组件

vue学习的一系列，全部来自于表哥---表严肃，是我遇到过的讲课最通透，英文发音最好听的老师，想一起听课就去这里吧 [https://biaoyansu.com/i/hzhj1

r囧r小猫/ 2021年12月23日 08:21/ 0 赞/ 307 阅读

相关 es6 es6规范模块打包es6语法js文件、模块导出导入

ES6 基于Babel、browserify模块化打包 1、生成package.json文件, npm init； name不能为大写和中

- 日理万妓/ 2021年07月24日 23:49/ 0 赞/ 563 阅读

相关 ES6语法

ES6语法 Tags: javascript const 与 let 变量使用`var`带来的麻烦: function getClothing(isC

野性酷女/ 2021年06月24日 16:09/ 0 赞/ 633 阅读