ホームページ >ウェブフロントエンド >htmlチュートリアル >vue.jsファイルをHTMLに導入する方法
vue.jsファイルをHTMLに導入する方法
- 藏色散人オリジナル
- 2021-02-05 09:48:2822725ブラウズ
vue.js ファイルを HTML に導入する方法: まず、Vue.js の公式 Web サイトから vue.js ファイルを直接ダウンロードし、次に「7ce0ebd8e037bb249ebeefeb4b26f4e3" を使用して、ローカルの vue.js ファイルを導入できます。
vue.js ファイルを HTML に導入するにはどうすればよいですか?
Vue.js は、人気のある JavaScript フロントエンド フレームワークであり、ユーザー インターフェイスを作成するためのオープンソース JavaScript フレームワークであり、Web 開発をより適切に整理および簡素化するように設計されています。 Vue の中心となるのは MVC パターンのビュー層ですが、同時にデータ更新を簡単に取得し、コンポーネント内の特定のメソッドを通じてビューとモデル間の対話を実現することもできます。では、vue.js ファイルを HTML に導入するにはどうすればよいでしょうか?
方法 1. Vue.js 公式 Web サイトから vue.js ファイルを直接ダウンロードし、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用してインポートできます。 ダウンロード アドレス: https://vuejs.org/js/vue.min.js次に、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用してローカルの vue.js ファイルを導入します<script src="vue/vue.min.js"></script>注: vue/vue.min.js は vue.js ファイルの相対アドレスです 方法 2: CDN メソッドを使用し、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用して vue.js ファイルを導入しますネットワーク内で。 海外で推奨されている比較的安定した CDN を以下に 2 つ紹介しますが、中国ではどちらが良いか分かりませんので、現時点ではローカルにダウンロードすることをお勧めします。
- 静的ファイル CDN (国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- #unpkg: https://unpkg.com/vue/dist/vue.js は、npm によってリリースされた最新バージョンとの一貫性を保ちます。
- #cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
- 推奨: "
<!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>3f1c4e4b6b16bbbd69b2ee476dc4f83a Tag
3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは、JavaScript などのクライアント側のスクリプトを定義するために使用されます。
script 要素には、スクリプト ステートメントを含めることも、src 属性を通じて外部スクリプト ファイルを指定することもできます。
必須の type 属性は、スクリプトの MIME タイプを指定します。
JavaScript の一般的な用途は、画像操作、フォーム検証、動的コンテンツ更新です。
3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの src 属性: 外部スクリプト ファイルの URL を指定します。
以上がvue.jsファイルをHTMLに導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLの基本構造解析次の記事：HTMLの基本構造解析