基於vue的視覺化程式設計

2021-08-30 10:48:24 字數 755 閱讀 4994

vue-layout用了muse-ui

感覺還不錯。

vue-layout 流程學習:

編譯流程:

參考文件:

中間preview

最右側控制項列表:

-》components.vue

mu-select-field muse-ui;mint-ui;iview-ui

我們來看mu-select-field 這個muse-ui元件:

元件用的版本是2:

textfield.vue:檔案就是定義了元件的template和export資料模型

當拖拽這個元件list的時候,相應components.vue 中dragstart函式,

e.datatransfer.setdata(『info』, json.stringify(info))

引數放在了json串info中

之後在preview.vue檔案中的drop函式中進行處理

preview.vue:

drop(e) { //鬆開拖放,e是容器元素,在這個函式處理

從e元素中得到引數,整理component,之後分成巢狀和非巢狀兩種。

非巢狀的就直接:呼叫如下函式:

components.splice(index, 0, component)

this.fresh()-》函式執行this.mount()函式

mount()函式:進入mount.js

mount.js:

函式得到引數,並註冊乙個vue

視覺化 Vue基礎

作者 jeskson 達達前端小酒館 vue框架,框架的作者,尤雨溪,元件化,快速開發的特點。生命週期 beforecreate 元件剛剛被建立 created 元件建立完成 生成beforemount 掛載之前 mounted 掛載之後 成熟beforedestory 元件銷毀前呼叫 destor...

視覺化程式設計storyBoard

1.針對空模板,先把自動建立的window刪除 2.建立乙個storyboard 3.在general中將maininte ce選為建立的storyboard 4.新建立的storyboard裡什麼也沒有,拖拽乙個viewcontroller上去 5.選中viewcontroller,在工具欄選擇第...

視覺化程式設計原理

視覺化程式設計原理 物件 安裝的程式 事件 滑鼠雙擊 單擊 右鍵 回車等快捷鍵的觸發 事件 我們對不同的物件實施相同的事件,結果可能不相同。為什麼?右鍵事件觸發的方法 不一樣。視覺化程式設計介面設計 ui 窗體 控制項 窗體是來存放控制項的容器 例子事件 click mouseclick load ...