打开项目的 index.html .. 里面先添加一个 div 元素，上面加上一个 app id .. 我们可以把 Vue 应用挂载到这个元素上 ..

打开 app.js ... 创建一个应用，名字是 app ，新建一个 Vue 实例 .. 一个对象参数 .. 在 el 属性里设置一下应用挂载到的元素 .. #app 的意思就是带 app 这个 id 的元素 ..

components 里面可以是应用需要的组件，一个 notes ，对应组件是 Notes .. 然后添加一个 template .. 里面可以用一下 notes 这个组件 ..

在上面我们可以定义这个 Notes 组件 ... const Notes .. 这个 Notes 组件是整个应用的一个包装组件 .. 它里面会有添加笔记用的按钮 .. 笔记列表等等 ..

里面先添加一个 template 设置一下组件的模板 ..

一组 div .. 里面包装一个链接 .. 链接上的文字是 添加笔记 ..

保存一下文档 .. 页面上会显示一个 添加笔记 这个按钮 ..

浏览器上安装了 Vue 扩展以后，开发者工具上会有个 Vue 面板 .. 打开它 .. 这里会显示应用的组件 .. 有个 Root ，表示应用的根 .. 它下面是个 Notes 组件 ..

Note

再回到编辑器，然后添加一个新的组件 .. 名字是 Note，这个组件可以显示单个的笔记内容 .. 先添加一个 template 设置一下组件的模板 .. 一组 div .. 里面先包装一个静态文字 .. 笔记

然后在 Notes 组件里面，添加一个 components 属性 .. 设置一下组件里要使用的组件 .. 添加一个 'note' ，对应的组件就是上面我们定义的这个 Note ..

在 Notes 组件的 template 里面，再用一下 note 组件 .. 再复制两份 .. 现在页面上会显示几个笔记内容 ..

应用的 Root 下面是 Notes 组件，这个组件里面又包装了一些 Note 组件 ..