Vue的学习（4）

1.基于脚手架编写项目

这里引入别人的一些理解，我觉得还不错：
在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html中定义的正文部分

<div id="app">来自index.html正文中的内容</div>

上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上；
main.js作为项目的入口文件，在main.js中，新建了一个Vue实例，在Vue实例中，通过

import App from './App.vue'
new Vue({
  el: '#app', //告诉vue实例要挂载的地方；（即实例装载到index.html中id为app的元素）
  components: {App }, //映射组件标签
   template: '<App/>'  // template: '<App/>'就是代表使用APP组件的模板
})

讲解：通过import App from './App.vue’引入当前目录下的App.vue,而components: {App }就是给vue实例添加组件模板，模板就是组件App.vue中的template中的内容。（template会替代原来的的挂载点处的内容）
所以Vue这个实例展示的就是App.vue这个组件的内容。
所以，我们进行总结：在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

这里感觉就是一层层嵌套

2.Vue案例初始化显示

首先先创建好需要的组件以及主组件，并且需要在main.js中将固定的套路写好

import Vue from 'vue'
import App from 'App'
new Vue({
  el:'#app',//需要挂载到哪
  components:{App},//将App映射为标签
  template:'<App/>'//模板
})

这里只对评论的内容进行分析，让它初始化显示即可
评论中的内容，List，Add都要用到，所以comments需要放在父组件中也就是App中，这里涉及到了组件间的通信，用props接收就好了，我最终的目的是让Item接收到name以及content，上面分析过了，所以需要再List中将其遍历，传给Item，下面是各个组件的情况：

//App
<template>
  <div id="app">
    <div>
      <header class="site-header jumbotron">
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
              <h1>请发表对Vue的评论</h1>
            </div>
          </div>
        </div>
      </header>
      <div class="container">
        <Add/>
        <List :comments="comments"/>
      </div>
    </div>
  </div>
</template>

<script>
  import Add from './components/Add'
  import List from './components/List'
  export default {
    components:{
      List,
      Add
    },
    data(){
      return{
        comments: [
          {
          name:'Tom',
          content:'Vue的学习'
        },
          {
            name:'Amy',
            content:'Vue'
          },{
            name:'Daming',
            content:'Vue组件'
          },
        ]
      }
    }
  }
</script>

<style scoped>

</style>

//List
<template>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2>
    <ul class="list-group">
      <Item v-for="(comment, index) in comments" :key="index" :comment="comment"/>
    </ul>
  </div>
</template>

<script>
  import Item from './Item'
  export default {
    props:['comments'],
    components:{
      Item
    }
  }
</script>

<style scoped>
  .reply {
    margin-top: 0px;
  }


</style>

//Item
<template>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2>
    <ul class="list-group">
      <Item v-for="(comment, index) in comments" :key="index" :comment="comment"/>
    </ul>
  </div>
</template>

<script>
  import Item from './Item'
  export default {
    props:['comments'],
    components:{
      Item
    }
  }
</script>

<style scoped>
  .reply {
    margin-top: 0px;
  }


</style>

//Add
<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名">
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea class="form-control" rows="6" placeholder="评论内容"></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default pull-right">提交</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
  export default {
    name: "Add"
  }
</script>

<style scoped>

</style>

因为放假了所以休息了一阵子，今天完成任务量有点少，不过最后一个重复做了三遍，刚开始觉得有些别扭，不是很适应，做多了感触很深，其实就是一层层引用，一层层暴露的关系，希望接下来继续加油吧！