這么久才想起來，沒有寫組件的部分，嘻嘻

初始化一個(gè)新項(xiàng)目，啥都不要

先看看文檔里是怎么說的

https://cn.vuejs.org/v2/guide/components.html

分析實(shí)例代碼里的組件

• 我們示例代碼里，就有用到組件哦

  
  
  App.vue
  
  

  這里就是引入Hello.vue，然后注冊(cè)為組件，就可以在template 中使用祖冊(cè)的標(biāo)簽了

• 那我們也來改造改造這個(gè)Hello的內(nèi)容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div style="color: #dddddd;background-color: #343434;margin: auto 20px;padding:60px;">
      <div>
        <h2>{{title}}</h2>
      </div>
      <div style="padding: 10px;">
        {{desc}}
      </div>
      <div>
        ![](img)
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      title:"biaoti",
      desc:'jianjiejianjeijianjie',
      img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498465845565&di=6daec59e4b89bd0c0a4ef5a7e9de0212&imgtype=0&src=http%3A%2F%2Fimg05.tooopen.com%2Fimages%2F20150819%2Ftooopen_sy_138946578587.jpg"
    }
  }
}
</script>

現(xiàn)在的效果是這樣的

效果

• 你一定發(fā)現(xiàn)了，我們使用這個(gè)組件的之后，是用的組件里的值，也就是說，我們調(diào)用組件的時(shí)候，沒法給他賦值，沒法改變這個(gè)組件的內(nèi)容，那么如何解決這個(gè)問題呢？

  
  
  文檔里
  
  

  原來，我們可以使用prop來給子組件傳值，那我們來試吧！

• 第一步，先寫props，然后把data里的幾個(gè)放到App.vue里的data里去，然后在App.vue里Hello標(biāo)簽的地方寫數(shù)據(jù)：

  
  
  第一步：Hello.vue
  
  
  第二步：App.vue
  
  
  第三步：App.vue
  
  

  來看看效果：

  
  
  嘻嘻

這時(shí)候，如果我們從后端拿到了一個(gè)這種圖文列表，現(xiàn)在如要循環(huán)輸出這些列表，該怎么實(shí)現(xiàn)呢？

循環(huán)輸出圖文列表

• 首先準(zhǔn)備一下數(shù)據(jù)，我們定義一個(gè)數(shù)組

data(){
      return{
        list:[
          {title:"標(biāo)題1",
            desc:'簡(jiǎn)介1',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498465845565&di=6daec59e4b89bd0c0a4ef5a7e9de0212&imgtype=0&src=http%3A%2F%2Fimg05.tooopen.com%2Fimages%2F20150819%2Ftooopen_sy_138946578587.jpg"
          },
          {title:"標(biāo)題2",
            desc:'簡(jiǎn)介2',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498467092336&di=d391de70a8b8f35716bfbb0bd10390dc&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3748609901%2C1382452034%26fm%3D214%26gp%3D0.jpg"
          },
          {title:"標(biāo)題3",
            desc:'簡(jiǎn)介3',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498465845565&di=cd0d65df24c402634c7ab801063d9ce4&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_thumb%2F201507%2Fm2015070219270251.jpg"
          },
          {title:"標(biāo)題4",
            desc:'簡(jiǎn)介4',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498465845550&di=25d1d9e3404eeeab47dbe7b2183ea132&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20160330%2Ftooopen_sy_157749743148.jpg"
          }
        ]
      }
  }

• 然后我們來寫循環(huán)：

<template>
  <div id="app">
    ![](./assets/logo.png)
    <div v-for="item in list">
      <hello :title="item.title" :desc="item.desc" :img="item.img"></hello>
    </div>
  </div>
</template>

這里用v-for來遍歷list數(shù)組

• 來看看效果

  
  
  哈哈

--

以上就是寫一個(gè)組件的簡(jiǎn)單步驟，后邊的開發(fā)中，經(jīng)常需要這么做。特別是數(shù)組的循環(huán)輸出，更是十分常用哦。
關(guān)于組件，還有很多技巧，大家需要去文檔里，仔細(xì)的把組件部分過一遍哦。

結(jié)束

var author = {
  name:'丁波',
  GitHub:'dingbo1028',
  University:'BNUZ'
}