vue組件實例解析

實現此例您可以學到：

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

一、搭建vue開發環境

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實現scss的編譯

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

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

進入剛創建好的目錄，執行cnpm install安裝所有的開發和運行依賴項

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

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

注意：

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

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

二、實現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:>
 <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組件的應用，還有組件之間的通信。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！