Vueのvue構文

(備考説明:このvue文法知識の整理はvuejs公式ドキュメントを核心とし、個人の理解や他のケースの説明を支援するため、文章はオリジナルとは言えず、トップは偽のオリジナルである.)
Vee基礎構文
vueインスタンス

let vm = new Vue({
    el: '#app',   //       DOM  
    data: {   //               data                    
        message: 'hello vue!'
    },    
    methods: {   //     vue     
    }
)

補間
テキスト
データを挿入してテキスト解析を行う場合は{}}を直接使用します.

    
{{message}}
   

HTML
挿入したデータをhtml解析するにはv-htmlを使用します.

    
{{msg}}
   

ノードのプロパティ
ノードにプロパティを追加する必要がある場合はv-bindを使用します.略記を使用できます.

当属性值为布尔值的时候，如果为false 或者 null 或者 undefined 这个属性将不被渲染出来
其他一切值都会默认为true值(存在就是真理)

    
   
    `let app = new Vue({
        el: '#app',
        data: {
            attr: false
        }
    })`

javaScript表达式

插值里面除了放data属性外 还可以放入js表达式

{{++num}}
{{name ? 'xuwen' : 'tom'}}

インストラクション
v-を接頭辞とするプロパティ

v-html

v-bind:略記:

v-on:略記@

v-if

v-show

v-for

v-model

ダイナミックプロパティ

これらの命令の具体的な使い方は後章で詳しく述べる
v-forリストレンダリング
説明が必要なのは公式でも他の場所でもv-forが使用しているのはfor inです実は私は特に理解していませんdata属性値が配列の私がfor ofオブジェクトを使うのが好きならfor inを使うのがもっと意味化されています

    

        {{ list.name }}
    

data() {
    return {
        name:'vuejs',
        lists: [
            {id:1, name:'xuwen'},
            {id:2, name:'   '},
            {id:3, name:'  '}
        ]
    }
}

v-forブロックでは、すべての親ドメインのpropertyにアクセスできます.

    

        {{name}}-{{ list.name }}
    

ポイント:v-forにはkey値がありますが、何をしていますか?
答え:key値の主な役割は配列要素とdomノードを正確にバインドすることであり、1つの配列の要素vueを削除するとそれに関連するノードを正確に削除することである.key値vueがなければノード多重化が多く、データが変化するとデータを一つ一つ比較してパフォーマンスを浪費します.
v-model双方向バインド
v-modelは主にフォームinput textarea select更新データに使用されます

  ：   ：  v-model       value,checked,selected    ，        data    

{{inp}}

data(){
    return {
        inp: '123'
    }
}

チェックボックス
ブール値をバインドする単一のチェックボックス

        
        {{checked}}

複数のチェックボックスが配列をバインドする

  

  

  
{{balls}}
~~~~

 data() {
    return {
        checked: true,
        balls: []
    }
}

ラジオボタン

  

  

  
{{ball}}

data() {
    return {
        ball: ''
    }
}

選択ボックス

       
      
      
      

{{ball}}

修飾子

v-on@イベント処理

  1 
{{num}}
`

data() {
    return {
        num: 0
    }
},
methods: {
    addNum() {
        this.num++;
    }
}

修飾子

.stop

.prevent

.capture

.self

.once

.passive

.enter

.tab

.delete(「削除」キーと「バックアウト」キーをキャプチャ)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

v-ifとv-show
v-ifはノードをレンダリングするかどうかv-showはノードにfalseを非表示に表示するかどうかです
classバインド
一般classバインドオブジェクトにクラスが存在するかどうか

data(){
    return {
        isActive: true
    }
}