版权声明:本文为博主总结文章,未经博主允许您依然可以转载。 https://blog.csdn.net/Memery_last/article/details/60874985
鉴于官方的文档是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