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 相关文章推荐
在javascript中关于节点内容加强
Apr 11 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
JS实现吸顶特效
Jan 08 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
Python解惑之整数比较详解
2017/04/24 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python实现整数的二进制循环移位
2019/03/08 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
python实现三种随机请求头方式
2021/01/05 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
党风廉政建设责任书
2014/04/14 职场文书
体育运动口号
2014/06/09 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
同意离婚答辩状
2015/05/22 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript