vue 组件开发原理与实现方法详解


Posted in Javascript onNovember 29, 2019

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

概要

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

组件的开发

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

1.模板

2.脚本

3.样式

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

<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
    },
    /**
     * 验证表达式
     */
    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>
.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.注册组件

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 我们通过将数据绑定到组件上实现数据的双向绑定。

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

1.定义一个value 的属性。

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

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

<div v-if="right=='r'" class="readOnlyBgColor">{{value}}</div>

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

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

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

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

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

Javascript 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
JQuery datepicker 使用方法
May 20 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
PHP7新特性简述
Jun 11 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 #Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 #Javascript
js中关于Blob对象的介绍与使用
Nov 29 #Javascript
js blob类型url的视频下载问题的解决
Nov 29 #Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 #Javascript
VuePress 中如何增加用户登录功能
Nov 29 #Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 #Javascript
You might like
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python算法学习之计数排序实例
2013/12/18 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
电子专业自荐信
2014/07/01 职场文书
装修施工安全责任书
2014/07/24 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python