這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)VvvebJs怎么簡(jiǎn)單拖拽即生成網(wǎng)頁(yè) ，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到永康網(wǎng)站設(shè)計(jì)與永康網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類(lèi)型包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋永康地區(qū)。

相關(guān)特性

1、組件和塊/片段拖放;

2、撤銷(xiāo)/重做操作;

3、一個(gè)或兩個(gè)面板界面;

4、文件管理器和組件層次結(jié)構(gòu)導(dǎo)航添加新頁(yè)面;

5、實(shí)時(shí)代碼編輯器;

6、包含示例php 腳本的圖像上傳;

7、頁(yè)面下載或?qū)С鰄tml或保存頁(yè)面在服務(wù)器上包含示例PHP 腳本;

8、組件/塊列表搜索;

9、Bootstrap 4組件等組件。

默認(rèn)情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類(lèi)型的組件和輸入進(jìn)行擴(kuò)展。

使用方式

要初始化編輯器，調(diào)用Vvveb.Builder.init。第一個(gè)參數(shù)是要加載以進(jìn)行編輯的URL，它必須位于相同的子域中才能進(jìn)行編輯。第二個(gè)參數(shù)是頁(yè)面加載完成時(shí)調(diào)用的函數(shù)，默認(rèn)情況下調(diào)用編輯器Gui.init();
結(jié)構(gòu)

Component Group是一個(gè)組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對(duì)象僅用于在編輯器左側(cè)面板中對(duì)組件進(jìn)行分組。例如，Widgets組件組只有兩個(gè)組件視頻和地圖，并被定義為如下

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];

Component是一個(gè)對(duì)象，它提供可以在畫(huà)布上放置的html以及在選擇組件時(shí)可以編輯的屬性，例如Video Component，具有Url和Target屬性的html鏈接Component定義為：

Vvveb.Components.extend("_base", "html/link", {
nodes: ["a"],
name: "Link",
properties: [{
name: "Url",
key: "href",
htmlAttr: "href",
inputtype: LinkInput
}, {
name: "Target",
key: "target",
htmlAttr: "target",
inputtype: TextInput
}]
});

在Component屬性集合中使用Input對(duì)象來(lái)編輯屬性，例如文本輸入，選擇，顏色，網(wǎng)格行等。例如，TextInput擴(kuò)展Input對(duì)象并定義為：

var TextInput = $.extend({}, Input, {
events: {
"keyup": ['onChange', 'input'],
},
setValue: function(value) {
$('input', this.element).val(value);
},
init: function(data) {
return this.render("textinput", data);
},
}
);

輸入還需要一個(gè)在編輯器html（在editor.html中）定義為 以上是借助瀏覽器翻譯工具，對(duì)官網(wǎng)的文檔進(jìn)行簡(jiǎn)單的翻譯，可能會(huì)有些不夠準(zhǔn)確的地方，感興趣的小伙伴可以直接查看相關(guān)文檔！

設(shè)計(jì)界面預(yù)覽

總結(jié)

VvvebJs是一個(gè)非常強(qiáng)大的網(wǎng)頁(yè)可視化生成構(gòu)建工具，讓不懂網(wǎng)頁(yè)設(shè)計(jì)的小伙伴們也能夠通過(guò)拖拽來(lái)生成美觀大方的網(wǎng)頁(yè)出來(lái)，讓設(shè)計(jì)網(wǎng)頁(yè)就像設(shè)計(jì)圖片一樣，VvvebJs特別適合展示型網(wǎng)頁(yè)，甚至可以不需要代碼就能完成一項(xiàng)復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)，總體來(lái)說(shuō)，VvvebJs是一個(gè)值得嘗試的工具！

上述就是小編為大家分享的VvvebJs怎么簡(jiǎn)單拖拽即生成網(wǎng)頁(yè) 了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。