Vue基本命令v-for,v-show/if,v-else/else-if,v-bind,v-onおよび総合業務

39299 ワード

mutache文法糖
  • 基礎テンプレート構文
  • v-for
  • v-for
  • 配列v-for="(item,index)in arr"itemはarrの各要素
  • である
  • オブジェクトv-for="(item,key,index)in obj"itemはobjの属性値
  • である
  • jsonタイプデータ
  • ネスト型データ
  • key:ループのないリストに一意の識別子を追加
  • 命令v-bindを使用してkey
    div>

    !!! id, id, , index
    v-bind: : dom

        
    div>
        // for( var i = 0 ; i < 100; i ++ ){}
    
        // for( var i in arr ){}
    
        // for ( var i of arr ) {}
    
    をバインドする
    v-showとv-ifの い
  • :(dom にバインドされている)
  • v-showはdomの を することができる(この はdomのdisplay を する)
  • v-ifはdomの を することができる( および )
  • ( )【ダイヤモンド】
  • v-if vs v-show
  • ユーティリティ:プロジェクトでこの2つの を
  • v-if はdom (コンポーネント)の または
  • である.
  • v-show はdom のdisplay
  • である.
  • v-ifは、 、 、
  • の な を することができる.
  • v-showは1つの
  • しか けません
  • まとめ: に、v-ifはより いスイッチングオーバーヘッドを し、v-showはより い レンダリングオーバーヘッドを する.したがって、 に に り える がある は、v-showを いるのが ましい. に が されない は、v-ifを するとよい.

  • v-else/v-else-if
  • v-ifと しなければならない で できない 、エラーテンプレートコンパイルエラー
    	<div id="box">
        <div style="width: 100px;height: 100px;background: black;" v-if="show">div>
        <div style="width: 100px;height: 100px;background: aqua;" v-else-if="">div>
        <div style="width: 300px;height: 300px;background: blue" v-else="">div>
    div>
    
    
    
    <script>
        new Vue({
            
            el: "#box",
            data(){
            
                return {
            
                    show: true
                }
            }
        })
    script>
    
  • v-html/v-text
  • v-html htmlタグ
    <div id="box">
        <div v-html="msg">div>
    div>
    
    <script>
        new Vue({
            
            el: "#box",
            data(){
            
                return {
            
                    msg:"

    121212

    "
    } }, methods: { say() { } } })
    script>
  • v-text テキスト(v-text み りテキストhtmlラベルが めない)
     1 <div id="box">
     2     <div v-text="msg">div>
     3 div>
     4 
     5 <script>
     6     new Vue({
            
     7         el: "#box",
     8         data(){
            
     9             return {
            
    10                 msg:"11111"
    11             }
    12         },
    13         methods: {
            
    14             say() {
            
    15                 alert(111);
    16             }
    17         }
    18     })
    19 script>
    
  • v-bind: classクラス バインドとstyle
  • vueでdomにクラス を する
  • domにクラス
  • をバインド
  • vueのクラス バインド-オブジェクト :domのプロパティclassとデータバインド :v-bindデータのkey、 たちはバインドされたオブジェクトのkeyと じですが、この2つのものが なることを っておく があります
        

    p> size , undefined, false

    p> size , true,

    p> : v-bind:class = "{ ( true) }" : v-bind:class = "{ : boolean }" : v-bind:class = "{ [data]: boolean }"

         new Vue({
             
            el: '#app',
            data: {
             
            msg: 'hello Vue.js',
            s: 'size',
            bg_color: 'bg_color',
            flag: true
            }
        })
    
  • vueでクラス がバインドされた - の 【 】 :v-bind:class=「[データ]」
        

    p>

    p>

    p>

    p>

  • クラス バインドは、 のクラス
  • を きしません.
  • クラス をバインドする はdomを する である: データによってクラス を するために、クラス dom
  • styleスタイルのバインドv-bind:style=""
  • オブジェクトの
        

    p>

  •     

    p>

    p>


  • v-on:コマンドeventイベントバインド
    Vueイベントの き し:
  • :javascriptイベントにいくつかの が されました
  • イベントバインド( イベント)dom.onclick=function(){}dom:イベントソースon:イベントをバインドする click:イベントタイプfunction(){}イベント
  • イベントリスニング(イベントバインディング ):dom.addEventListener(‘click’,function(){},false)addEventListener( オブジェクトバインディングで のイベントが きされない!)false:バブル (デフォルト)trueを す:キャプチャ
  • を す
  • ラベルにイベントをバインドする
        
    div> vue , dom
        
    div>
    Vue :
        
    div>
    • click
    • handerName
      • v-on: — > @
      • : ?
        ()
        
    : の に、イベントオブジェクトを す のパラメータ$eventが されます.
  • イベントオブジェクトも に でき、イベントハンドラではeを くと
  • になります.
  • :イベントハンドラに3つのパラメータがある 、3 のパラメータこそイベントオブジェクトe,
  • である.
  • の :イベントハンドラの3 のパラメータeはイベントオブジェクトではなくundefined
  • であることが かった.
    :このボタンをクリックして、 しいデータを してリストデータに く
  • : きは を できませんが、
  • が されたのを ました.
  • :length=0で を にすると、vueはこの を できません.splice
  • を します.
  • : の のデータを すると、 きスケールで を できない が つかりました.Vue.set/this.$set
  • を します.
        <style>
            * {
          
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
    
            ul li {
          
                border: 1px solid #000;
                height: 50px;
                position: relative;
            }
    
            ul li input {
          
                width: 99%;
                height: 96%
            }
    
            .remove {
          
                position: absolute;
                right: 5px;
                top: 15px;
            }
    
            .change {
          
                position: absolute;
                right: 50px;
                top: 15px;
            }
    
            #app {
          
                width: 500px;
    
            }
        style>
        <div id="app">
            <ul>
                <li v-show="addflag">
                    <input type="text" v-model="tempdata">
                li>
                <li v-for="(list,index) in lists" :key="list.id">
                    {
        {list.task}}
                    <button @click="remove(index)" class="remove">  button>
                li>
            ul>
            <button @click="addflag=!addflag" class="add">    button>
            <button @click="add">    button>
            <button @click="change">       button>
        div>
    
        new Vue({
         
                el: '#app',
                data: {
         
                    addflag: false,
                    lists: [
                        {
         
                            id: 1,
                            task: '   '
                        },
                        {
         
                            id: 2,
                            task: '   '
                        }
                    ],
                    tempdata: '',
                },
                methods: {
         
                    add() {
         
                        this.lists.push({
         
                            id: this.lists.length + 1,
                            task: this.tempdata
                        });
                        this.tempdata = '';
                        this.addflag = !this.addflag;
                    },
                    remove(index) {
         
                        this.lists.splice(index, 1)
                    },
                    change() {
         
                        Vue.set(this.lists,'1',{
         
                            id:2,
                            task:"   "
                        })
                    }
                }
            })
    













  • アルファベットで :
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その