vue 開發系列 元件開發

vue 的乙個特點是進行元件開發，元件的優勢是我們可以封裝自己的控制項，實現重用，比如我們在平台中封裝了自己的附件控制項，輸入控制項等。

在vue 中乙個元件，就是乙個獨立的.vue 檔案，這個檔案分為三部分。

1.模板

2.指令碼

3.樣式

我們看乙個系統中最常用的元件。

if="right=='r'" class="readonlybgcolor">}

else-if="right=='w'">
type="text"@blur="blurhandler"@focus="focushandler":required="required"v-model="currentvalue":placeholder="placeholder"
>
import  from "@/assets/util.js";
export 
default
,        readonly: ,
placeholder:,
required: ,
/*** 驗證表示式
*/vtype:,
onblur:function,
onfocus:function,
conf:object
},},    data()
},computed: 
},mounted(),
methods: 
}if(!this
.vtype)  
var validfunc=vtypes[this
.vtype];
if(typeof validfunc=="undefined") 
//驗證
var rtn=validfunc.valid(val);
return
rtn; 
},blurhandler(e) ,
focushandler(e) ,
clearinput()}},
watch: ,
value :
function
(val,oldval)}}
}

定義好元件後，使用方法如下：

1.import 元件

import rxinput from '@/components/common/form/rxinput'

2.註冊元件

vue.component(rxinput.name,rxinput)

3.使用元件

這裡我們定義了v-model 我們通過資料繫結到元件上實現資料的雙向繫結。

實現雙向繫結，需要注意亮點：

1.定義乙個value 的屬性。

在上面的**中，我們可以看到我們定義了乙個value屬性

在唯讀的情況下  直接繫結現實。

if="right =='r'" class="readonlybgcolor">}

另外我們在data定義上，將value 賦值給了currentvalue。這個值繫結到輸入空間上

2.資料改變時呼叫方法。

this.$emit('input',this.currentvalue)

Vue 元件開發

將頁面拆分為多個元件，簡化了頁面開發，方便維護，元件也可以復用。元件的型別 元件開發流程 宣告 註冊 使用 demo 元件使用流程 div id div script varmyheader varmybody varmyfooter newvue template 使用元件 script 宣告是全...

Vue元件化開發

1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...

Vue元件化開發

前言 1 全域性元件註冊語法 vue.comonent 元件名稱，2 元件的用法 3 元件註冊注意事項 4 元件的命名方式 vue.component my component vue.component mycomponent 5 區域性元件註冊 var componenta var compon...