Vue教学篇之组件初识

原创 潇洒先生 教程 vue 122阅读 2018-04-15 10:18:38 举报

组件初识

Vue中组件简单来说可以分为以下两种

  • 全局组件
  • 局部组件。

下面我们就来写了个小demo来看看这两种组件如何使用。

先来用Vue写一个阉割版todolist,这个只能实现添加功能,代码如下:

运行上述代码就实现了只带添加功能的TodoList,从运行结果看,添加的内容我们可以分装成一个组件也就是ul中的li标签。

全局组件的运用,在script标签中添加如下代码

上述代码中我们定义了一个Vue的全局组件TodoItem,下一步<todo-item></todo-item>替换<li></li>,注意我们定义的组件在使用的时候,字母要全部小写,大写字母转为小写后要用-连接,如TodoItem在使用时写为todo-item

上述为全局组件的使用,下面我们试试局部组件。

script标签中添加如下代码

注意,此时我们还不能直接使用局部组件,局部组件要在new Vue()中通过components注册后方可使用,代码如下:

注册完成后就可以像全局组件一样使用局部组件了。

注意:v-bind可以缩写为:,v-on可以缩写为@。

欢迎大家来我的github拍砖:我的github

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复