vue是通过一个一个的实例组成的,我们一般定义var vm = new vue({...}) 叫做根实例,每一个模板也是一个实例。
在script中定义全局或局部组件component,全局组件可以直接在html中使用,局部组件需要在根实例中声明,如以下代码中注释的部分,components:{ 'todo-item': TodoItem}。在html中使用的时候就可以直接当作dom标签来使用了。
组件拆分的小栗子
我们开发网站时,比如显示商品的页面,一般会有多个ul,li标签来陈列多个商品,如果每一个商品都写这么多html标签的话,代码就太繁琐了。所以将公共部分放入组件中,循环调用。
一个vue项目是由vue实例组成的,每一个组件也相当于一个vue的实例,所以自己定义的组件也可以定义template和methods等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
</head>
<body>
<!--todoList组件拆分-->
<div id="root">
<div>
<input v-model="inputValue" type="text" @keyup.enter="handleSubmit"/>
<button @click=