vue练习情况@2019-7-5

1. 引用vue.js文档内容，前期是生产版，今天改为开发版（这样内容结构看起来清晰，不会显示一长行），引用的路径为：“.”表示当前路径 【./js/vue.js】
2. 在new vue时 没有添加 元素： el: '#app' 导致页面显示 为 {{msg}} ,即只在实例中添加data 对象，没有添加 el  挂载点；
3. handleSubmit 方法虽然能在list中添加元素，但在页面ul中只显示<li>.</li> 点，没有显示输入的内容；发现methods： 中方法写的不对,写成了：handleSubmit(){ 方法体 },实际应该为
4. methods: {  handleSubmit: function(){ 方法体 }  }
5. 以上导致第一次测试失败；

----------------------------------------------------------------------------------------------------------------------------

todo组件拆分：

1. 不知道如何声明子组件，即子组件的样式写错：Vue.component={},然后接下来{ 。。。 }不知如何编写---->正确的应为：Vue.component('todo_itme',{. . .})
2. {。。。 } 这部分有3块内容：props【接收父组传递的信息】、template【要显示的样式】、@触发父组件的事件方法;
3. 触发父组件的方法,写成了@delete，正确的应写为@click，要使用$emit,里面的参数为：负责监听父组件的方法名“delete”,和下标index
4. 子组件在父组件中的应用，以声明的名子，使用，如<todo_imte></todo_item>, 不知道循环的内容如何编写
5. 循环的内容有五部分：
   • v-for="(item,index) of list "
   • :kdy="index"
   • :content="item"   //自己写在了content
   • :index = "index"  //用于传递下标值 ；
   • @delete="handleClick"   //自己写成delete, handleDelete,   此部分 事件写在 局部组件里面；
6. 父组件的新增方法：
   • 对应的是@delete 绑定的 handleClick 方法，方法中需要带参数
   • 数组删除操作:  this.list.splice(index,1)

7. 父组件将index值通过prop属性传递给子组件

8. 为子组件添加点击事件，当点击子组件时通过$emit方法向父组件传递一个delete事件和this.index值

9. 为父组件通过v-on:delete监听delete事件，如果监监听到子事件传递的delete事件，则触发函数handleDelete，并传入参数index

10. 子组件的props选项能够接收来自父组件数据。仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递

11. 父组件通过handleDelte函数执行事件

12. 父组件向子组件通信，而通过$emit 实现子组件向父组件通信