vue組件實例解析

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

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的泰來網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

一、搭建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相關(guān)內(nèi)容。

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

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

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

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

注意：

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

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

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

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

組件需求

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

實現(xiàn)思路

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

具體實現(xiàn)

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

<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只是模板語言的標記，解析后不會生成到頁面，所以內(nèi)容需要用一個div包裹?。?/p>

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

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標簽內(nèi)的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. 效果圖

vue組件實例解析

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

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

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

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持創(chuàng)新互聯(lián)！

分享文章：vue組件實例解析
文章來源：http://bm7419.com/article24/geiece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、商城網(wǎng)站、微信公眾號、云服務(wù)器、網(wǎng)站收錄、網(wǎng)站設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容