Vueの命令（A）

その他 2019-06-28 11:30:13 訪問数: null

Vueの命令（A）

命令：DOMの結合特性

1. V-HTML

要素を更新 innerHTML

データは、（）のinnerHTMLを使用するのと同じDOMのコンテンツのデータであってもよい（）タグを解析することができます

例えば：

<body>
  <div id="app">
    <p v-html = "h"></p>
  </div>
</body>
<script>
	var vm = new Vue({
    el: '#app',  //el表示我们的实例需要一个模板
    data: {  //是用来给实例定义数据的
     h: '<h3> hello Vue.js </h3>'
    }
  })
</script>

2. V-テキスト

要素を更新 textContent

データ（のTextContentを使用することと等価）、DOMの内容で表示することができます

例えば：

<body>
  <div id="app">
    <p v-text = "msg"></p>
    <p v-text = " flag && 1 || 2 " > </p>
  </div>
</body>
<script>
var vm = new Vue({
    el: '#app',
    data: {
     msg: 'hello Vue.js',
     flag: true
    }
  })
</script>

V-ショーをレンダリング3.条件

  • 使用法：

    真理値の発現、スイッチング素子のdisplayCSSプロパティ。

    条件変更コマンドは、遷移効果を誘発します。

  • DOMは、隠された表示を制御することができる（この操作指示表示プロパティがDOMです）

例えば：

<body>
  <div id="app">
    <h3> v-show </h3>
      <p v-show = "showFlag"> v-show指令 </p>
  </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',//给跟实例一个模板（ 挂载 ）
        data: { 
          showFlag: true
        }
      })
</script>

4.レンダリングV-IF条件

  • 使用法：

    表現の真と偽の値の条件に応じて要素をレンダリングします。ときに、スイッチング素子とその結合データ/アセンブリが破壊され、再構築されます。要素がある場合<template>、ブロックとして、その内容の提案された条件。

    条件変更コマンドは、遷移効果を誘発します。

  • DOM（創造と破壊）の有無を制御することができます

例えば：

<body>
  <div id="app">
    <h3> v-show </h3>
      <p v-show = "showFlag"> v-show指令 </p>
    <hr>
    
    <h3> v-if - 单路分支 </h3>
      <p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
      
    <h3> v-if - 双路分支 </h3>
      <p v-if = "ifFlag">  双路分支 成立  </p>
      <p v-else> 双路分支不成立 </p>
      
    <h3> v-if - 多路分支 </h3>
    <p v-if = " type === 'A'"> A </p>
    <p v-else-if = " type === 'B'"> B </p>
    <p v-else> C </p>
  </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',//给跟实例一个模板（ 挂载 ）
        data: { 
          showFlag: true,
          ifFlag: false,
          type: 'A'
        }
      })
</script>

V-他の条件は、レンダリング

  • 制限事項：前の兄弟を持っている必要がありますv-ifかv-else-if

  • 使用法：

    v-ifまたはv-else-if追加「elseブロックを。」

例えば：V-IFリファレンス

6.条件レンダリングV-ELSE-IF

  • 制限事項：前の兄弟を持っている必要がありますv-ifかv-else-if

  • 使用法：

    それは表してv-if、「他のブロックの場合」。これは、呼び出しを連鎖させることができます。

例えば：V-IFリファレンス

要約：

（1）V-IF V-ショーの違い対

  • 操作である場合、V-DOM要素（成分）を作成または破壊します
  • V-ショーの表示動作は、DOM要素の属性であります
  • 単一分岐した、多分岐、ブランチデュアル：V-場合、様々な形態を使用することができます
  • V-ショーは1形式だけを書きます

（2）実用的：選択したこれら二つのプロジェクトを使用する方法

  • 一般的には、V-場合は高いが、オーバーヘッドの切り替え、およびレンダリングの高い初期費用をV-示しています。
  • したがって、スイッチングは非常に頻繁に使用される場合、好ましくはV-ショーです。
  • 条件はめったに実行時に変更されていない場合は、V-場合は、より良いを使用しています。

7. V-のためのリストをレンダリング

使用法：

ソースデータ要素または成形に基づいて複数のブロックをレンダリングします。

データタイプは、オブジェクトの配列、JSONデータ・タイプ、データのネストされたタイプであってもよいです。

（1）データ型が配列です。

V-ため= "ARRで（項目、インデックス）"

ここで、アレイARRの各要素項目のデータソースは、インデックスが現在のアイテムのインデックスであります

例えば：

<body>
    <div id="app">
        <h3> 数组 </h3>
        <ul>
            <li v-for=" (item,index) in arr "  v-bind:key = "index">
                <p> item :{{ item }} -- index: {{ index }}</p>
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3, 4]
        }
    })
</script>

結果：

配列

  • アイテム：1 - インデックス：0
  • アイテム：2 - インデックス：1
  • アイテム：3 - インデックス：2
  • アイテム：4 - インデックス：3

（2）データ型オブジェクト

V-のための= "（アイテム、キー、インデックス）は、objで"

ここで、OBJの項目の属性値

例えば：

<body>
    <div id="app">
        <h3> 对象 </h3>
        <ul>
            <li v-for="(item,key,index) in obj"  v-bind:key = "index">
                <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            obj: {
                id: 1,
                name: 'huhu',
                sex: 'man',
                age: 18
            }
        }
    })
</script>

結果：

オブジェクト

  • 値：1 - キー：ID - 0
  • 値：HUHU - キー：名前 - 1
  • 値：男性 - キー：セックス - 2
  • 値：18 - キー：年齢 - 3

（3）データ型は、データ型であり、JSON

例えば：

<body>
    <div id="app">
        <h3> json </h3>
        <ul>
            <li v-for="(item,index) of json" v-bind:key = " item.id ">
                <p> id: {{ item.id }} </p>
                <p> task: {{ item.task }} </p>
                <p> {{ index }} </p>
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            json: [
                {
                    id: 1,
                    task: '爬山'
                },
                {
                    id: 2,
                    task: '跑步'
                }
            ]
        }
    })
</script>

結果：

JSON

  • ID：1

    タスク：登山

    0

  • ID：2

    タスク：実行

    1

（4）データは、ネストされたタイプであります

例えば：

<body>
    <div id="app">
        <h3> 嵌套 </h3>
        <ul>
            <li v-for=" item in lists " :key = "item.id">
                <p> id: {{ item.id }} </p>
                <ul>
                    <li v-for="todo in item.todos">
                        todos中的数据 -- {{ todo }}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            lists: [
                {
                    id: 1,
                    todos: {
                        id: 1,
                        name: 'huhu'
                    }
                },
                {
                    id: 2,
                    todos: {
                        id: 2,
                        name: 'dudu'
                    }
                }
            ]
        }
    })
</script>

結果：

ネスティング

  • ID：1
    • 中--1データトドス
    • データドス - HUHU
  • ID：2
    • データドス - 2
    • データドス - ドゥドゥ

（5）キー

公式の説明：

key主に仮想DOMアルゴリズムのVue、比較して識別vnodeの古いものと新しいノードで使用される特殊な属性。いいえキー場合は、Vueが修復する/再使用するのと同じアルゴリズム型の要素をダイナミックな要素を使用し、可能な試みを最小限に抑えることができます。キーを使用して、キーの変化に基づいて要素の順序を変更し、要素を削除しますキーが存在しません。

子供が同じ親要素が持っている必要があります持っているユニークなキーを。重複キーエラーをレンダリングする原因となります。

最も一般的なユースケースが結合されますv-for。

V-のために関連して使用します：

各サイクルのリストへの鍵は、一意の識別子を追加します

キーバインドするV-bindコマンドを使用します：

<div v-for = " (item,index) in lists" v-bind:key = " item.id "></div>

「：」とキーの間にスペースなしのコロンに注意してください！

あなたはIDを持っているなら、私たちはされていない場合、我々は、インデックスを選択します、IDを使用します

V-バインド：個々のバインディング：DOMの属性にバインドデータを

短縮形：

<div v-for = " (item,index) in lists" :key = " item.id "></div>

8. V-上

このモジュールを学ぶ前に、まずいくつかの形式を追加するJavaScriptのイベントを見て：

  1. イベントバインディング

dom.onclick =関数（）{}

DOM：イベントソース

上：結合事象の形

クリック：イベントの種類を

関数（）{}イベントハンドラ

  1. イベントリスナー：addEventListenerを

  2. ラベルでの直接結合事象

    <div onclick = "事件名称"></div>

    VUEは、彼を束縛も財産DOMの形で、三分の一を使用しています

    <div v-on:click = "事件名称"></div>

    なぜHTMLでのイベントに耳を傾けますか？

    あなたは気づくかもしれない懸念の分離（関心の分離）長年の伝統と、このイベントリスナーの仕方反します。しかし、すべてのVue.jsイベント処理方法及び式が厳密にViewModelに現在のビューにバインドされているので、それはメンテナンスのあらゆる困難を生じさせない、心配しないでください。実際には、使用することは、v-onいくつかの利点があります。

    1. HTMLテンプレートの方法で一目で簡単に対応するJavaScriptのコードを見つけることができるようになります。
    2. 手動でJavaScriptでイベントをバインドする必要はありませんので、あなたのViewModelコードは、非常に純粋なロジックとすることができ、DOMは完全に切り離され、簡単にテストします。
    3. ViewModelには、破壊された場合は、すべてのイベントハンドラが自動的に削除されます。あなたはそれらをきれいにする方法を心配する必要はありません。

    V-での使用：

    イベントソース

    イベントバインディングフォーム

    イベントの種類

    イベントハンドラ

    V-上：のeventType = "れるhandlerName"

    ショート-ON V： - > @

    methodsメソッドオブジェクトの定義

    EG1：

    <body>
  <div id="app">
    <button v-on:click = "helloHandler"> 点击 </button>
    <button @click = "helloHandler"> 点击 </button>
  </div>
</body>
<script>
	var vm = new Vue({
    	el: '#app',
    	methods: {
      	// 存放事件处理程序
      	helloHandler () {
        	alert( 'hello' )
      	}
    	}
  	})
  console.log( 'vm', vm )
</script>

    質問：関数呼び出し、いくつかの方法は何ですか？

    1.ダイレクトコール（）

    2.イベント

    EG2：

    <body>
  <div id="app">
    <button v-on:click = "helloHandler( 100 )"> 点击 </button>
    <button @click = "helloHandler( 200 )"> 点击 </button>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler ( num ) {
        alert( num )
      }
    }
  })
  console.log( 'vm', vm )
</script>

    EG3：

    イベントオブジェクトは、通常は使用することができます

    イベントハンドラでは、その上に電子を書きます

<body>
  <div id="app">
    <button v-on:click = "helloHandler"> 点击 </button>
    <button @click = "helloHandler"> 点击 </button>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler ( e ) {
        console.log( e )
      }
    }
  })
  console.log( 'vm', vm )
</script>

EG4：

質問：イベントハンドラは3つのパラメータを持っている場合は、3番目の引数は、イベントオブジェクトeがあり、どのように達成するために？

分析：私たちは、イベントハンドラは、第三パラメータeにイベントオブジェクトですされていないことがわかったが、未定義

解決策：関数が実行され、イベントオブジェクトを表現するために、実際のパラメータ$イベントを渡します

<body>
  <div id="app">
    <!-- <button v-on:click = "helloHandler"> 点击 </button> -->
    <button @click = "helloHandler( 10,20,$event)"> 点击 </button>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler ( a,b,e ) {
        console.log( a )
        console.log( b )
        console.log( e )
      }
    }
  })
  console.log( 'vm', vm )
</script>

Eg5：

事業内容：データリストに新しいデータを追加するには、このボタンをクリックしてください

質問：添字が変化を検出することができませんが、私たちは今、それが検出された参照します

質問：私たち= 0は、配列の長さを通じクリアする場合は、この変更は、その後VUE検出されず

回避策：スプライス

​

質問：私たちは、直接配列の添字の下でデータを修正するの変化を検出するために見つけることができません

回避策：Vue.set /本$セット。

<body>
  <div id="app">
    <button @click = "add"> + </button>
    <button @click = "remove"> - </button>
    <button @click = "indexHandler"> 修改第二条数据 </button>
    <ul>
      <li v-for =" item in lists " :key = "item.id">
        {{ item.task }}
      </li>
    </ul>
    <hr>
    <button @click = "arrChange"> 修改第二条数据 </button>
    <ul>
      <li v-for = " (item,index ) in arr " :key = "index">
        {{ item }}
      </li>
    </ul>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3],
      lists: [
        {
          id: 1,
          task: '锻炼1'
        },
        {
          id: 2,
          task: '敲代码'
        }
      ]
    },
    methods: {
      add () {
        // console.log( this )
        this.lists.push({
          id: this.lists.length + 1,
          task: '打篮球'
        })
      },
      remove () {
        this.lists.pop()
      },
      indexHandler () {
        //将列表中的第二个数据中的task任务修改为 撸猫
          this.lists[1] = {
            id: 2,
            task: '骏哥'
          }
        
        // 将整个列表清空
          // this.lists.length = 0 //Jiancebud

          // this.lists.splice( 0 )

      },
      arrChange () {
        // this.arr[ 1 ] = '骏哥'  不可以检测到的

        // this.$set( this.arr,'1','骏哥' )
        Vue.set( this.arr,'1','骏哥')
      }
    }
  })
</script>

9.Whereモデル

使用法：

フォームコントロールまたはコンポーネントに結合双方向を作成します。

  • 結合双方向データ
  • デフォルト値バインディング値
  • Vモデルは、フォーム要素に適用されます

例えば：

<body>
  <div id="app">
    <input type="text" v-model = "msg">
    <p> {{ msg }} </p>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js'
    }
  })
</script>

おすすめ

転載: blog.csdn.net/huhu_nihao/article/details/92848893
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com