有人想看源码，源码已上传GitHub
GitHub地址 https://github.com/zhaiyifei/VueDemo.git
头条怎么插超链啊（捂脸）
看下需求：
输入昵称，以及留言内容，都不许可为空。发布留言内容到 留言板中。留言回答。Vue组件模板有3种书写形式：
第一种：利用script标签：<script type=\公众text/x-template\"大众 id=\"大众myComponent\公众> 通过id来引用模板第二种：利用template标签 ：<template id=\"大众myComponent\"大众>通过id来引用模板。HTML5才有template标签，IE未实现此标签。第三种：单文件组件（ .vue格式文件）。适用与大型繁芜的项目。这个小demo 就利用大略的 script标签办法来写vue组件模板啦。
先看一下成品展示：
首先制作静态页：制作动态页：
抽象出组件：抽象出三个组件 input组件，textarea组件，留言列表组件
input组件
编写模板
注册组件
利用组件
textarea 和留言列表组件：
注册组件：
利用组件
2.填充数据：
利用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取精确的方法来更新元素。
username 和 message 数据属性 保存输入的值.
v-model是语法糖，对inout事宜的包装，相称于：
发布功能：
发布公能是 拿到输入的 昵称(username) 和 留言内容(message)，添补到 留言板列表中。昵称和留言内容分别在 v-input 和 v-textarea组件中，而 按钮在 根组件中，与v-input和v-textarea为兄弟关系。 以是我们将 昵称 和留言 提取到 v-input v-textarea的父组件——根组件中。
通过 v-model指令，将昵称 和 留言内容，绑定到对应的子组件上去。
将v-model的值 绑定到 子组件中props中的 value属性上。父组件通过props向子组件通报数据。
在子组件中利用组件上v-model指令绑定的数据，input和 textarea标签须要利用，以是：
修正input标签元素，并删除v-input组件中的 data属性，这个不须要了：
将 props.value 绑定到 input元素的value属性上 :value 指向input元素的value属性。”value\"大众 中的value指向 props中的value。input元素上 监听input事宜。input事宜调用父组件的input事宜来更新值。
比拟一下可以创造v-model指令利用在html标签上 和 利用在 组件之上是不一样的。当v-model指令 用在组件上的时候，跟用在DOM元素上的利用办法并不一样，在DOM元素上利用v-model时，Vue帮我们实现了语法糖。在组件上利用v-model，Vue帮我们实现了一半的语法糖，剩下一半须要我们自己实现 。
实在便是这样 ：
1. 将根组件（根实例可以看作根组件)中的 message 绑定到 子组件v-input中的 props中的 value中 。
2. 将根组件中的 updataUsernameEvent 方法注册到 子组件中的 input事宜上。
子组件v-input :
1.将v-input中的 props中的 value属性 绑定到 input标签中的 value属性上。
2.将v-input中的方法 childrenInputEvent 方法 注册 到inpu标签中的input事宜上。
v-input中的childrenInputEvent 方法触发 父组件(根组件)注册到子组件上的input事宜，调用updateUsernameEvent来修正 username属性的值
看下效果：
v-model指令语法糖的形式如下：
子组件：
子组件还可以简写成这样：
比拟一下 可以创造 在组件上利用v-model指令时，Vue帮我们实现了一半的语法糖 ：
v-model指令语法糖形式
没用利用v-model指令语法糖形式 ：
子组件中 Vue没用帮我们实现语法糖，以是我们须要我们自己实现：
v-textarea组件同样如此。
点击发布按钮，将 username 与 message 存储到 留言列表中 ：
做一些验证判断，将 username 与 message 存储到 留言列表中，并清空输入内容。将handleSend方法注册到 button标签元素的点击事宜上。
利用push将数据插入数组中来触发视图更新。一定不要利用不能触发Vue视图更新的办法来修正更新数组！
Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue当你修正数组的长度时，例如：vm.items.length = newLength数组更新检测Vue官方文档 列表渲染 一节中有详细的先容
渲染留言列表：
绑定留言列表 list到 留言板v-list组件上：
注册v-list组件：
利用v-for渲染留言板：
效果如下：
回答功能：
回答同样也是 将回答信息储存到留言列表中，以是将回答公能也放到 根组件中；
将handleReply方法注册到 v-list组件中的 reply事宜上。
通过点击事宜来触发 reply事宜
点击回答按钮时候，我们须要触发input标签的焦点事宜。我们怎么拿到 input标签元素呢？可以给 input标签做一个 标记：通过ref属性拿到所标记的元素或者组件实例：
通过 Vue的 $refs实例属性来访问 注册过 ref 特性 的所有 DOM 元素和组件实例。 如果在普通的 DOM 元素上利用，引用指向的便是 DOM 元素；如果用在子组件上，引用就指向组件实例
通过 Vue的$refs实例属性来访问 input标签元素，并触发其焦点事宜。$refs实例属性 只能访问 当前组件浸染域内的（组件html模板内部） ref标签，无法被外部访问，父组件也不可以。
无法访问
因此我们须要先拿到子组件，然后在通过子组件去拿着子组件中ref标记的html元素标签。
给子组件加一个 ref标记：
通过 refs拿到子组件实例，调用子组件中的方法：
子组件通过 refs 拿到浸染域内的 ref标记，（input标签元素）并触发焦点事宜
看下效果：
在增加一个删除留言的功能：
注册到子组件的 delete事宜上：
通过点击事宜触发 注册的 delete事宜：
看下效果：
好了 一个大略的留言板功能我们实现完了。
