电商微信小程序开发_vue 组件开发原理与完成方法

vue 组件开发原理与实现方法详解       这篇文章主要介绍了vue 组件开发原理与实现方法,结合实例形式详细分析了vue.js组件开发的原理与实现方法,需要的朋友可以参考下

本文实例讲述了vue 组件开发原理与实现方法。分享给大家供大家参考,具体如下:

概要

vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等。

组件的开发

在vue 中一个组件,就是一个独立的.vue 文件,这个文件分为三部分。

1.模板

2.脚本

3.样式

我们看一个系统中最常用的组件。

 template 
 div 
 div v-if="right=='r'" {{value}} /div 
 div 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" 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",
 pro凡科抠图: {
 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
 * 验证表达式
 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;
 //验证
 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 
.ponent::after{
 content: '';
 display: block;
 clear: both;
.ponent input{
 float: left;
 width:calc(100% - .65rem);
.ponent a{
 float: left;
 width: .65rem;
 /style 

定义好组件后,使用方法如下:

1.import 组件

import RxInput from '@/mon/form/RxInput';

2.注册组件

ponent(RxInput.name, RxInput);

3.使用组件

 rx-input v-model="data.email" permissionkey="email" :required="true" vtype="email" :readonly="false" :permission="" /rx-input 

这里我们定义了v-model 我们通过将数据绑定到组件上实现数据的双向绑定。

实现双向绑定,需要注意两点:

1.定义一个value 的属性。

在上面组件的代码中,我们可以看到我们定义了一个value属性。

在只读的情况下 直接绑定显示。

 div v-if="right=='r'" {{value}} /div 

另外我们在data定义上,将value 赋值给了 currentValue 。这个值绑定到输入控件上。

2.数据改变时调用方法。

this.$emit('input', this.currentValue);

这样就实现了数据的双向绑定。

希望本文所述对大家vue.js程序设计有所帮助。


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://jzabcd.cn/ganhuo/3136.html