vue小白入门——如何建立自定义组件

刚开始学习vue,这是笔记。

这是第一种建立自定义组件的方法。

第一步:新建一个study_template.vue。在里面写入我们项展示的内容,这里只展示最简单的代码。

<template>
<div id="firstTemplate">
<p>{{msg}}</p>
<button v-on:click="count++">点击了{{count}}</button>
</div>
</template>

<script>
export default {
name: "study_template",
data() {
return {
msg: '我的第一个自定义组件',
count:0
}
}
}
</script>

第二步:建立了自定义组件,我们要用这个组件,肯定要告诉用这个组件的地方我这个自定义组件在哪里,然后注册开始使用。在默认存在的HelloWord.vue里注册这个组件。先引入自定义组件study_template.vue ,再在export default里注册。注意:<studyTemplate></studyTemplate>必须有个父容器,否则会报错。

第三步:执行命令npm run dev 运行,在浏览器中查看:

便可以在浏览器查看我们写的内容,也可以执行点击事件。这样就完成了我们的第一个自定义组件。

 

 

第二种自定义组件的步骤。

话不多说,上图。

还是在HelloWord.vue里面,自定义一个局部组件,全局组件在app.vue里创建,步骤一样。

components:{"自定义组件名称:{该组件对象}};

 

components: {
'button-counter': {
data: function () {
return {
aa: '我没变'
}
},
template: '<button v-on:click="change">{{ aa }}</button>',
methods:{
change:function () {
this.aa="我已经变了"
}
}
}
}

 

 

在浏览器中浏览:

点击按钮,发现按钮名称变了,说明事件已经执行了。

 

posted @ 2018-11-01 17:32  keqwind  阅读(1358)  评论(0编辑  收藏  举报