溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

在html中引入vue.js文件的方法

發(fā)布時(shí)間：2021-02-05 10:17:30 來(lái)源：億速云 閱讀：1621 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下在html中引入vue.js文件的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在html中引入vue.js文件的方法：首先在Vue.js的官網(wǎng)上直接下載vue.js文件；然后通過(guò)“<script src="vue/vue.min.js"></script>”方式引入本地的vue.js文件即可。

怎么在html中引入vue.js文件？

Vue.js是一款流行的JavaScript前端框架，一個(gè)用于創(chuàng)建用戶界面的開(kāi)源JavaScript框架，旨在更好地組織與簡(jiǎn)化Web開(kāi)發(fā)。

Vue所關(guān)注的核心是MVC模式中的視圖層，同時(shí)，它也能方便地獲取數(shù)據(jù)更新，并通過(guò)組件內(nèi)部特定的方法實(shí)現(xiàn)視圖與模型的交互。

那么怎么在html中引入vue.js文件？

方法1、可以在 Vue.js 的官網(wǎng)上直接下載 vue.js 文件，并用 <script> 標(biāo)簽引入。

下載地址：https://vuejs.org/js/vue.min.js

然后使用<script> 標(biāo)簽引入本地的vue.js文件

<script src="vue/vue.min.js"></script>

注：vue/vue.min.js是vue.js文件的相對(duì)地址

方法2：使用 CDN 方法，用 <script> 標(biāo)簽引入網(wǎng)絡(luò)中的vue.js 文件。

以下推薦國(guó)外比較穩(wěn)定的兩個(gè) CDN，國(guó)內(nèi)還沒(méi)發(fā)現(xiàn)哪一家比較好，目前還是建議下載到本地。

  • Staticfile CDN（國(guó)內(nèi)） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

  • unpkg：https://unpkg.com/vue/dist/vue.js, 會(huì)保持和 npm 發(fā)布的最新的版本一致。

  • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

    Staticfile CDN（國(guó)內(nèi)）

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

    unpkg（推薦）

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

    cdnjs

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

    <script> 標(biāo)簽

    <script> 標(biāo)簽用于定義客戶端腳本，比如 JavaScript。

    script 元素既可以包含腳本語(yǔ)句，也可以通過(guò) src 屬性指向外部腳本文件。

    必需的 type 屬性規(guī)定腳本的 MIME 類型。

    JavaScript 的常見(jiàn)應(yīng)用時(shí)圖像操作、表單驗(yàn)證以及動(dòng)態(tài)內(nèi)容更新。

    <script> 標(biāo)簽的src屬性：規(guī)定外部腳本文件的 URL。

    以上是“在html中引入vue.js文件的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

    向AI問(wèn)一下細(xì)節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI
    助
    手