vue工作開發總結(七) 手動掛載元件

2021-10-06 17:57:37 字數 615 閱讀 3353

在一些需求中,手動掛載元件能夠讓我們實現起來更加優雅。比如乙個彈窗元件,最理想的用法是通過

命令式呼叫,就像elementui 的this.$message 而不是在模板中通過狀態切換,這種實現方式真是太糟糕了。對吧

來個簡單的例子:

import vue from 'vue'

improt message from '/message.vue'

//1構造子類

let messageconstructor = vue.extend(message)

//例項化元件

let messageinstance = new messageconstructor();

//$mount 可以傳入選擇器字元,表示掛載到改選擇器

//如果不傳入選擇器,將渲染為文件之外的元素,可以想象成document.createelement()在記憶體中生成dom

messageinstance.$mount();

// messageinstance.$el獲取的是dom元素

下面我們實現乙個簡單的message彈窗元件

message/index.vue

}

Vue基礎 七 Vue元件化開發

元件 component 是vue.js最強大的功能之一。元件可以擴充套件html元素,封裝可重用的 vue.component 元件名稱 第1個引數是標籤名稱,第2個引數是乙個選項物件 全域性元件註冊後,任何vue例項都可以用 執行效果 可以看到元件可以重複使用。元件引數的data值必須是函式同時...

工作中總結前端開發流程 vue專案

需求 原型 開發 測試 上線 1.版本控制 選用git進行版本控制。2.技術選型 3.環境配置 初始化專案完成後,提交 到遠端庫。為保持環境統一,推薦以下方式 4.構建優化 根據實際專案,更改webpack配置。5.目錄結構 開發結束後,一般也會經歷以下幾個過程 1.需求變更,重新開發 2.code...

VUE 開發總結筆記

vue開發過程中遇到的一些問題和總結,都是入門時可能會遇到的問題。當我們去看vue文件的時候,發現如果在例項建立之後新增新的屬性到例項上,它不會觸發檢視更新。比如我們我們開始建立了乙個物件例項,在例項建立之後為其增加新的屬性,我們發現這個屬性不能生效,此時需要使用this.set 方法。more t...