検索

ホームページ >ウェブフロントエンド >Vue.js >vuejsにはどのような機能があるのでしょうか？

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

青灯夜游
青灯夜游オリジナル
2021-10-26 15:22:536353ブラウズ

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

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

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

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

1. データ レンダリング

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

例 1: 

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

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

例 2: 

    8ee39084f353b8cd4554f1e862f090af
        5440a9a6580508c1df68d3f056adcfc7
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        54bdf357c58b8a65c66d7c19c8e4d114
    16b28748ea4df4d9c2150843fecfba68
<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: 

7b9e7549f8274d6577302a05a9a959fa
  14c94224c52d5f3c96b83a32bf0ae031Now you see me94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
<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:&#39;#app_3_2&#39;,
            data:{
                todos:[
                    { text:&#39;Learn JavaScript&#39; },
                    { text:&#39;Learn Vue&#39; },
                    { text:&#39;Learn Other &#39; }
                ]
            }
        })

コンソールを開いて 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: &#39;#app5&#39;,
        data: {
        　　msg2: &#39;# hello &#39;
     　　}
    })

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:&#39;#app6&#39;,
            data:{
                message:&#39;Hello Vue.js!&#39;
            },
            methods:{
                reverseMessage:function(e){
                    this.message=this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
                }
            }
        })

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

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

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

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

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

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

例 7: 

     359b90552b49455a72fd011a2d73b952
         c34106e0b4e09414b63b2ea253ff83d6
            6b7aaeae674c2cc163cd7dde12a69fd5e353ee0ad68c807be61e217b71df5f91
        f6f112ef45f603be226bc581f9dd5e90
    16b28748ea4df4d9c2150843fecfba68
Vue.component(&#39;todo-item&#39;,{
            props:[&#39;todo&#39;],
            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 サイトの他の関連記事を参照してください。

vue.js if for 封装 循环 JS 事件 dom
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：vuejs2と1の違いは何ですか次の記事：vuejs2と1の違いは何ですか

関連記事

続きを見る