Vue.js 是一款流行的前端框架,其提供了一套漸進式的代碼庫,可用于構建用戶界面。在使用 Vue.js 時,通常會包含 vue.js 文件以及其他一些依賴項。
<!-- 引入 Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 在 HTML 中使用 Vue --> <div id="app"> {{ message }} </div> <!-- 創建一個 Vue 實例 --> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
在上面示例代碼中,<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
是引用 Vue.js 的方式。可以通過 CDN 或者下載本地文件引入 Vue.js。
在 HTML 代碼中,可以在任何 div 或者其他 HTML 元素上添加 Vue 實例。可以通過data
屬性在 Vue 實例的內部定義數據。在示例中,我們定義了一個名為message
的數據,它的初始值是Hello Vue!
。同時,在 div 元素中使用{{ message }}
模板語法來插入數據。
最后,在 <script> 標簽中,創建了一個新的 Vue 實例,并將其掛載到名為app
的 div 元素上。通過el
屬性指定要掛載到的元素的 ID,通過data
屬性將數據添加到實例中。