私はプロジェクトで VUE を使用してきましたが、VUE についての紹介記事を書いたことはありませんでした。そこで、今日は VUE を紹介するいくつかの事例を紹介します。
関連ビデオ チュートリアルの推奨事項: Vue.js チュートリアルの推奨事項: 2018 年の最新の 5 つの vue.js ビデオ チュートリアルの選択
1 この記事で使用されている vue のバージョンは 2.4.2 です。新しいバージョン 誰もが違いに注意する必要があります。
2. また、あなたは html、css、javascript の基本的な知識を持っていること、また、公式 Web サイトの基本的な概要を読んでいること、および一般的に使用される vue の命令を理解していることを前提としています。 v -model、v-show、v-if、v-for、v-on、v-bind など)!フロントエンドが初めての方は記事を読むときに戸惑うかもしれませんので、まずは基本を学んで基礎知識を習得してから読むことをおすすめします！
3. 以下の例については、記事を読みながら実行することをお勧めします。こうすることで、あなたの思考は非常に明確になり、混乱が少なくなります。記事が長すぎると感じることはありません（記事が長いのは、より多くの情報を読んでもらうためであり、繰り返しのコードが多数掲載されています。これらのコード、html、cssなどは完全にスキップできます） 。記事はより詳細で長いため、記事だけを読むと読み終わらない可能性があります。
4. これらの例は私自身の日々の実践プロジェクトから取られたもので、コードは github (vue-demos) で言及されています。皆さんもスターになってください。 ！
2.vueとは
Vueはデータドリブン、コンポーネント化の考え方で構築された非常に人気のあるフロントエンドフレームワークであり、angularと並んで3大フロントエンドフレームワークとも呼ばれています。そして反応します。 Angular や React と比較すると、Vue は軽量でパフォーマンスが高く、使いやすいです。また、vue の概要と公式 Web サイトのコア機能の紹介を参照してください。簡単かつ大まかに理解すると、vue で開発する場合、データを操作するだけで、vue がそれを処理し、そのデータに基づいて DOM を変更します (私の理解が間違っているかどうかはわかりません。もしあればアドバイスをお願いします)あなたがやる）。
以下は最も簡単な説明例です
コードは次のとおりです
html
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
js
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})理解するのは難しくないと思います。つまり、入力がメッセージ値にバインドされており、入力が変更されるとメッセージが双方向バインディングにより、同時にページの HTML ({{ message }}) が変更されました。
それでは、例から学びましょう!
3. タブ
原理分析と実装
これは非常に簡単で、クリックするだけで表示が切り替わります。しかし、誰もがそれを認識する必要があります。これを理解したら、次の 2 つを見てください。この例は、ウォーミングアップと慣れの効果としてのみ使用してください。
このステップには 1 つのステップしかなく、原理は同じです。コードに直接コメントします。コメントを読めば誰でも理解できます。
完全なコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
font-family:"Microsoft YaHei";
}
#tab{
width: 600px;
margin: 0 auto;
}
.tab-tit{
font-size: 0;
width: 600px;
}
.tab-tit a{
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 16px;
width: 25%;
text-align: center;
background: #ccc;
color: #333;
text-decoration: none;
}
.tab-tit .cur{
background: #09f;
color: #fff;
}
.tab-con div{
border: 1px solid #ccc;
height: 400px;
padding-top: 20px;
}
</style>
<body>
<div id="tab">
<div>
<!--点击设置curId的值 如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
<a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
<a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
<a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
<a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
</div>
<div>
<!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
<div v-show="curId===0">
html<br/>
</div>
<div v-show="curId===1">
css
</div>
<div v-show="curId===2">
javascript
</div>
<div v-show="curId===3">
vue
</div>
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#tab',
data: {
curId: 0
},
computed: {},
methods: {},
mounted: function () {
}
})
</script>
</html>VUE の使用方法についてはこれで終わりです。この事例を通じて、Vue についてもある程度理解できたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:
以上がフロントエンドでのVUEの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AMHTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AMhtmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。
HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AMHTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AMHTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
