計算されたプロパティ
プロパティの計算：
ビジネス：文字列を逆に？
アイデア：STR - > arr-編曲：リバース- > STR
eg:
<body>
<div id="app">
{{ msg.split('').reverse().join('') }}
<p> {{ reverseMsg }} </p>
</div>
new Vue({
el: '#app',
data: {
msg: 'hello Vue.js 周四'
},
computed: {
reverseMsg () {
return this.msg.split('').reverse().join('')
}
}
})
概要：
ビジネス機能の増加は、我々はJSロジック口ひげがもう少し構文が見つかった場合
Vは、役割がインタフェースを表示するために使用され、図であるが、我々は言葉遣いの増加上記Vの負担を聞かせて
私たちが書く場合のメソッドは、メソッドを書きますその後、この方法、及びその少しを実行すると、私たちは内に置くための最善の方法と信じている
イベントハンドラが一致していません
包括的に：上記の方法は、最良の選択肢ではありません
解決する：Vueが新しいソリューションを提示：プロパティは、計算された計算
の特性を計算し、
計算属性は、関数記憶され（書き込まれた論理）である
属性を直接グローバル変数、直接グローバル変数と同じ名前を使用する方法として使用することができるように計算される
方法（メソッド）VS算出特性（計算）：顔の質問を、実用上問題
- 置くためにイベントハンドラメソッド
- 私の二つの条件を満たし、あなたが直接施設を計算
- ロジックを記述するために、
- グローバル変数を使用したい（MVVMに沿って考えます）
イベント高度な使用法（モディファイ）
1.イベント修飾子
.stop
.prevent
.capture
.once
事業内容：イベントのバブリングを停止
<body>
<div id="app">
<div class="big" @click = "bigHandler">
<div class="middle" @click = "middleHandler">
<div class="small" @click = "smallHanlder"></div>
</div>
</div>
</div>
</body>
new Vue({
el: '#app',
methods: {
bigHandler ( e ) {
e.stopPropagation()
alert( 'big' )
},
middleHandler ( e ) {
e.stopPropagation()
alert( 'middle' )
},
smallHanlder ( e ) {
e.stopPropagation()
alert( 'small' )
}
}
})
これは、私たちが行動をバブリングからのイベントを防ぐために、私たちのイベントハンドラを追加するために必要なものである
が、我々は、e.stopPropagation（）私たちは、3回の書き込み見つけ
まとめ：そう重複につながるコード、廃棄物のパフォーマンス書き込み
ソリューション：修飾子
フォーマット：@eventType修飾子=「イベントハンドラ。」
修飾子名：速記の私たちの主な方法である（最初の単語（基本的に））
<body>
<div id="app">
<div class="big" @click.stop = "bigHandler">
<div class="middle" @click.stop = "middleHandler">
<div class="small" @click.stop = "smallHanlder"></div>
</div>
</div>
<hr>
<div class="big" @click.self = "bigHandler">
<div class="middle" @click.self = "middleHandler">
<div class="small" @click.self = "smallHanlder"></div>
</div>
</div>
</div>
</body>
new Vue({
el: '#app',
methods: {
bigHandler ( e ) {
alert( 'big' )
},
middleHandler ( e ) {
alert( 'middle' )
},
smallHanlder ( e ) {
alert( 'small' )
}
}
})
2.修飾キー
ビジネス：あなたは、キートリガ入力を入力してください
Vueがプロセスキーボードイベントオブジェクトコードeでパッケージをピックアップします
カスタムキーモディファイは、
キーボードの文字コードを指定します
<body>
<div id="app">
<input type="text" v-model = "val" @keyup = "inputHandler">
<hr>
<input type="text" v-model = "val" @keyup.enter = "fn">
<input type="text" v-model = "val" @keyup.13 = "fn">
<hr>
<input type="text" v-model = "val" @keyup.p = "fn">
</div>
</body>
Vue.config.keyCodes.p = 13 //80键盘的 p
new Vue({
el: '#app',
data: {
val: ''
},
methods: {
inputHandler(e) {
if (e.keyCode === 13) {
console.log(this.val)
}
},
fn() {
console.log(this.val)
}
}
})