编辑 TodoList.vue 的模板文件，代码如下：
<template> <div> <input> <button>提交</button> </div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </template>这时打开浏览器会发现报错了：
因此我们对模板文件进行修改，使用一个 div 包裹上面的两个标签，发现浏览器可以正常显示了
数据绑定在 vue-cli 中，数据绑定采用另外一种语法：此时数据不是直接绑定，而是间接通过函数来返回
<script> export default { <!-- 以下是 data : function(){} 的缩写 --> data(){ return { inputValue : "" } } } </script> 单击事件给提交按钮添加单击事件：
<button @click="handleClick">提交</button>定义函数：依然可以采用 ES6 的语法，简略的写成 handleClick(){}
<script> export default { methods:{ handleClick (){ alert(123) } } } </script> 建立子组件vue-cli 的子组件放在 compontents 目录下：
复制一份干净的 .vue 代码，起名 TodoItem.vue
<template> </template> <script> export default { } </script> <style> </style>添加模板数据，在 TodoList.vue 实例中引入 TodoItem.vue 组件，并注册
<script> // 引入组件， import 组件名 from 组件路径 import TodoItem from './components/TodoItem' export default { // 注册组件， ‘组件标签名’：组件名 components:{ 'todo-item' : TodoItem }, ......找到合适的位置，添加组件标签
<ul> <todo-item></todo-item> </ul> 父组件向子组件传值通过定义属性的方式来给子组件传值：
定义 content 属性，index 属性传给子组件
<ul> <todo-item v-for="(item, index) of list" :key="index" :content="item" :index="index" ></todo-item> </ul>子组件声明接收的值：
<script> export default { props:['content'] } </script>通过插值表达式来显示值：
<template> <li>{{content}}</li> </template> 子组件向父组件传值通过发布/订阅的方式来实现子组件向父组件传值
在子组件的单击方法中定义发布消息的事件，事件名 delete, 参数：当前 li 元素的 index
handleDelete(){ this.$emit('delete', this.index) }父组件接收消息：并触发函数的执行
<ul> <todo-item v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete" // 接收消息 ></todo-item> </ul> handleDelete (index){ this.list.splice(index, 1) // 删除对应的元素 } 全局样式与局部样式对于每一个 vue 文件都包含 style 标签，这个 style 标签有一个属性 scoped 如果添加此属性则该标签内所有的样式仅对当前文件有效。开发中尽量都添加上使得文件间的耦合性更低
结语这个笔记仅涵盖了 Vue 的一点点基础知识，如果读者想要深入学习，可以前往官网参考文档继续学习：https://cn.vuejs.org/v2/guide/