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

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

php中世界最好的语言

リリース： 2017-11-27 09:32:00

オリジナル

9834 人が閲覧しました

私はプロジェクトで 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 サイトの他の関連記事に注目してください。