Vue 3.0 終于正式啟動!這次升級重點關注了性能和可維護性,同時也引進了新的功能和改進。下面我們來看看如何開始使用 Vue 3.0。
首先,我們需要安裝 Vue 3.0 的包。可以使用 npm 或者 yarn 進行安裝:
npm install vue@next # 或者 yarn add vue@next
安裝完成后,我們需要在 HTML 中引入 Vue 3.0 的庫:
<!-- 引入 Vue 3.0 庫 --> <script src="https://unpkg.com/vue@next"></script>
現在我們可以創(chuàng)建一個簡單的 Vue 應用了。下面是一個 Hello World 的例子,使用了 Vue 3.0 的新語法:
<!-- HTML --> <div id="app"></div> <!-- JavaScript --> const App = { data() { return { message: 'Hello, Vue' } } } Vue.createApp(App).mount('#app')
通過 createApp 方法創(chuàng)建一個 Vue 應用,并將其掛載到指定的 DOM 元素上(這里是 id 為 app 的 div)。接著,我們定義一個 data 對象,它包含一個 message 屬性。我們可以在 HTML 中使用雙花括號語法({{}})來顯示這個屬性的值。
這只是 Vue 3.0 的一個簡單入門教程,更多關于 Vue 3.0 的內容,請查看官方文檔。