vue組件實例解析

更新時間：2017年01月10日 15:57:39 作者：小龍女先生

Tag組件其實是一個很小的組件，業(yè)務價值很低，主要用于Vue新手入門。主要實現(xiàn)Vue常用的父組件改變子組件的值，view改變model，model的變化反應到view上，事件的綁定等功能。下面跟著小編一起來看下吧

實現(xiàn)此例您可以學到：

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

一、搭建vue開發(fā)環(huán)境

1）更換鏡像到cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2）安裝vue-cli

cnpm install -g vue-cli

3）初始化vue項目

命令模式進入項目所在的目錄，如d:\test\，輸入vue init 項目名稱即可。如果你想引入vue2.0框架，必須把nodejs、webpack和npm升級到最新版本。

4）node-sass和sass-loader實現(xiàn)scss的編譯

用cnpm安裝node-sass和sass-loader，用于編譯scss相關內容。

5）通過npm install 安裝開發(fā)和運行依賴組件

進入剛創(chuàng)建好的目錄，執(zhí)行cnpm install安裝所有的開發(fā)和運行依賴項

6）通過npm run dev支持調試版本

在安裝成功后，直接運行npm run dev即可看到demo的運行界面。

注意：

1.按照上述步驟搭建最終可以創(chuàng)建好vue項目，但也遇到幾個坑

2.安裝的nodejs和webpack、npm不是最新版本

二、實現(xiàn)Tag組件

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

組件需求

將用戶輸入的標簽信息動態(tài)的添加到標簽列表區(qū)域。
同名和空標簽不能輸入。
外部可以控制標簽顯示區(qū)域的寬度。

實現(xiàn)思路

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

具體實現(xiàn)

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用于父組件向子組件傳遞值，此值可以動態(tài)傳遞；

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"實現(xiàn)輸入自動更新val這個屬性；

2.2 add方法獲取val這個屬性的值，然后判斷是否為空，以及是否在已添加標簽數(shù)據(jù)中存儲，如果不存在則添加到標簽數(shù)組中。

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實現(xiàn)

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. 效果圖