学习Vue第三天

学习了基于vue的第一个案例，并进行反复练习，最后总结了一下案例思路。

---

首先大致描述一下案例：这是一个进行评论交流的案例，实现了内容的提交与删除。具体源码可以评论分享。

 

整个案例思路是1：拆分组件；2：静态组件；3：动态组件（包括初始化显示以及交互行为）

---

一：拆分组件

---

第一步：创建入口main.js

一般main.js文件的格式是固定的。

import Vue from 'vue'
import App fom './App'

new Vue({

el:'#app',
//将App映射为标签
components:{App},
//模板
template:'<App/>'
})

 

第二步：创建最外层的组件App

第三步：创建一个组件文件夹

这个文件夹中一般就是拆分的几部分组件，例如对一块页面分为Header组件，Main组件以及Footer组件。

---

二：静态组件：拆分页面与样式

---

就是把页面和样式拆分为合适的模块放入相应的组件。

组件之间如何相互引用？

1：引入组件

//例如父组件引入子组件
import Add from './components/Add.vue'

 

2:把组件映射为标签

components:{
  Add
}

3:使用组件标签

<Add/>

---

三：动态组件

---

一：初始化显示

---

1：动态显示初始化数据

这里需要注意：数据放在哪一个组件是涉及到某个或某些问题，如果这个数据，多个组件都用的到，就需要把数据定义到这些组件的父组件中。

在组件里写data，那data就必须是一个函数

data(){
  return{

  }
}

哪个组件负责向页面展示效果，就把数据传给谁。

那如何传递呢？

这里就需要使用标签属性进行组件间通信

 <List :comments="comments" :deleteComment="deleteComment"/>

在这里传递的时候必须要加冒号，不加冒号传过去的是文本，加冒号传递过去的是变量的值。

当向某个组件传递过去后，那个被传递的组件就必须声明接收

声明接收用的是props。

记住：只要遇到哪个组件使用哪个组件就会进行引入组件，映射组件标签，使用组件标签这三个步骤。

---

二：交互

---

 

1：实现交互要先找到要操作的组件

在这步，当看到input标签，就要想到数据双向绑定v-modal，

一旦写上v-modal，就马上去定义对应的data，进行定义或初始化。

---

从绑定事件监听开始，然后就要进行分布（对应的方法），这里分四个步骤

//拿一个添加方法举例 
 add(){
          //1，检查输入的合法性
          const name = this.name.trim()
          const content = this.content.trim()
          if(!name || !content){
            alert("姓名或内容不能为空")
            return
          }
          //2根据输入的数据，封装成一个comment对象
          const comment = {
            name,
            content
          }
          //3，添加到comments中
        this.addComment(comment)

          //清除输入
          this.name =''
          this.content=''

        }

这里的方法不是更新的方法，

要注意：数据在哪个组件，更新数据的行为（方法）就应该定义在哪个组件。

所以说我们要理解为，方法在有数据的组件内定义，然后在应用的组件中去调用这个方法，如果这两个组件层级差距太大，就进行逐层传递。

 

 

最后收集一个接收的标准写法：

 props:{
        addComment:  {//指定了属性名、属性值的类型，必要性
          type:Function,
            required:true
        }

      }

 

在当前组件，props里面声明的就可以通过this进行访问。

---

四：结尾

---

要多动手，多练，不能眼高手低，这个案例就是教训，我当时刚开始只是看看，最后没看懂，不知道整体编写思路，导致我在vue的头一个案例中都花费了很长时间。

继续加油。