這篇文章將為大家詳細(xì)講解有關(guān)使用VueJS怎么獲取 URL的參數(shù)值，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
成都創(chuàng)新互聯(lián)秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷(xiāo)的理念，以專(zhuān)業(yè)定制企業(yè)官網(wǎng)，
成都做網(wǎng)站、網(wǎng)站建設(shè)，
小程序制作，網(wǎng)頁(yè)設(shè)計(jì)制作，
成都做手機(jī)網(wǎng)站，
網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專(zhuān)業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶(hù)都以感恩的心態(tài)奉獻(xiàn)自己的專(zhuān)業(yè)和所長(zhǎng)。
先給大家介紹下VueJS取得URL參數(shù)
vuejs取得URL中參數(shù)的值
地址：http://localhost:3333/#/index?id=001
結(jié)果：001
console.log(this.$route.query.id)
PS：下面給大家介紹下vue自定義表單生成器可根據(jù)json參數(shù)動(dòng)態(tài)生成表單效果
介紹
form-create 是一個(gè)可以通過(guò) JSON 生成具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結(jié)合內(nèi)置17種常用表單組件和自定義組件，再?gòu)?fù)雜的表單都可以輕松搞定。
文檔|github
演示項(xiàng)目:開(kāi)源的高品質(zhì)微信商城
功能
可生成任何Vue組件
自帶數(shù)據(jù)驗(yàn)證輕
松轉(zhuǎn)換為表單組件
通過(guò) JSON 生成表單
通過(guò) Maker 生成表單
強(qiáng)大的API，可快速操作表單
雙向數(shù)據(jù)綁定
事件擴(kuò)展
局部更新
數(shù)據(jù)驗(yàn)證
柵格布局
內(nèi)置組件17種常用表單組件
對(duì)比 1.x
速度更快
體積更小
更強(qiáng)大的全局配置
自定義組件更容易擴(kuò)展
更容易支持第三方 UI 庫(kù)
更少的 bug
示例
通過(guò) JSON 創(chuàng)建表單
通過(guò) API 操作表單
@form-create包說(shuō)明
名稱(chēng)說(shuō)明
| 名稱(chēng) | 說(shuō)明 |
|---|
| @form-create/iview | iview 版表單生成器 |
| @form-create/element-ui | element-ui 版表單生成器 |
| @form-create/core | form-create 核心包 |
| @form-create/utils | form-create 工具包 |
| @form-create/data | 省市區(qū)多級(jí)聯(lián)動(dòng)數(shù)據(jù) |
使用
以element-ui版本為例介紹如何在項(xiàng)目中使用 form-create
安裝
npm i @form-create/element-ui
掛載
全局注冊(cè)
import formCreate form '@form-create/element-ui';
Vue.use(formCreate);
局部掛載
import formCreate form '@form-create/element-ui';
export default {
components:{
formCreate:formCreaet.$form()
}
}生成表單
export default {
data () {
return {
//表單實(shí)例對(duì)象
$f:{},
//表單生成規(guī)則
rule:[
{
type:'input',
field:'goods_name',
title:'商品名稱(chēng)'
},
{
type:'datePicker',
field:'created_at',
title:'創(chuàng)建時(shí)間'
}
]
};
},
methods:{
onSubmit(formData){
//TODO 提交表單
}
}
};
效果
實(shí)例對(duì)象 $f
可以通過(guò) $f 快速操作表單，例如：
$f.hidden：隱藏指定組件
$f.validate：驗(yàn)證表單
$f.setValue：修改表單組件的值
$f.append：追加表單組件
自定義組件
生成
通過(guò)標(biāo)簽生成
{
type:'el-button',
name: 'btn',
props:{
type:'primary',
field:'btn',
loading:true
},
children:['加載中']
}通過(guò)模板生成
{
type:'template',
name:'btn'
template:'{{text}}',
vm: new Vue({
data:{
loading:true,
text:'加載中'
}
})
}轉(zhuǎn)換為表單組件
自定義組件轉(zhuǎn)換為表單組件后，可通過(guò)$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作組件，達(dá)到和內(nèi)置組件相同的效果
預(yù)定義
props
在自定義組件內(nèi)部通過(guò)props接收一下屬性
value表單的值
disabled組件的禁用狀態(tài)
例如:
vm = Vue({ props:{ value:String, disabled:Boolean }})
input 事件
通過(guò)input事件更新組件內(nèi)部的值
當(dāng)組件值發(fā)生變化后,通過(guò) input 事件更新值.例如:
vm.$emit('input',newValue);
掛載自定義組件
要生成的自定義組件必須通過(guò)Vue.component方法掛載到全局,或者通過(guò)formCreate.component方法掛載
例如:
formCreate.component('TestComponent',component);或者
Vue.component('TestComponent',component);生成
表單組件必須定義field屬性
JSON
{
type:'TestComponent',
value:'test',
field:'testField',
title:'自定義組件'
}Maker
formCreate.maker.create('TestComponent','testField','自定義組件').value('test')示例
自定義計(jì)數(shù)器按鈕組件,獲取按鈕點(diǎn)擊數(shù).該組件的功能和內(nèi)置組件相同
formCreate.maker.template('計(jì)數(shù)器-{{num}}', new Vue({
props:{
//預(yù)定義
disabled:Boolean,
value:Number,
},
data: function () {
return {
num: this.value,
}
},
watch:{
value(n){
this.num = n;
}
},
methods: {
onClick: function () {
this.num++;
//更新組件內(nèi)部的值
this.$emit('input',this.num);
},
},
}), 'tmp', '自定義 title').value(100).props('disabled',false)為什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。
關(guān)于使用VueJS怎么獲取 URL的參數(shù)值就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
標(biāo)題名稱(chēng)：使用VueJS怎么獲取URL的參數(shù)值-創(chuàng)新互聯(lián)
標(biāo)題鏈接：
http://weahome.cn/article/gopjo.html
重慶分公司
重慶分公司
