フロントエンドでのVUEの使い方-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

フロントエンドでのVUEの使い方

php中世界最好的语言

Nov 27, 2017 am 09:32 AM

使用フロントエンドどうやって

私はプロジェクトで 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: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue!&#39;
  }
})

理解するのは難しくないと思います。つまり、入力がメッセージ値にバインドされており、入力が変更されるとメッセージが双方向バインディングにより、同時にページの 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="{&#39;cur&#39;:curId===0}">html</a>
        <a href="javascript:;" @click="curId=1" :class="{&#39;cur&#39;:curId===1}">css</a>
        <a href="javascript:;" @click="curId=2" :class="{&#39;cur&#39;:curId===2}">javascript</a>
        <a href="javascript:;" @click="curId=3" :class="{&#39;cur&#39;: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: &#39;#tab&#39;,
        data: {
            curId: 0
        },
        computed: {},
        methods: {},
        mounted: function () {
        }
    })
</script>
</html>

VUE の使用方法についてはこれで終わりです。この事例を通じて、Vue についてもある程度理解できたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS3とJSを使って上昇正方形の動的背景を作る方法

CSS3の主な機能応用

CSS3でトランジションアニメーションを使用する方法

以上がフロントエンドでのVUEの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles