按一下笔记列表项目，会显示笔记的详细信息，用户还可以编辑笔记里的内容 .. 我们先去创建一个新的组件 .. 名字可以是 Editor .. 先添加一个 template 设置一下组件的模板 .. 一组 div .. 上面加上 ui 还有 form .. 里面是个表单字段 .. 一组 div，上面加上 field 类 ..

然后是表单元素 .. 这里用一个 textarea ，文本区域 .. rows 设置成 5 .. placeholder 添加点位符文字 .. 写点东西...

在 Note 组件里面可以用一下这个 Editor 组件 .. 添加一个 components 属性，里面添加一个 editor ，对应的值就是我们定义的这个 Editor ..

在模板里面，用一下这个 editor 组件，先添加一个包装 .. 上面加上 extra 这个类 .. 里面用一下 editor 组件 ..

现在页面上每条笔记的下面都会显示一个文本区域..

编辑

现在我想在这个文本框里显示笔记里的内容 .. 在这个 Note 组件里面，找到使用了 editor 组件的地方 .. 上面加上一个 v-bind 传递一个属性到这个组件里面，名字是 entity-object ，注意这里我们使用小横线分隔开不同的词，到了这个组件的属性里面，会自动变成驼峰式的命名方式 ..

传递的具体的值是组件里的 entity，也就是笔记内容 ..

回到 Editor 组件 .. 添加一个 props 属性 .. 从 Note 组件传递过来的属性是 entityObject .. 注意这个名字会自动变成驼峰式 ..

再添加一个 data 方法 .. return 组件需要的数据 .. 里面添加一个 entity ，对应的值就是 this.entityObject ，就是从 Note 组件传递过来的 entity-object 属性的值 ..

在这个 textarea 元素上面，用一下 v-model .. 绑定的是 entity 里的 body ..

预览

回到浏览器可以去试一下 .. 现在这个文本区域上会显示笔记里的内容 .. 编辑文本区域里的内容的时候也会影响到这个笔记内容 ..