vuejsにはどのような機能があるのでしょうか？

Vuejs 関数: 1. 簡潔なテンプレート構文を使用して、宣言的にデータを DOM にレンダリングします。 2. "v-if" および "v-for" 命令を使用して、条件構造とループ構造を実装します。 3. "双方向のデータ バインディングを実現するための v-model" 命令、4. インターフェイスの対話を実現するためのイベント リスナーの使用、5. コンポーネント ベースの開発など。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue.js の基本機能について学びましょう~

1. データ レンダリング

Vue.js の中核それは、Concise テンプレート構文を使用して、宣言的にデータを DOM にレンダリングすることです。

例 1:

<div id="app">{{ message }}</div>

<script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </script>

これで、vue アプリケーションが生成されました。これで、データと DOM がバインドされました。app.message が変更されている限り、DOM もそれに応じて更新されます。

例 2:

    <div id="app_2">
        <span v-bind:title="message">
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </div>

<script type="text/javascript">
        var app_2=new Vue({
            el:&#39;#app_2&#39;,
            data:{
                message:&#39;You loaded this page on &#39;+new Date()
            }
        })
    </script>

例 2 には、Vue の特別な属性が含まれています v-bind ディレクティブも、対応する DOM 要素にレンダリングされます。

2. 条件とループ

Vue は DOM テキストをデータにバインドできるだけでなく、DOM 構造をデータにバインドすることもできます。

1. 条件

v-if 命令を使用して条件設定を実現でき、実際のアプリケーションで要素の表示を制御することも非常に簡単です。 。

例 3:

<div id="app_3">
  <p v-if="flags">Now you see me</p>
</div>

<script>
        var app_3=new Vue({
            el:&#39;#app_3&#39;,
            data:{
                flags:true
            }
        })
    </script>

同様に、データ属性を変更して応答を実現できます。

2. ループ

各命令には特別な機能があり、v-for 命令は配列のデータをバインドしてリストをレンダリングできます!

例 4:

<div id="app_3_2">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>

var app_3_2=new Vue({
            el:'#app_3_2',
            data:{
                todos:[
                    { text:'Learn JavaScript' },
                    { text:'Learn Vue' },
                    { text:'Learn Other ' }
                ]
            }
        })

コンソールを開いて app_3_2.todos.push({ text: 'New Project' }) と入力すると、新しい項目がリスト。

3. 双方向バインディング

Vue は、フォーム入力を簡単に実装できる v-model ディレクティブを提供します。アプリケーション状態間の双方向バインディング。

例 5:

    <div id="app5">
        <input type="text" v-model="msg2" />
        <p>{{msg2}}</p>
    </div>

var app5 = new Vue({
        el: '#app5',
        data: {
        　　msg2: '# hello '
     　　}
    })

4. インターフェイスの対話

ユーザーがアプリケーションと対話できるようにするために、 # を使用できます。 # #v-on この命令はイベント リスナーをバインドし、それを通じて Vue インスタンスで定義されたメソッドを呼び出します!

例 6:

     <div id="app6">
         <p>{{message}}</p>
         <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

var app6=new Vue({
            el:'#app6',
            data:{
                message:'Hello Vue.js!'
            },
            methods:{
                reverseMessage:function(e){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        })

注: メソッド内メソッドでは、ステータスのみが更新され、DOM には触れません!

5. コンポーネントの構築 (簡易版)

必ずコンポーネントを登録してくださいまずインスタンスを変更してください。

#ルート インスタンスを初期化する前に、必ずコンポーネントを登録してください。

それ以外の場合、登録せずに使用するとエラーが報告されます。

このコンポーネントは比較的強力で、拡張でき、再利用可能なコードをカプセル化しますが、非常に面倒です (*@ο@*) わぁ～よくご存知ですね！

例 7:

     <div id="app_7">
         <ol>
            <todo-item v-for="list in itemsList" v-bind:todo="list"></todo-item>
        </ol>
    </div>

Vue.component('todo-item',{
            props:['todo'],
            template:&#39;<li>{{todo.text}}</li>&#39;
        });
        var app_7=new Vue({
            el:&#39;#app_7&#39;,
            data:{
                itemsList:[
                    {text:&#39;Vegetables&#39;},
                    {text:&#39;Cheese&#39;},
                    {text:&#39;Whatever else humans are supposed to eat&#39;}
                ]
            }
        })

コンポーネントは非常に重要な部分です。上記の内容を理解した後、コンポーネント システムを注意深く学習する必要があります。習得する必要のある内容が数多く含まれています。もっと詳しく。

実際のプロジェクトで使用すると、複数のページに同じ部分があり、コンポーネント

が再利用されます

すごいのでやめてください~O(∩_∩)O~ ~関連する推奨事項: 「

vue.js チュートリアル

」

以上がvuejsにはどのような機能があるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。