内容简介:参考官方文档:
1.Vue组件
参考官方文档: 组件基础
-
定义一个组件
// 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })
上面的
button-counter
就是一个组件,可以说是一个 自定义的标签 ,我先这样理解,后面再看。以下注意!!!
-
一个组件的 data 选项必须是一个函数
data: function () { return { count: 0 } }
- template下面只能有一个根节点
如果再创建一个同级的节点就会出错,如下:
-
-
在html中引用这个组件
<div id="components-demo"> <button-counter></button-counter> </div>
-
实例化Vue (指向组件所在的"坑位")
new Vue({ el: '#components-demo' })
-
可以复用
<div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Rabbitmq基础组件架构设计
- 深入剖析Vue源码 - 组件基础
- Android快速开发框架,基础库,样式库,组件化,组件集成
- [ Laravel 5.7 文档 ] 基础组件 —— 日志
- [ Laravel 5.7 文档 ] 基础组件 —— 视图
- [ Laravel 5.7 文档 ] 基础组件 —— 路由
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Transcending CSS
Andy Clarke、Molly E. Holzschlag / New Riders / November 15, 2006 / $49.99
As the Web evolves to incorporate new standards and the latest browsers offer new possibilities for creative design, the art of creating Web sites is also changing. Few Web designers are experienced p......一起来看看 《Transcending CSS》 这本书的介绍吧!