vue組件實(shí)例解析

實(shí)現(xiàn)此例您可以學(xué)到：

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

一、搭建vue開(kāi)發(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項(xiàng)目

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

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

用cnpm安裝node-sass和sass-loader，用于編譯scss相關(guān)內(nèi)容。

5）通過(guò)npm install 安裝開(kāi)發(fā)和運(yùn)行依賴(lài)組件

進(jìn)入剛創(chuàng)建好的目錄，執(zhí)行cnpm install安裝所有的開(kāi)發(fā)和運(yùn)行依賴(lài)項(xiàng)

6）通過(guò)npm run dev支持調(diào)試版本

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

注意：

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

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

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

學(xué)習(xí)一個(gè)新框架，首先是看文檔，最重要還是實(shí)踐。寫(xiě)一個(gè)hello world過(guò)于簡(jiǎn)單，要玩就玩?zhèn)€大的。我們就來(lái)實(shí)現(xiàn)一個(gè)Tag（標(biāo)簽）組件領(lǐng)悟一下vue的強(qiáng)大。

組件需求

1. 將用戶(hù)輸入的標(biāo)簽信息動(dòng)態(tài)的添加到標(biāo)簽列表區(qū)域。
2. 同名和空標(biāo)簽不能輸入。
3. 外部可以控制標(biāo)簽顯示區(qū)域的寬度。

實(shí)現(xiàn)思路

1. 一個(gè)輸入框，用于接受標(biāo)簽內(nèi)容的輸入；
2. 一個(gè)列表，用于展示所有輸入的標(biāo)簽信息；
3. 提供一個(gè)可設(shè)置屬性，用于設(shè)置標(biāo)簽列表的寬度；

具體實(shí)現(xiàn)

1. 模板內(nèi)容代碼

<template>
 <div class="tag-wrap">
 <span>標(biāo)簽：</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:>
 <li v-for="item in cont">{{item}}</li>
 </ul>
 </div>
</template>

1.1 template只是模板語(yǔ)言的標(biāo)記，解析后不會(huì)生成到頁(yè)面，所以?xún)?nèi)容需要用一個(gè)div包裹住；

1.2 template中可以訪(fǎng)問(wèn)Js代碼中data()和Methods、props等相關(guān)屬性；

1.3 props用于父組件向子組件傳遞值，此值可以動(dòng)態(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"實(shí)現(xiàn)輸入自動(dòng)更新val這個(gè)屬性；

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

2.3 props的width類(lèi)型和默認(rèn)值，限制類(lèi)型為String，默認(rèn)值為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來(lái)標(biāo)記style標(biāo)簽內(nèi)的Css實(shí)現(xiàn)

4. 在App.vue中引入Tag組件，并組件到Vue的Components（組件庫(kù)）中，然后在template中以標(biāo)簽的形式引用即可，代碼如下：

<template>
 <div id="app"> 
 <tag width="300px"></tag>
 </div>
</template>
<script>
import Tag from './components/Tag'
export default {
 name: 'app',
 components: {
 Tag
 }
}
</script>

5. 效果圖

學(xué)習(xí)總結(jié)

Tag組件其實(shí)是一個(gè)很小的組件，業(yè)務(wù)價(jià)值很低，主要用于Vue新手入門(mén)。主要實(shí)現(xiàn)Vue常用的父組件改變子組件的值，view改變model，model的變化反應(yīng)到view上，事件的綁定等功能。

還需要繼承深入了解，以及vuex管理vue組件的應(yīng)用，還有組件之間的通信。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持億速云！