VUE初始化

1.组件：

局部功能界面，这个界面里要实现这个功能相关的所有资源都是组件的一个组成部分
vue的模板文件：

<template>
    <div>

    </div>
</template>

<script>
   export default{//向外默认暴露一个配置对象

   }
</script>

<style>

2.自定义一个组件HelloWorld.vue

<template>
<div>
<p class="msg">{{msg}}</p>
</div>
</template>

<script>
export default{//向外默认暴露一个配置对象(与vue一致)
 data(){//data必须写成函数
     return{
         msg:'HELLO WORLD!!!'
     }
 }
}
</script>

<style>
.msg{
    color:red;
    font-size: 24px;
}
</style>

3.在App.vue引入一个外部的HelloWorld.vue组件步骤：

（1）引入Hello World.vue组件

import HelloWorld from './components/HelloWorld.vue'

（2）映射组件标签

export default{//向外默认暴露一个配置对象
//2.映射组件标签
components:{
    HelloWorld
}
}

（3）使用组件标签

  <!--3.使用组件标签-->
<HelloWorld/>

4.在main.js中将App组件渲染到index页面中

在mian.js页面中实例化一个vue对象
（1）引入App.vue组件

import App from './App.vue'

（2）映射组件标签

 components:{
       APP
    },

（3）使用组件标签
会判断是否有template，如果有会进行编译，然后将这个标签挂载到el的页面上面去。

template:'<App/>'

5.初始化显示

组件化编码步骤：
（1）拆，在页面布局进行拆分
（2）静态组件
（3）动态组件

将Add和List引入App.vue;Item.vue引入List.vue.
若数据是需要全局访问的则放在App.vue中。

ata(){
    return{
        comments:[
            {name:"aaa",content:'好'},
            {name:"bbb",content:'挺好'},
            {name:"ccc",content:'很好'},
            {name:"ddd",content:'非常好'}
        ]
    }
},

组件间的通信：将数据进行遍历并传递到List的Item组件中：
（1）通过标签属性进行传递，先传递给List组件

<List :comments="comments"/>

（2）在List组件中声明接收属性

 props:['comments'],//只是指定了属性名

（3）接收到之后传递给Item组件并进行遍历该数据

<Item v-for="(comment,index) in comments" :key="index" :comment="comment"/>

（4）在Item组件接收到数据后，然后显示在页面上

li>
  <p><span>{{comment.name}}</span><span>说</span></p>
  <p>{{comment.content}}</p>
  <button>删除</button>
       </li>