本文實(shí)例講述了vue 組件開發(fā)原理與實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的云浮網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
概要
vue 的一個(gè)特點(diǎn)是進(jìn)行組件開發(fā),組件的優(yōu)勢(shì)是我們可以封裝自己的控件,實(shí)現(xiàn)重用,比如我們?cè)谄脚_(tái)中封裝了自己的附件控件,輸入控件等。
組件的開發(fā)
在vue 中一個(gè)組件,就是一個(gè)獨(dú)立的.vue 文件,這個(gè)文件分為三部分。
1.模板
2.腳本
3.樣式
我們看一個(gè)系統(tǒng)中最常用的組件。
<template> <div > <div v-if="right=='r'" class="readOnlyBgColor">{{value}}</div> <div class="box-custom-component" v-else-if="right=='w'"> <input type="text" @blur="blurHandler" @focus="focusHandler" :required="required" v-model="currentValue" :placeholder="placeholder" ></input> <a href="javascript:;" rel="external nofollow" class="yd-input-clear" tabindex="-1" @click="clearInput" v-show="showClear && !isempty"></a> </div> </div> </template> <script type="text/ecmascript-6"> import { calcRight } from "@/assets/app.js"; import {VTypes,RxUtil} from "@/assets/util.js"; export default{ name : "rx-input", props: { value:[String,Number], permission:Object, permissionkey:String, showClear:{ type: Boolean, default: true }, readonly: { type: Boolean, default: false }, placeholder:{ type: String, default: "" }, required: { type: Boolean, default: false }, /** * 驗(yàn)證表達(dá)式 */ vtype:{ type: String, default: "" }, onblur:Function, onfocus:Function, conf:Object }, data(){ return { currentValue: this.value, iserror:false, isempty:true, checkReq:true } }, computed: { right :function () { return calcRight(this); } }, mounted(){ this.valid(this.required); }, methods: { valid(chkReq_) { var val=this.currentValue; if(chkReq_ && this.required){ if(RxUtil.isEmpty(val)){ // this.iserror=true; return false; } } if(!this.vtype) { // this.iserror=false; return true; } var validFunc=VTypes[this.vtype]; if(typeof validFunc=="undefined") { // this.iserror=false; return true; } //驗(yàn)證 var rtn= validFunc.valid(val); // this.iserror=!rtn; return rtn; }, blurHandler(e) { // this.iserror=!this.valid(this.checkReq); this.onblur && this.onblur(e); }, focusHandler(e) { this.showClear = true; this.onfocus && this.onfocus(e); }, clearInput(){ this.currentValue = ''; if(this.required){ // this.iserror=true; } } }, watch: { currentValue: function (val, oldVal){ this.$emit('input', this.currentValue); //是否為空 this.isempty=RxUtil.isEmpty(val); }, value :function(val,oldVal){ if(val!=oldVal){ this.currentValue=this.value; } } } } </script> <style scoped> .box-custom-component::after{ content: ''; display: block; clear: both; } .box-custom-component input{ float: left; width:calc(100% - .65rem); } .box-custom-component a{ float: left; width: .65rem; } </style>
定義好組件后,使用方法如下:
1.import 組件
import RxInput from '@/components/common/form/RxInput';
2.注冊(cè)組件
Vue.component(RxInput.name, RxInput);
3.使用組件
<rx-input v-model="data.email" permissionkey="email" :required="true" vtype="email" :readonly="false" :permission="" ></rx-input>
這里我們定義了v-model 我們通過(guò)將數(shù)據(jù)綁定到組件上實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。
實(shí)現(xiàn)雙向綁定,需要注意兩點(diǎn):
1.定義一個(gè)value 的屬性。
在上面組件的代碼中,我們可以看到我們定義了一個(gè)value屬性。
在只讀的情況下 直接綁定顯示。
<div v-if="right=='r'" class="readOnlyBgColor">{{value}}</div>
另外我們?cè)赿ata定義上,將value 賦值給了 currentValue 。這個(gè)值綁定到輸入控件上。
2.數(shù)據(jù)改變時(shí)調(diào)用方法。
this.$emit('input', this.currentValue);
這樣就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
分享文章:vue組件開發(fā)原理與實(shí)現(xiàn)方法詳解
路徑分享:http://muchs.cn/article2/pdjeic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、服務(wù)器托管、App設(shè)計(jì)、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)