在開始使用Vue.js前,需要先安裝Vue.js庫。Vue.js提供了兩種方式進行安裝,一是使用CDN進行在線引用,另一種則是通過下載并安裝Vue.js。
對于此處介紹的安裝方式,我們以npm作為包管理器進行操作。以下是在命令行中進行Vue.js安裝的步驟。
npm install vue
在安裝完Vue.js后,我們需要添加Vue.js到我們的HTML頁面中。添加Vue.js的方式可以使用CDN進行在線引用或者本地引用(本地引用需要在項目中引入Vue.js并設(shè)置相應(yīng)路徑),這里我們以在線引用的方式為例。以下是Vue.js的CDN地址。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
引入Vue.js后,我們即可開始使用Vue.js的相關(guān)功能了。這里我們簡單使用Vue.js進行一個“Hello Vue.js”的輸出。以下是HTML代碼。
<div id="app">
{{ message }}
</div>
接下來是JavaScript代碼,使用Vue.js進行數(shù)據(jù)綁定和模板渲染。
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
以上代碼在HTML頁面上輸出了“Hello Vue.js!”。現(xiàn)在您已經(jīng)成功安裝了Vue.js并使用Vue.js輸出了一段“Hello Vue.js!”,您可以繼續(xù)學習Vue.js的其他功能以及使用姿勢。