欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue表單驗(yàn)證插件的制作過程

 更新時(shí)間:2021年09月29日 09:54:16   作者:曾廣營  
這篇文章主要為大家詳細(xì)介紹了Vue表單驗(yàn)證插件的制作過程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

前言

前段時(shí)間,老大搭好了Vue的開發(fā)環(huán)境,于是我們愉快地從JQ來到了Vue。這中間做的時(shí)候,在表單驗(yàn)證上做的不開心,看到vue的插件章節(jié),感覺自己也能寫一個(gè),因此就自己開始寫了一個(gè)表單驗(yàn)證插件va.js。 當(dāng)然為什么不找個(gè)插件呢? vue-validator呀。

1.我想了下,一個(gè)是表單驗(yàn)證是個(gè)高度定制化的東西,這種網(wǎng)上找到的插件為了兼顧各個(gè)公司的需求,所以加了很多功能,這些我們不需要。事實(shí)證明,vue-validator有50kb,而我寫的va.js只有8kb。
2.另一個(gè)是,vue-validator的api我真的覺得長, 動不動就v-validate:username="['required']",這么一長串,而我設(shè)計(jì)的調(diào)用大概如——v-va:Money

當(dāng)然,本文僅是展示下,如何寫個(gè)滿足自己公司需求的vue表單驗(yàn)證插件。下面介紹下思路。

一、表單驗(yàn)證模塊的構(gòu)成

任何表單驗(yàn)證模塊都是由 配置——校驗(yàn)——報(bào)錯(cuò)——取值 這幾部分構(gòu)成的。

  • 配置: 配置規(guī)則 和配置報(bào)錯(cuò),以及優(yōu)先級
  • 校驗(yàn): 有在 change 事件校驗(yàn), 在點(diǎn)擊提交按鈕的時(shí)候校驗(yàn), 當(dāng)然也有在input事件取值的
  • 報(bào)錯(cuò): 報(bào)錯(cuò)方式一般要分,報(bào)錯(cuò)的文字有模板,也有自定義的
  • 取值: 將通過驗(yàn)證的數(shù)據(jù)返還給開發(fā)者調(diào)用

下面是我老大針對公司項(xiàng)目給我提出的要求

  • 集中式的管理 校驗(yàn)規(guī)則 和 報(bào)錯(cuò)模板。
  • 報(bào)錯(cuò)時(shí)機(jī)可選
  • 校驗(yàn)正確后的數(shù)據(jù),已經(jīng)打包成對象,可以直接用
  • 允許各個(gè)頁面對規(guī)則進(jìn)行覆蓋,對報(bào)錯(cuò)信息進(jìn)行自定義修改,以及允許ajax獲取數(shù)據(jù)后,再對規(guī)則進(jìn)行補(bǔ)充
  • 按順序來校驗(yàn),在第一個(gè)報(bào)錯(cuò)的框彈出錯(cuò)誤

我就很好奇地問, 為什么要這樣子呢?然后老大就跟我一條一條解答:

  • 集中式管理規(guī)則,和報(bào)錯(cuò)模板的好處,就是規(guī)則可以全局通用,一改全改。老大跟我說,光是昵稱的正則就改了三次。如果這些正則寫在各個(gè)頁面,o( ̄ヘ ̄o#)哼,你就要改N個(gè)頁面了
  • pc和移動的流程不一樣,pc很多校驗(yàn)都要在change事件或者input事件就校驗(yàn)并報(bào)錯(cuò)了,而移動則一般是要到提交按鈕再進(jìn)行校驗(yàn)。所以寫插件的時(shí)候要做好兩手準(zhǔn)備。然后,報(bào)錯(cuò)用的ui要可以支持我們現(xiàn)在用的layer插件。當(dāng)然以后這個(gè)報(bào)錯(cuò)的ui也可能變,所以你懂滴。
  • 當(dāng)然原來jq時(shí)代,我們的公用表單驗(yàn)證,就能驗(yàn)證完了,把數(shù)據(jù)都集合到一個(gè)對象里。這樣ajax的時(shí)候,就不用再去取值了。你這個(gè)插件耶要達(dá)到這個(gè)效果
  • 原來jq的那個(gè)公用腳本,正則和報(bào)錯(cuò)都集中到一個(gè)地方去了,在很多地方已經(jīng)很方便了。但是在一些頁面需要改東西的時(shí)候還不夠靈活。像RealName這個(gè)規(guī)則,最早是針對某個(gè)頁面配置的,用的是后端接口上的字段名。另一個(gè)支付頁,后端接口上的字段名改成了PayUser了,但是正則還是RealName的,原來我們是要復(fù)寫一下RealName。這個(gè)就不太方便也不好看了。另外一個(gè),支付金額,有最大值和最小值的限制,這個(gè)需要從后端獲取的。你也要考慮這個(gè)情況。要做到各個(gè)頁面上也能有一些靈活的地方可以修改規(guī)則,自定義報(bào)錯(cuò)等等。
  • 為什么要按順序校驗(yàn)???你忘了上次牛哥讓我們輸入框,從上到下,按順序報(bào)錯(cuò)。不然用戶都不知道哪個(gè)地方錯(cuò)了。還有規(guī)則也是要按順序的。哦哦哦??磥磉@次我放東西的時(shí)候,要用下數(shù)組了。盡量保持順序。

我聽了之后,大致懂了,原來之前自己寫的jq表單驗(yàn)證還有這么多不舒服的點(diǎn)。-_-|||接下來,是看看vue給我的好東西。讓我來寫

二、Vue 的插件怎么寫

我一個(gè)vue小白,怎么就開始寫vue插件了呢?那是因?yàn)橄虢鉀Q方案的時(shí)候,翻Vue文檔翻到了這里

這些東東,等我寫完va.js的時(shí)候,感覺尤大寫的真的是很清楚了。

其實(shí)我是想寫個(gè)指令來完成表單驗(yàn)證的事的。結(jié)果發(fā)現(xiàn)可能有2-3個(gè)指令,而且要再Vue.prototype上定義些方法,好讓各個(gè)子實(shí)例內(nèi)部也能拓展規(guī)則。于是老大說,這就相當(dāng)于插件了。這讓我很是吃鯨。

va.js主要用的是 Vue指令

Vue 文檔真的寫得很用心,但是我再補(bǔ)充一點(diǎn)吧

vnode.context 就是Vue的實(shí)例

我們做項(xiàng)目的時(shí)候,經(jīng)常一個(gè)根組件上掛著N個(gè)子組件,子組件上又可能掛著N個(gè)子組件。vnode.context獲取的實(shí)例,是綁定該指令的組件的實(shí)例。這個(gè)就相當(dāng)好用了。你可以做很多事情

當(dāng)然還用了點(diǎn)Vue.prototype
Vue.prototype.$method 就是可以在各個(gè)組件上調(diào)用的方法??梢栽诮M件內(nèi)部用 this.$method調(diào)用的

## 三、具體實(shí)現(xiàn)的思路 ##

核心思路如下圖:

規(guī)則的構(gòu)造函數(shù)

//va配置的構(gòu)造函數(shù)
function VaConfig(type, typeVal, errMsg, name, tag){
 this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag
}
  • type: nonvoid(非空), reg(正則), limit(區(qū)間), equal(與某個(gè)input相等),unique(不能相同)
  • typeVal: 根據(jù)不同type設(shè)置不同的值
  • errMsg: 自定義的報(bào)錯(cuò)信息
  • name: 用來傳ajax的字段,如Password, Username
  • tag:用來報(bào)錯(cuò)的名字,如‘銀行賬號',‘姓名'

設(shè)置了三種規(guī)則

1.默認(rèn)規(guī)則: 只要綁定指令,就默認(rèn)有的校驗(yàn)。 比如非空的校驗(yàn)。 可以額外加修飾符來去除
2.選項(xiàng)規(guī)則: 通過Vue指令的修飾符添加的規(guī)則。
3.自定義規(guī)則: Vue指令屬性值上添加的規(guī)則。
同一個(gè)type的規(guī)則只存在一個(gè),也就是說,如果type為reg(正則),那么會互相覆蓋。
覆蓋的優(yōu)先級: 自定義規(guī)則 > 選項(xiàng)規(guī)則 > 默認(rèn)規(guī)則

思路講的多了。也不知道怎么講了,下面大家直接看源碼把。

源碼

/*
* 流程: 綁定指令-> 設(shè)置配置(vaConfig) -> 校驗(yàn)(check) -> 報(bào)錯(cuò)(showErr) 或 自定義報(bào)錯(cuò)
 */

var va = {};

function unique(arr){
 var hashTable = {}, newArr = [];
 for(var i = 0;i < arr.length;i++){
 if(!hashTable[arr[i]]){
  hashTable[arr[i]] = true;
  newArr.push(arr[i]);
 }
 }
 return newArr;
}

function addClass(dom, _class){
 var hasClass = !!dom.className.match(new RegExp('(\\s|^)' + _class + '(\\s|$)'))
 if(!hasClass){
 dom.className += ' ' + _class
 }
}

//校驗(yàn)函數(shù)
function check(v, conditions){
 var res = 0;     //0代表OK, 若為數(shù)組代表是某個(gè)字段的錯(cuò)誤
 //驗(yàn)證函數(shù)
 var cfg = {
 //非空
 nonvoid: (v, bool)=>{
  if(bool){
  return v.trim() ? 0 : ['nonvoid'];
  }else{
  return 0;
  }
 },
 reg:(v, reg)=> reg.test(v) ? 0 : ['reg'],  //正則
 limit:(v, interval)=> (+v >= interval[0] && +v <= interval[1]) ? 0 : ['limit', interval],
 equal: (v, target)=>{       //和什么相等
  var _list = document.getElementsByName(target), _target
  for(var i = 0;i < _list.length;i++){
  if(_list[i].className.indexOf('va') > -1){
   _target = _list[i];
  }
  }
  return (_target.value === v) ? 0 : ['equal', _target.getAttribute('tag')]
 },
 unique:(v)=>{
  var _list = document.getElementsByClassName('unique'),
   valList = [].map.call(_list, item=>item.value)
  return (unique(valList).length === valList.length) ? 0 : ['unique']
 }
 }

 for(var i = 0;i < conditions.length;i++){
 var condi = conditions[i],
  type = condi.type,
  typeVal = condi.typeVal
 res = cfg[type](v, typeVal)
 // console.log(res, v, type,typeVal)
 //如果有自定義報(bào)錯(cuò)信息, 返回自定義的報(bào)錯(cuò)信息
 console.log(res)
 if(res){
  res = condi.errMsg || res
  break
 }
 }

 return res;
}

function showErr(name, checkResult){
 var type = checkResult[0],
  ext = checkResult[1] || []

 var ERR_MSG = {
 nonvoid: `${name}不能為空`,
 reg: `${name}格式錯(cuò)誤`,
 limit: `${name}必須在${ext[0]}與${ext[1]}之間`,
 equal: `兩次${ext}不相同`,
 unique: `${name}重復(fù)`
 }
 //使用layer來報(bào)錯(cuò),如果需要自定義報(bào)錯(cuò)方式,要把全文的layer集中起來包一層。
 layer.msgWarn(ERR_MSG[type])
}

/**
 * [VaConfig va配置的構(gòu)造函數(shù)]
 * @param {[string]} type [校驗(yàn)類型,如reg, limit等等]
 * @param {[*]} typeVal  [根據(jù)校驗(yàn)類型配置的值]
 * @param {[string]} errMsg [報(bào)錯(cuò)信息]
 * @param {[string]} name [用以ajax的字段名]
 * @param {[string]} tag [中文名,用以報(bào)錯(cuò)]
 */
function VaConfig(type, typeVal, errMsg, name, tag){
 this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag
}
//用來剔除重復(fù)的規(guī)則,以及規(guī)則的覆蓋。默認(rèn)后面的取代前面
Array.prototype.uConcat = function(arr){
 var comb = this.concat(arr)
  ,unique = {}
  ,result = []

 for(var i = 0;i < comb.length;i++){
 // console.log(i, comb[i])
 var type = comb[i].type
 if(unique[type]){
  var index = unique[type].index
  unique[type] = comb[i]
  unique[type].index = index;
 }else{
  unique[type] = comb[i]
  unique[type].index = i;
 }
 }

 for(var i= 0;i < 100;i++){
 for(var item in unique){
  if(unique[item].index === i){
  delete unique[item].index
  result.push(unique[item])
  }
 }
 }
 return result
}

//正則表
var regList = {
 ImgCode: /^[0-9a-zA-Z]{4}$/,
 SmsCode: /^\d{4}$/,
 MailCode: /^\d{4}$/,
 UserName: /^[\w|\d]{4,16}$/,
 Password: /^[\w!@#$%^&*.]{6,16}$/,
 Mobile: /^1[3|5|8]\d{9}$/,
 RealName: /^[\u4e00-\u9fa5 ]{2,10}$/,
 BankNum: /^\d{10,19}$/,
 Money: /^([1-9]\d*|0)$/,
 Answer: /^\S+$/,
 Mail: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
}

va.install = function(Vue, options){
 Vue.directive('va',{
 bind:function(el, binding, vnode){
  var vm = vnode.context
  ,name = binding.arg === 'EXTEND' ? el.getAttribute('name') : binding.arg
  ,tag = el.getAttribute('tag')
  ,baseCfg = []     //默認(rèn)的校驗(yàn)規(guī)則    --不用寫,默認(rèn)存在的規(guī)則(如非空)
  ,optionalConfig = []    //用戶選擇的配置成套  --與name相關(guān)
  ,customConfig = []     //用戶自定義的規(guī)則(組件中) --bingding.value
  ,option = binding.modifiers
  ,regMsg = el.getAttribute('regMsg') || ''

  var eazyNew = (type, typeVal) =>{return new VaConfig(type, typeVal, '', name, tag)}
  var regNew = (typeVal) =>{return new VaConfig('reg', typeVal, regMsg, name, tag)} //正則的新建

  el.className = 'va' + vm._uid
  el.name = name

  vm.vaConfig || (vm.vaConfig = {})
  var NON_VOID = eazyNew('nonvoid', true)

  //默認(rèn)非空,如果加了canNull的修飾符就允許為空
  if(!option.canNull){
  baseCfg.push(NON_VOID)
  }

  //需要立即校驗(yàn)的框
  if(option.vanow){
  el.addEventListener('change', function(){
   vm.vaResult || (vm.vaResult = {})
   vm.vaVal || (vm.vaVal = {})
   var value = el.value,
    conditions = vm.vaConfig[name],
    para = el.getAttribute('va-para')  //傳給回調(diào)的參數(shù)

   //如果允許為空的此時(shí)為空,不校驗(yàn)
   if(value === '' && option.canNull){
   vm.vaVal[name] = value
   return
   }

   vm.vaResult[name] = check(value, conditions);
   var _result = vm.vaResult[name]
   if(_result){
   //如果返回的是字符串,則為自定義報(bào)錯(cuò); 如果是數(shù)組,則使用showErr 報(bào)錯(cuò)
   typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)
   el.value = vm.vaVal[name] = ''
   return
   }
   vm.vaVal[name] = value
   vm.$vanow(para)   //寫在實(shí)例內(nèi)部method的回調(diào)
  })
  }

  //不能重復(fù)的
  if(option.unique){
  optionalConfig.push(eazyNew('unique', name))
  }

  //如果有在正則表里
  var regOptions = Object.keys(option);
  for(var i = 0;i < regOptions.length;i++){
  var regOption = regOptions[i]
  if(regList[regOptions[i]]){
   optionalConfig.push(regNew(regList[regOption]))
  }
  }

  //如果regList里有name對應(yīng)的,直接就加進(jìn)optionalConfig
  if(regList[name]){
  optionalConfig.push(regNew(regList[name]))
  }

  //用戶自定義的規(guī)則
  if(binding.value){
  customConfig = binding.value.map(item=>{
   let type = Object.keys(item)[0];
   if(type === 'reg'){
   return regNew(item[type])
   }else{
   if(type === 'unique'){
    addClass(el, 'unique')
   }
   return eazyNew(type, item[type])
   }
  })
  }

  //規(guī)則由 默認(rèn)規(guī)則 + 修飾符規(guī)則 + 寫在屬性的自定義規(guī)則 + 用戶直接加到vm.vaConfig里的規(guī)則 合并(后面的同type規(guī)則會覆蓋前面的)
  vm.vaConfig[name] || (vm.vaConfig[name] = [])
  vm.vaConfig[name] = baseCfg.uConcat(optionalConfig).uConcat(customConfig).uConcat(vm.vaConfig[name])
 },
 })

 Vue.directive('va-check', {
 bind:function(el, binding, vnode){
  var vm = vnode.context
  el.addEventListener('click', function(){
  var domList = document.getElementsByClassName('va' + vm._uid);
  vm.vaResult || (vm.vaResult = {})
  vm.vaVal || (vm.vaVal = {})

  for(var i = 0;i < domList.length;i++){
   var dom = domList[i],
    name = dom.name,
    value = dom.value,
    conditions = vm.vaConfig[name]

   var _result = check(value, conditions)
   //如果返回不為0,則有報(bào)錯(cuò)
   if(_result){
   //如果返回的是字符串,則為自定義報(bào)錯(cuò); 如果是數(shù)組,則使用showErr 報(bào)錯(cuò)
   typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)
   return
   }
   vm.vaVal[name] = value
  }
  //校驗(yàn)通過的回調(diào)
  vm.$vaSubmit()
  // layer.msgWarn('全部校驗(yàn)成功')
  console.log(vm.vaVal)
  })

 }
 })

 Vue.directive('va-test',{
 bind: function(el, binding, vnode){
  var vm = vnode.context
  el.addEventListener('click', function(){
  vm.vaResult || (vm.vaResult = {})
  vm.vaVal || (vm.vaVal = {})

  var dom = document.getElementsByName(binding.arg)[0],
   name = dom.name,
   value = dom.value,
   conditions = vm.vaConfig[name]

  var _result = check(value, conditions)
  //如果返回不為0,則有報(bào)錯(cuò)
 console.log(_result)
  if(_result){
   //如果返回的是字符串,則為自定義報(bào)錯(cuò); 如果是數(shù)組,則使用showErr 報(bào)錯(cuò)
   typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)
   return
  }

  vm.vaVal[name] = value
  var callback = Object.keys(binding.modifiers)[0]
  vm[callback]()
  })
 }
 })


 /**
 ** 在實(shí)例的monuted周期使用 api設(shè)置自定義配置
 */
 Vue.prototype.VaConfig = VaConfig
}

module.exports = va

現(xiàn)在項(xiàng)目已經(jīng)用起來了。當(dāng)然表單驗(yàn)證這種是高度定制化的。純粹分享個(gè)過程和思路。也算我這個(gè)vue新手的一次階段性成果吧。哈哈~

使用實(shí)例

第一個(gè)框,加了兩條指令

1.v-va:Password 這個(gè)代表使用配置表中password對應(yīng)的配置(包括非空和正則,默認(rèn)規(guī)則),同時(shí)應(yīng)用Password作為校驗(yàn)成功獲取的 數(shù)據(jù)對象的key
2.tag為報(bào)錯(cuò)顯示中此輸入框的名字

第二個(gè)框,為確認(rèn)框,也加了兩個(gè)指令
1.v-va:checkPassword.Password = "[{'equal':'Password'}]"
一般v-va后面的第一個(gè)字段為數(shù)據(jù)對象的key,他和正則對應(yīng)的名字有可能不同。
這個(gè)字段如果和配置表中的配置匹配,那么自然應(yīng)用配置。
如果不匹配,就要自己在后面用.的方式加配置(選項(xiàng)規(guī)則)。像這里的Password。

最后面還有一個(gè) 屬性值 "[{'equal':'Password'}]"(自定義規(guī)則)。
這個(gè)地方用了數(shù)組,即會按這個(gè)數(shù)組的配置來進(jìn)行校驗(yàn)。
同時(shí)這個(gè)數(shù)組有順序,順序代表規(guī)則的優(yōu)先級。
這個(gè)配置代表,這個(gè)框必須和上面那個(gè)Password的框值相等,否則報(bào)錯(cuò)。
另外確認(rèn)框不加入最后的結(jié)果數(shù)據(jù)對象。

2.tag 用來作為報(bào)錯(cuò)信息的名字

校驗(yàn)觸發(fā)按鈕 上面有一個(gè)指令 v-va-check
1.用來觸發(fā)校驗(yàn)
2.校驗(yàn)成功后,將數(shù)據(jù)對象存在實(shí)例的vaVal屬性下

根據(jù)上面的實(shí)例

規(guī)則的優(yōu)先級:
1.自定義規(guī)則 > 選項(xiàng)規(guī)則 > 默認(rèn)規(guī)則
2.規(guī)則中的優(yōu)先級依照數(shù)組順序

另外,可以看到為了使用者方便,我在我們團(tuán)隊(duì)中事先做了一些約定,并可能會用到 v-va、v-va-check、tag等指令,占用了實(shí)例的兩個(gè)屬性名vaConfig、vaVal。這些約定和設(shè)置可以使使用者使用方便(通過配置控制校驗(yàn)時(shí)機(jī), 校驗(yàn)成功后自然生成通過的數(shù)據(jù)對象,自定義報(bào)錯(cuò)信息等等)。但是也減少了這個(gè)插件的普適性。

此方案僅提供各位做思路參考。個(gè)人認(rèn)為,表單驗(yàn)證是高度定制化的需求,盡量根據(jù)各個(gè)業(yè)務(wù)情況進(jìn)行取舍。在我的方案中,并不像vue-validator一樣做了臟校驗(yàn)。

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程,請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟

    使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟

    本文主要介紹了使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法

    Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法

    vue中v-if 和v-else-if在頁面加載的時(shí)候,不滿足條件的標(biāo)簽會加載然后再消失掉,如果要解決這個(gè)問題,下面小編給大家?guī)砹藢?shí)例代碼,需要的朋友參考下吧
    2018-10-10
  • vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式

    vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式

    這篇文章主要介紹了vue監(jiān)聽瀏覽器的后退和刷新事件,阻止默認(rèn)的事件方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 使用vue實(shí)現(xiàn)計(jì)時(shí)器功能

    使用vue實(shí)現(xiàn)計(jì)時(shí)器功能

    這篇文章主要為大家詳細(xì)介紹了使用vue實(shí)現(xiàn)計(jì)時(shí)器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue3?v-bind="$attrs"繼承組件全部屬性的解決方案

    vue3?v-bind="$attrs"繼承組件全部屬性的解決方案

    這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-06-06
  • 如何使用 Vue Router 的 meta 屬性實(shí)現(xiàn)多種功能

    如何使用 Vue Router 的 meta 屬性實(shí)現(xiàn)多種功能

    在Vue.js中,Vue Router 提供了強(qiáng)大的路由管理功能,通過meta屬性,我們可以在路由定義中添加自定義元數(shù)據(jù),以實(shí)現(xiàn)訪問控制、頁面標(biāo)題設(shè)置、角色權(quán)限管理、頁面過渡效果,本文將總結(jié)如何使用 meta 屬性來實(shí)現(xiàn)這些常見的功能,感興趣的朋友一起看看吧
    2024-06-06
  • Vue3的組合式API中使用ref()函數(shù)的例子

    Vue3的組合式API中使用ref()函數(shù)的例子

    你們是否聽說過Vue3的組合式API?它可是Vue3的新玩法,把以前的Vue2組件函數(shù)轉(zhuǎn)化為了函數(shù)組件。好了,今天我要和大家分享的是如何在組合式API中使用ref()函數(shù),感興趣的朋友跟隨小編一起看看吧
    2023-06-06
  • Vue實(shí)現(xiàn)選擇城市功能

    Vue實(shí)現(xiàn)選擇城市功能

    這篇文章主要介紹了Vue實(shí)現(xiàn)選擇城市功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-05-05
  • Vue3配置vite.config.js解決跨域問題的方法

    Vue3配置vite.config.js解決跨域問題的方法

    跨域一般出現(xiàn)在開發(fā)階段,由于線上環(huán)境前端代碼被打包成了靜態(tài)資源,因而不會出現(xiàn)跨域問題,這篇文章主要給大家介紹了關(guān)于Vue3配置vite.config.js解決跨域問題的相關(guān)資料,需要的朋友可以參考下
    2024-07-07
  • VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動畫的詳細(xì)步驟

    VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動畫的詳細(xì)步驟

    這篇文章主要介紹了VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動畫,引入步驟大概是在 html 中通過引入 script 標(biāo)簽加載API服務(wù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09

最新評論