ゼロベースVUEの研究ノート（B）

データとメソッド

• Vueのインスタンスが作成されると、すべてのプロパティは、それがシステムのヴューに応答して、データ・オブジェクトに追加されます。データの同期更新データとビュー。
• インスタンスが作成された後に新しいプロパティを追加し、この属性への変更は、すべてのビューを更新されません。
• あなたが財産を希望、それが空または存在しないの始まりだった場合は、わずか数は、初期値を設定する必要があります。
• Object.freeze（）メソッドは、既存のプロパティを変更防止します
• データ属性に加えて、さらに含む、Vueのインスタンスのインスタンスの属性とメソッドの接頭辞として、$例えば、:. Vmを$データ、VM $エル、VMの$腕時計（）（ VMが、特定のインスタンス名と仮定する）、詳細はを参照してください。.. API

ライフサイクルフックの例

Vueのインスタンスは、独自のライフサイクルを持っている私たち自身のロジックコードを書くために、いくつかのフック関数を提供します。

• beforeCreate
• 作成した
• beforeMount
• マウント
• BeforeUpdate
• 更新しました

PS：不要在选项属性或回调上使用箭头函数，即这些钩子函数不要用箭头函数的写法，因为他们没有this
ライフサイクルチャート

テンプレートの構文

1. テキスト
   データの使用の最も一般的な形態で結合“Mustache”文法（中括弧）は、テキスト補間

   <span>Message: {{ msg }}</span>

   V-一度命令は、データの変更は、補間の内容がで更新されていない1回限りの補間を行うことができます

   <span v-once>这个将不会改变: {{ msg }}</span>

2. オリジナルHTML
   V-実際のHTMLコマンドの出力htmlのではなく、文字列

   <p>Using mustaches: {{ rawHtml }}</p> 输出字符串
   <p>Using v-html directive: <span v-html="rawHtml"></span></p> 输出rawHtml变量代表的HTML

3. JavaScriptの式を使用し
   、すべてのデータバインディング、Vue.jsは、JavaScript式のフルサポートを提供します

   {{ number + 1 }}
   
   {{ ok ? 'YES' : 'NO' }}
   
   {{ message.split('').reverse().join('') }}
   
   <div v-bind:id="'list-' + id"></div>

4. 命令
   V-場合、V-に、と共通の V-バインド、V-ため。
   パラメータ：

   <a v-bind:href="url">...</a>

   ここhrefが、パラメータ、バインディング式のhref URL特性要素のコマンド知らせるV-バインド値である
   動的パラメータを：

   <a v-bind:[attributeName]="url"> ... </a>

   JavaScriptの式が評価されるように、得られた値は、最後の引数のとして使用されますダイナミックになり、ここでATTRIBUTENAME
   修飾子：

   <form v-on:submit.prevent="onSubmit">...</form>

   モディファイヤ（モディファイ）が結合命令を示すために使用される特殊な接尾辞の期間は、特別な方法の一例であるべき指定されている。.prevent修飾子です
   略語：

   <!-- 完整语法 -->
   <a v-bind:href="url">...</a>
   <!-- 缩写 -->
   <a :href="url">...</a>
   <!-- 完整语法 -->
   <a v-on:click="doSomething">...</a>
   <!-- 缩写 -->
   <a @click="doSomething">...</a>

そして、リスナーのプロパティの計算

セキュリティ属性を計算する論理処理の一部をレンダリングするだけ責任となり、それがより合理的になり、あまり一般的なテンプレートのロジックを追加しないでください。

  <p>Computed reversed message: "{{ reversedMessage }}"</p>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

ここでreversedMessageプロパティを計算し、逆の順序で文字列であることを。
メソッドを定義し、同様の効果を得ることができます。

  <p>Reversed message: "{{ reversedMessage() }}"</p>

<p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

両者の違い：計算は常に再び機能を実行し、そのプロパティ応答依存キャッシュ処理に基づいており、それは〜異なるシナリオでさまざまな方法を選択
のヒントは：計算プロパティではなく、リスナーのプロパティを使用して（ウォッチで定義されているが法）;デフォルトを計算することのみゲッターの属性が、必要に応じて、あなたはまた、セッターを提供することができ、カスタムリスナーが大きく、操作のコストが最も有用であるとき、非同期データの変更を行うか、見て

クラスとスタイルのバインド

式の結果に加えて、クラスタイプとスタイルにV-結合するが、字符串しかし、あってもよい对象か、数组
Bindingクラスを導入

• バインドされたオブジェクト

  <div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
  data: {
  isActive: true,
  hasError: false
  }

  isActiveまたはhasError変更、クラスのリストはそれに応じて更新される場合には、テンプレート内でインラインで定義された結合オブジェクトを作成することはできません、結果は同じです。

  <div v-bind:class="classObject"></div>
  data: {
  classObject: {
    active: true,
    'text-danger': false
    }
  }

  結合计算属性（例えば、子供のいない）を示すために、より柔軟であることができます

• バインド配列

  <div v-bind:class="[activeClass, errorClass]"></div>
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }

• 結合成分（文法とフロント完全に類似）

スタイルバインディングの
V-バインド：スタイルオブジェクトの構文

• バインドされたオブジェクト

  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  data: {
    activeColor: 'red',
    fontSize: 30
  }

  または直接書き込みます

  <div v-bind:style="styleObject"></div>
  data: {
  styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }

• バインド配列

  <div v-bind:style="[baseStyles, overridingStyles]"></div>

レンダリング条件

V-場合は、V-ELSE-場合、V-他で使用することができます。

    <div v-if="type == 'A'">
      A
    </div>
    <div v-else-if="type == 'B'">
        B
    </div>
    <div v-else="type == 'C'">
        C
    </div>
    data : {
        type : "B"
    }

<template>用いた条件は、複数の表示素子をグループ化された要素をレンダリングするV字場合

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

鍵管理の要素と繰り返し

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

キーラベル要素を使用した後、Vueが怠惰な再利用を使用し、再レンダリング要素ではないでしょう
V-ショー：表示だけではないと2を表示します

<h1 v-show="ok">Hello!</h1>

V-ショー対場合は、V-：必要性は非常に頻繁に切り替えるために、より優れたV-ショーを使用して、条件はめったに、実行時に変更されない、より良い場合は、V-使用している場合

リストをレンダリング

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

• 反復配列

  <ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
  </ul>
  var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
  })

  PS：インデックスは0から開始し、in置き換えることができますof
  

• 反復可能オブジェクト

  <div v-for="(value, name, index) in object">
    {{ index }}. {{ name }}: {{ value }}
  </div>

  new Vue({
    el: '#v-for-object',
    data: {
        object: {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10'
        }
    }
  })

• 正しいレンダリング（削除、並べ替え、フィルタ、および取得するために使用される他のシーン）を確保するために、V-のためのユニークなキーを使用します

  <div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
  </div>

• 配列変異法（方法変異）
  プッシュ（）、POP（）、シフト（）、抜き（）、スプライス（）、ソート（）、リバース（）例：

  example1.items.push({ message: 'Baz' })

  これらの方法には、直接配列自体を変更します
  

• 非変異体（非変異法）メソッド
  フィルタ（）、CONCAT（）、スライス（）

  example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
  })

  これらのメソッドは、配列自体を通過した変更されませんが、方法が返回值され新数组、この配列は、同じ効果を達成するために元の配列に割り当てることができます
  

• ノートの
  いくつかのエラー文言の配列：

    var vm = new Vue({
    data: {
        items: ['a', 'b', 'c']
    }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的

  正しい言葉遣い：

  //第一个问题
  // Vue.set
  Vue.set(vm.items, indexOfItem, newValue)
  // Array.prototype.splice
  vm.items.splice(indexOfItem, 1, newValue)
  //实例写法
  vm.$set(vm.items, indexOfItem, newValue)
  //第二个问题
  vm.items.splice(newLength)

  一部のエラー文言オブジェクト：

  var vm = new Vue({
  data: {
    a: 1
  }
  })
  // `vm.a` 现在是响应式的
  vm.b = 2
  // `vm.b` 不是响应式的

  例えば、作成された動的ヴュー追加することは許されない、根级别応答特性を、しかし、Vue.set使用することができる（オブジェクト、プロパティ名、値）メソッドは、ネストされたオブジェクト応答特性に加えました。

  var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
  })
  Vue.set(vm.userProfile, 'age', 27)
  //或者
  vm.$set(vm.userProfile, 'age', 27)

結合フォーム入力

フォームでのV-modelコマンド<input>、<textarea>および<select>自然の中でシンタックスシュガーの要素に結合双方向のデータを作成します。

• テキスト

  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>

• 複数行のテキスト

  <span>Multiline message is:</span>
  <p style="white-space: pre-line;">{{ message }}</p>
  <br>
  <textarea v-model="message" placeholder="add multiple lines"></textarea>

  ヒント：（ <textarea>{{text}}</textarea>）、効果を取る代わりに、Vモデルを使用していません。

• ボックス
  と同じ配列、例に結合された複数のチェックボックス、：

    <div id='example-3'>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
  </div>

  new Vue({
    el: '#example-3',
    data: {
        checkedNames: ['Jack']
    }
  })

• ラジオボタン

    <div id="example-4">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
  </div>

  new Vue({
    el: '#example-4',
    data: {
        picked: 'Two'
    }
  })

• [選択]ボックスの
  ラジオ：

  <div id="example-5">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>

  new Vue({
    el: '...',
    data: {
        selected: 'A'
    }
  })

  場合には、複数の選択肢（配列をバインドするには）：

    <div id="example-6">
    <select v-model="selected" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>
    </div>

    new Vue({
    el: '#example-6',
    data: {
        selected: ['A','B']
    }
    })

  V-たとえば、ドロップダウンボックス：

    <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>

  new Vue({
    el: '...',
    data: {
        selected: 'A',
        options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
        ]
    }
    })

• バインドの
  オプションのラジオボタン、時には私たちは、あなたが使用することができ、動的プロパティVueのインスタンスに値をバインドしたいことがあり、Vモデルバインディング一般的に静的な文字列の値をボックスや選択ボックスをチェックします達成V-結合し、このプロパティの値はできない文字列（例えば子供）
• 修飾子
  • .lazy
    デフォルトでは、各入力イベントの値のデータと同期Vモデルは、あなたが怠惰なモディファイアを追加することができ、入力ボックスを誘発するので、同期イベントに変更を使用します。
    

    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg" >

  • .NUMBER
    ユーザが数値型に自動的に入力値を希望する場合、番号修飾子は、V字モデルに追加することができます
    

  <input v-model.number="age" type="number">

  • .trim
    ユーザによって自動的に濾過する包括空白文字の入力を、改質剤は、V字モデルをトリミングするために添加され得ます。
    

  <input v-model.trim="msg">