vue組件，擼第一個

實現此例您可以學到：

1. vue-cli的基本應用
2. 父組件如何向子組件傳遞值
3. 單文件組件如何引入scss
4. v-on和v-for的基礎應用
5. 源碼下載

一、搭建vue開發環境

• 更換鏡像到cnpm
  npm install -g cnpm --registry=https://registry.npm.taobao.org
• 安裝vue-cli
  cnpm install -g vue-cli
• 初始化vue項目
  命令模式進入項目所在的目錄，如d:\test\，輸入vue init 項目名稱即可。如果你想引入vue2.0框架，必須把nodejs、webpack和npm升級到最新版本。
• node-sass和sass-loader實現scss的編譯
  用cnpm安裝node-sass和sass-loader，用於編譯scss相關內容。
• 通過npm install 安裝開發和運行依賴組件
  進入剛創建好的目錄，執行cnpm install安裝所有的開發和運行依賴項
• 通過npm run dev支持調試版本
  在安裝成功后，直接運行npm run dev即可看到demo的運行界面。

注意：
1.按照上述步驟搭建最終可以創建好vue項目，但也遇到幾個坑
2.安裝的nodejs和webpack、npm不是最新版本
3.如遇坑可以參考此博客：地址

二、實現Tag組件

     學習一個新框架，首先是看文檔，最重要還是實踐。寫一個hello world過於簡單，要玩就玩個大的。我們就來實現一個Tag（標簽）組件領悟一下vue的強大。

組件需求

1. 將用戶輸入的標簽信息動態的添加到標簽列表區域。
2. 同名和空標簽不能輸入。
3. 外部可以控制標簽顯示區域的寬度。

實現思路

1. 一個輸入框，用於接受標簽內容的輸入；
2. 一個列表，用於展示所有輸入的標簽信息；
3. 提供一個可設置屬性，用於設置標簽列表的寬度；

具體實現

1. 模板內容代碼

<template>
    <div class="tag-wrap">
        <span>標簽：</span>
        <input type="text" id="tag" name="tag" v-model="val" />
        <button id="apply" v-on:click="add" >添加</button>
        <ul class="tag-cont clear" v-bind:style="{width: width}">
            <li v-for="item in cont">{{item}}</li>
        </ul>
    </div>
</template>

1.1 template只是模板語言的標記，解析后不會生成到頁面，所以內容需要用一個div包裹住；
1.2 template中可以訪問Js代碼中data()和Methods、props等相關屬性；
1.3 props用於父組件向子組件傳遞值，此值可以動態傳遞；
1.4 v-on綁定事件，v-for用於迭代集合。

2. Js代碼

<script>
  export default{
    name: 'tag',
    data () {
      return {
        cont: [],
        val: ''
      }
    },
    methods: {
      add: function () {
        let _val = this.val
        if (_val.length === 0 || this.cont.indexOf(_val) > -1) {
          return
        }
        this.cont.push(this.val)
      }
    },
    props: {
      width: {
        type: String,
        default: 'auto'
      }
    }
  }
</script>

2.1 使用v-model="val"實現輸入自動更新val這個屬性；
2.2 add方法獲取val這個屬性的值，然后判斷是否為空，以及是否在已添加標簽數據中存儲，如果不存在則添加到標簽數組中。
2.3 props的width類型和默認值，限制類型為String，默認值為auto。

3. Scss代碼

<style lang='scss' scoped >
    @keyframes item-show{
        from{ opacity: 0; }
    }
    .clear{ 
        zoom: 1;
    }
    .clear:after{
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        overflow: hidden;
        clear: both;
    }

    $back-color:#fed; 
    span{
        background: $back-color;
    }
    .tag-cont{
        list-style: none;
        margin: 10px auto;
        padding: 5px;
        border: 1px solid lightblue;
    }
    .tag-cont > li{
        float: left;
        padding: 5px;
        border:1px solid gray;
        border-radius: 10px;
        animation: item-show 1s;
        margin: 10px;
    } 
</style>

3.1 用lang來標記style標簽內的Css實現

4. 在App.vue中引入Tag組件，並組件到Vue的Components（組件庫）中，然后在template中以標簽的形式引用即可，代碼如下：

<template>
  <div id="app"> 
    <tag width="300px"></tag>
  </div>
</template>

<script>
import Tag from './components/Tag'

export default {
  name: 'app',
  components: {
    Tag
  }
}
</script>

    5. 效果圖

學習總結

     Tag組件其實是一個很小的組件，業務價值很低，主要用於Vue新手入門。主要實現Vue常用的父組件改變子組件的值，view改變model，model的變化反應到view上，事件的綁定等功能。
     還需要繼承深入了解，以及vuex管理vue組件的應用，還有組件之間的通信。