使用vue.js + jQuery开发组件
Posted 左直拳
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用vue.js + jQuery开发组件相关的知识，希望对你有一定的参考价值。
本模式有3个要点：
1）利用vue.js实现html封装进组件，让复用可以落地；
2）jquery负责操作dom；
3）js函数模拟面向对象中的类，运行时通过new方式创建对象，将dom标识符和业务数据作为参数传递，提高组件独立性，实现与调用页面解耦，且能够动态渲染。
近期做的一个项目，使用的框架十分古怪。spring boot，但没有使用默认的thymeleaf，而是前后端分离，同时前后端代码却又放在同一个项目工程里。前端使用了vue.js，但与我之前接触到的vue项目很不一样。一般vue项目，除了一个首页，基本都是组件，然后通过import的方式引用组件。组件里包含有html、css，内聚度极高，独立性极强，非常适合复用。但目前这个项目并没有使用组件，或者说，没有一般意义上的、供复用的组件，都是在本页，通过new Vue的方式，创建一个组件，里面只有js，仅供本页面使用。这样的话，所谓的组件基本并无多大意义，之所以用vue，可能只是看中了绑定数据这个便利。总的来说，这是一个四不像框架，大量使用了jquery，中间夹杂着一点vue，属出土文物。
1、一个组件
其实框架使用的vue.js版本并不算太低，是 Vue.js v2.4.1。按道理，搞成一个一般意义上的vue项目应该是可以的。但我对vue不熟悉，项目时间又太紧，未能对框架进行改造。不过由于项目是个业务系统，许多地方有雷同、类似的地方，十分有必要做成可复用组件。下面是一个例子，组件内封装了html，并且可以通过参数方式，将业务ID传入，动态处理和渲染。
选取城市组件。支持下拉框和复选框组2种方式。对外提供2个方法：
1）获取选取值
2）设置选取值
2、组件完整代码（city.js）
/*
区域公用插件
需要jquery和vue.js支撑
传入参数：
el,应用vue的dom标识符，如'#city1'
city,初始区域值(可选）
返回：
无。本插件是一个类，使用时构造实例。实例提供2个对外方法
getCity:获取选中城市，多个城市用“，”分隔
setCity:指定选中城市
e.g.
<div><h1>选择区域公共组件</h1></div>
<div>
<div id="cityComp1" class="item">
<div class="note">下拉框(type=0)</div>
<span>区域</span>
<citylist id="city1" type="0" ></citylist>
<div class="btn">
<input type="button" value="获取结果" οnclick="alert(comp1.getCity('city1'))" />
<input type="button" value="指定值" οnclick="comp1.setCity('city1','海口')" />
</div>
</div>
<div id="cityComp2" class="item">
<div class="note">复选框(type=1)</div>
<div class="city-container">
<span class="formCheckGroupText blackText">区域</span>
<citylist id="city2" type="1" class="bd" id=""></citylist>
</div>
<div class="btn">
<input type="button" value="获取结果" οnclick="alert(comp2.getCity('city2'))" />
<input type="button" value="指定值" οnclick="comp2.setCity('city2','琼海')" />
</div>
</div>
</div>
<script src="city.js" type="text/javascript" charset="utf-8"></script>
<script>
let comp1 = new CityCompnent('#cityComp1','三亚');
let comp2 = new CityCompnent('#cityComp2','文昌');
</script>
*/
function CityCompnent(el,city)
/* 供外部访问的方法 */
this.getCity = function(id)
return $('#' + id).val();
;
this.setCity = function(id,city)
$('#' + id).val(city);
if(type === CHECKBOXLIST)
setChkAll(false);
if(city !== ALL)
let chk = getChkObj(city);
$(chk).prop('checked',true).change();
;
/*
模板内容一定要包含在<div>里
*/
let DropDownListTpl = `<div :class="myClass">
<select :class="selectClass" class="form-control" :id="id" name="cityV" v-model="city">
<option v-for="item in citys" :value="item.vtext">item.vtext</option>
</select></div>`;
let CheckBoxListTpl = `<div :class="myClass"><input type="hidden" :id="id" name="cityV" v-model="city" />
<label class="form-check-label" v-for="item in citys">
<input v-if="item.vtext=='$city'" type="checkbox" checked group="cityGroup" class="form-check-input" :value="item.vcode" v-on:change="changeChk($event.target.value)" />
<input v-else type="checkbox" group="cityGroup" class="form-check-input" :value="item.vtext" v-on:change="changeChk($event.target.value)" />
<span>item.vtext</span>
</label></div>`;
const ALL = '全部';
const DROPDOWNLIST = 0;//下拉框
const CHECKBOXLIST = 1;//checkbox列表
let type = DROPDOWNLIST;
let comp =
props:["id","type","class","select-class"],
data()
return
myClass:this.class ? this.class : '',
selectClass: this.selectClass ? this.selectClass : '',
city:city||ALL,//选中城市字符串，以“，”分隔
citys:[]
,
methods:
changeChk(c)
if(c === ALL)//全部
let chkAll = getChkObj(ALL);
if($(chkAll).prop('checked'))//选了“全部”
setChkAll(true);
else
setChkAll(false);
else
let chk = getChkObj(c);
if(!$(chk).prop('checked'))//如果有一个选项取消，则“全部”应被取消
let chkAll = getChkObj(ALL);
$(chkAll).prop('checked',false).change();
getChecked(this);
,
created()
type = getType(this);
this.$options.template = getTpl(type);//根据属性值选用不同模板
let _this = this;
$.ajax(
type: 'GET',
url: 获取数据接口地址
contentType: "application/json",
success: function (r)
_this.citys = addItem(r.fieldList);
);
;
function getType(_this)
return (typeof _this.type !== 'undefined' && _this.type * 1 === CHECKBOXLIST) ? CHECKBOXLIST : DROPDOWNLIST;
function getTpl(type)//动态设置模板
return (type === CHECKBOXLIST) ? CheckBoxListTpl : DropDownListTpl;
function addItem(items)//添加选项
items.splice(0,0,
"valueid":0,"vcode":ALL,"vtext":ALL,"taskType":ALL,"status":ALL
);
return items;
function getChkObj(val)
return $('[group="cityGroup"][value="' + val + '"]')[0];
function setChkAll(isChecked)
$('[group="cityGroup"][value!="' + ALL + '"]').each(function()
$(this).prop('checked',isChecked).change();
);
function getChecked(_this)
let str = '';
$('[group="cityGroup"]:checked').each(function()
str += ',' + $(this).val();
);
str = (str.length > 0) ? str.substr(1) : str;
_this.city = str.replace(ALL + ',','');
new Vue(
el:el,
components:
'citylist': comp //名字(key)一定要是小写
);
;
3、使用组件完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件测试</title>
<script src="libs/vue.min.js"></script>
<script src="libs/jquery.min.js"></script>
<style>
.item
margin-top: 50px;
.btn
margin-top: 15px;
margin-left: 15px;
.note
background-color: #FFF9E6;
border: solid 1px #FFD77A;
padding: 10px;
font-size: 18px;
margin-bottom: 10px;
.city-container
width: 460px;
.bd
float: right;
</style>
</head>
<body>
<div><h1>选择区域公共组件</h1></div>
<div>
<div id="cityComp1" class="item">
<div class="note">下拉框(type=0)</div>
<span>区域</span>
<!-- 区域组件（下拉框模式）-->
<citylist id="city1" type="0" ></citylist>
<div class="btn">
<input type="button" value="获取结果" onclick="alert(comp1.getCity('city1'))" />
<input type="button" value="指定值" onclick="comp1.setCity('city1','海口')" />
</div>
</div>
<div id="cityComp2" class="item">
<div class="note">复选框(type=1)</div>
<div class="city-container">
<span class="formCheckGroupText blackText">区域</span>
<!-- 区域组件（复选框模式）-->
<citylist id="city2" type="1" class="bd"></citylist>
</div>
<div class="btn">
<input type="button" value="获取结果" onclick="alert(comp2.getCity('city2'))" />
<input type="button" value="指定值" onclick="comp2.setCity('city2','琼海')" />
</div>
</div>
</div>
</body>
</html>
<script src="city.js" type="text/javascript" charset="utf-8"></script>
<script>
let comp1 = new CityCompnent('#cityComp1','三亚');
let comp2 = new CityCompnent('#cityComp2');
</script>
4、代码解析
1）组件代码
整体结构是一个类
function CityCompnent(el,city)//el,应用vue的dom标识符
/* 供外部访问的方法 */
this.getCity = function(id)
;
this.setCity = function(id,city)
;
let DropDownListTpl = `下拉框模板`;
let CheckBoxListTpl = `复选框组模板`;
//组件核心
let comp =
props:["id","type","class"],
data()
return
myClass:this.class ? this.class : '',
city:city||ALL,
citys:[]
,
methods:
,
created()
type = getType(this);
this.$options.template = getTpl(type);
$.ajax(
type: 'GET',
url: ,
contentType: "application/json",
success: function (r)
);
;
。。。
//渲染组件
new Vue(
el:el,
components:
'citylist': comp //名字(key)一定要是小写
);
;
2）使用组件代码
<script src="libs/vue.min.js"></script>
<script src="libs/jquery.min.js"></script>
<div id="cityComp1" class="item">
<!-- 区域组件（下拉框模式）-->
<citylist id="city1" type="0" ></citylist>
</div>
<div id="cityComp2" class="item">
<!-- 区域组件（复选框模式）-->
<citylist id="city2" type="1" class="bd"></citylist>
</div>
<script src="city.js" type="text/javascript" charset="utf-8"></script>
<script>
let comp1 = new CityCompnent('#cityComp1','三亚');
let comp2 = new CityCompnent在 Vue.js 单文件组件中使用 jQuery 插件
使用 JQuery 在 PHP 中访问 Vue JS 组件数据