handleSubmit写成了handleSumit

handleSubmit:function()，同学，你的function拼错了。PS：第一行的html也拼错了hhh

<li v-for="(item,index)of list" :key="index">改为

<li v-for="(item,index) of list" :key="index">

@click="handleCLick"写错了，是@click="handleClick"

Vue的数据和 DOM 已经被建立了关联，所有东西都是响应式的

 <button @onclick="handleClick">submit</button>

改成

 <button @click="handleClick">submit</button>

注： @onclick 改成 @click

这个文本编辑器怎么这么难用

直接上截图

老师用的编译软件是sublime text，浏览器是谷歌吧?

你的li没有写在div id ="root"下面

如果是data的数据项，如果一条当然不写逗号分隔，多条时最后一条数据后面不需要逗号。  方法里面的语句后，就跟jquery，javascript一样分号可以不写。

modle ==> model

不需要

F12，看一下vue.js引用是否正确

1. 参数（初始化需要赋初值）、方法的定义时，是使用冒号（:）

2. 参数值的修改，进行赋值时。则需要使用等号（=）

是不是在引入vue.js时路径有问题啊，没有从根目录开始

new Vue里面没有function,而是个对象。

最后）}反了

我已经找到了，是list:[]  我粗心，写成了{}

每次都是这种小细节错

一句话来说: key值是为了虚拟dom的比对 .

展开来说: 页面上的标签都对应具体的虚拟dom对象(虚拟dom就是js对象), 循环中 ,如果没有唯一key , 页面上删除一条标签, 由于并不知道删除的是那一条! 所以要吧全部虚拟dom重新渲染, 如果知道key为x标签被删除掉, 只需要把渲染的dom为x的标签去掉即可! 

描述其实不是很详细, 其中还有dom比对的过程,不过大概的意思已经描述出来了!

你的模板没有放在挂载点那里

addValue:function(){
    if(this.inputValue.indexof("")< 0){
        this.arr.push(this.inputValue)
    }
    this.inputValue = ""
}

v-for中的key

使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;
我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;

item 在你截图的例子里面仅仅代表，list数组里的每一项。如果数组是空，当然item也是空的，就不显示。

是v-for本身定义的吗？并不是。在这个例子中（item, index）of list ，item就代表了数组中的每一项（为何这样说，因为v-for这个指令就是遍历数组的，item能代表特定的一项还是每一项呢？），index就代表了每一项的对应下标。 

如果你这样写（a, b）of list，采用v-for命令，也是可以遍历对应项和对应项的下标。

那么，可以这么说，是item在括号中的位置，而不是item代表了数组中的项！！！

如果你反过来写，如（index， item）of list，看看会是什么呢？？

提供一个思路：

在v-bind里面使用三目运算符 判断是否完成 完成添加完成的样式 否则就是正常样式

哈哈哈modle学错了  哈哈哈   已接近

我拉下来了你的代码，vue.js引用我更改了一下，输入内容，点击提交，是可以显示的。

要不你再试试。

如果你说的是当输入框为空的时候，点击提交，只显示点点，没有内容，这个也是符合逻辑的。

如果想当输入框为空的时候，点击提交按钮此时无效，可以加一个判断语句就可以的