目次
イベントメカニズム
概要 dom ステージでは、イベント メカニズムの特徴を説明しました。
イベントの３要素
イベントバインディング
イベントストリーム
イベントオブジェクト
イベントエージェント
イベント タイプの概念は Vue にもまだ存在しますが、Vue のイベント メカニズムはよりシンプルで便利です。
イベントバインディング
v-on ディレクティブを使用すると、DOM イベントをリッスンし、トリガーされたときに JavaScript コードを実行できます。v-on は、呼び出す必要があるメソッド名を受け取ることもできます。
<button v-on:click="handler">good</button>Methods: { handler: function (event) { if (event) {alert(event.target.tagName) } //eventこれはネイティブ DOM イベントです} } メソッドに直接バインドされるだけでなく、メソッドを呼び出すこともできます。インライン JavaScript ステートメントでは$、<button v-on:click="say('hi',$event)">Say hi</button>event:methods:{say:function(message,event){alert(message)}} を介してネイティブ イベント オブジェクトを渡します。vue ではイベント バインディングが使用される可能性が高いため、<button @click= という省略形が使用されます。 " はここで提供されます。say('hi',$event)">挨拶</button>
イベントパラメータ
イベントが呼び出されるとき、パラメーターを渡すことができます。
<div id="app">
<el-button @click="toAdd" type="primary" size="small">新增</el-button>
<div>
<el-table type="index" size="small" :data="tableData" style="width: 50%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="small" @click="toEdit(scope.row)" type="primary">编辑</el-button>
<el-button size="small" type="danger" @click="toDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog :title="title" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="时间" :label-width="formLabelWidth">
<el-input v-model="form.date" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input v-model="form.address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
<script>
new Vue({
el: "#app",
data: {
dialogFormVisible: false,
formLabelWidth: "120px",
form: {},
title: '',
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
methods: {
toAdd() {
this.dialogFormVisible = true;
this.form = {};
this.title = '新增数据'
},
toEdit(row) {
this.form = { ...row };
this.dialogFormVisible = true;
this.title = '修改数据';
},
toDelete(id) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData.splice(id,1)
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
})
</script>イベントをバインドするとき、 v-on: イベント名を@event nameに短縮できます。この方法はよく使用されます。
イベント修飾子
イベント修飾子 イベント ハンドラーでevent.preventDefault()またはevent.stopPropagation()を呼び出すことは、非常に一般的な要件です。Vue はより良い方法を提供します。イベント処理関数には純粋なデータ ロジックのみがあり、DOM イベントの詳細を処理する代わりに、これらの詳細はイベント修飾子によって完了されます。
<button v-on:click.prevent="handler">点我点我</button>一般的な修飾子は次のとおりです。stop イベントのバブリングを停止します。prevent イベントのデフォルト動作を防止します。capture は、イベント キャプチャ フェーズでイベント処理関数を実行します。self 処理関数は、event.target が現在の要素自体である場合にのみトリガーされます。イベント後 1 回処理関数は 1 回実行されます。.passive スクロール イベントのバインドを解除するデフォルトの動作 (つまり、スクロール動作) がすぐにトリガーされます。これは通常、スクロールと組み合わせて使用され、モバイル端末のパフォーマンスを向上させることができます。キー修飾子は通常、キーアップ イベント タイプと組み合わせて使用します。 enter、.tab、.delete、.esc、.space、.up、.down、.left、.right、.ctrl、.alt、.shift、.meta マウス モディファイア マウスアップ イベント .left、.そう、真ん中
new Vue({
el: "#app",
data: {
msg: '事件修饰符'
},
methods: {
keyupHandle() {
console.log('按下某些特殊键');
},
toJump() {
console.log('跳转');
alert(1);
},
outer(e) {
// e.target是触发事件的源头元素，目标元素
// e.currentTarget 当前执行事件处理程序的元素，当前目标元素
// console.log('outer', e.target, e.currentTarget);
console.log('outer')
for (let i = 0; i < 100; i++) {
console.log(i);
}
},
inner(e) {
// e.stopPropagation();
// console.log('inner', e.target, e.currentTarget);
console.log('inner');
}
}
})
<div id="app">
<!-- <input type="text" @keyup.enter="keyupHandle"> -->
<input type="text" @keyup.13="keyupHandle">
<!-- <input type="text" @mouseup.left="keyupHandle"> -->
{
{msg}}
<a @click.prevent="toJump" href="http://www.baidu.com">百度一下</a>
<!-- 点击inner event.target -->
<!-- <div class="outer" @click.self.once="outer"> -->
<!-- <div class="outer" @click.self="outer"> -->
<!-- <div class="outer" @click.capture="outer"> -->
<div class="outer" @scroll.passive="outer">
outer
<div class="inner" @click="inner">
<!-- <div class="inner" @click.stop="inner"> -->
inner
</div>
</div>
</div>形状
v-model ディレクティブを使用すると、form および
<input>elementsに双方向のデータ バインディングを作成できます。コントロールの種類に基づいて要素を更新するための正しい方法が自動的に選択されます。その魔法にもかかわらず、v-model は本質的に糖衣構文です。ユーザー入力イベントをリッスンしてデータを更新し、いくつかの極端なシナリオで特別な処理を実行する役割を果たします。v-model を使用して値がバインドされている場合、name 属性を記述する必要はありません。<textarea><select>
<div id="app">
{
{msg}}
<br>
{
{stu}}
<br>
<!-- 用户名：<input type="text" v-model.lazy="stu.username"> -->
用户名：<input type="text" v-model.trim="stu.username">
<br>
<!-- .number修饰符，可以将采集到的数据转为number类型，然后再存储到数据模型中 -->
年龄：<input type="text" v-model.number="stu.age">
<br>
<!-- 性别 -->
性别：<input type="radio" value="male" v-model="stu.gender">男
<input type="radio" value="female" v-model="stu.gender">女
<br>
<!-- 爱好 -->
爱好：<input type="checkbox" value="basketball" v-model="stu.hobby">篮球
<input type="checkbox" value="swimming" v-model="stu.hobby">游泳
<input type="checkbox" value="dancing" v-model="stu.hobby">跳舞
<br>
<!-- 城市 -->
城市：
<!-- <select multiple v-model="stu.city"> -->
<select v-model="stu.city">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="guangzhou">广州</option>
</select>
<br>
<!-- 简介 -->
简介：<textarea v-model="stu.info" cols="30" rows="10"></textarea>
</div>
### js代码
new Vue({
el: '#app',
data: {
msg: 'hello',
stu: {
// 复选框
hobby: []
}
},
methods: {}
})
watch (リスナー listen 属性)
リスナーの使用は、データ変更時に非同期操作または高コストの操作を実行する必要がある場合に最も役立ちます。
ほとんどの場合、計算されたプロパティの方が適切ですが、カスタム リスナーが必要になる場合もあります。これが、Vue が監視オプションを通じてデータ変更に応答するためのより一般的な方法を提供する理由です。このアプローチは、データ変更時に非同期操作またはコストのかかる操作を実行する必要がある場合に最も役立ちます。
<div id="app">
{
{msg}}
<br>
a：<input type="text" v-model.number="a">
<br>
+
<br>
b：<input type="text" v-model.number="b">
<br>
=
<br>
<output>{
{total}}</output>
</div>
new Vue({
el: '#app',
data: {
msg: 'hello',
a: 0,
b: 0,
total: 0
},
methods: {},
// 监听 侦听
watch: {
a(newValue, oldValue) {
this.total = this.a + this.b;
},
b(newValue, oldValue) {
this.total = this.b + this.a;
}
}
})
//深度监听
new Vue({
el: '#app',
data: {
msg: 'hello',
a: 1,
obj: {
name: 'zhangsan',
age: 12
},
},
watch: {
a(newValue, oldValue) {
console.log('a数据发生变化...');
},
/* obj(newValue, oldValue) {
console.log('obj数据发生变化...');
} */
// 深度监听
obj: {
handler(newValue, oldValue) {
console.log('obj数据发生变化...');
},
// 深度监听
deep: true
}
},
methods: {
changeObj() {
// 更改内部数据
this.obj.name = 'lisi';
}
}
})
<div id="app">
{
{msg}}
<br>
{
{obj}}
<button @click="changeObj">更改obj</button>
</div>計算された (計算されたプロパティ)
計算されたプロパティに依存するデータ
計算されたプロパティは、変数に直接出力するのではなく、計算を実行してから出力する場合に使用できます。計算されたプロパティは、応答性の依存関係に基づいてキャッシュされます。これらは、関連するリアクティブな依存関係が変更された場合にのみ再評価されます。関数を呼び出すたびに、関数が再実行されます。
<div id="app">
{
{msg}}
<br>
a：<input type="text" v-model.number="a">
<br>
+
<br>
b：<input type="text" v-model.number="b">
<br>
=
<br>
{
{total}}
</div>
new Vue({
el: '#app',
data: {
msg: 'hello',
a: 0,
b: 0,
// total: 0
},
// 计算属性
computed: {
total(){
console.log('计算属性');
// return 111
return this.a+this.b
}
},
methods: {}
})面接の質問
watch と computed の違いは何ですか?
computed
1. キャッシュ可能です. ページが再レンダリングされても値は変わりません. Calculated 属性は関数を再度実行することなく、前の計算結果を即座に返します。計算された属性は
、特定の属性の変更を計算します。特定の値が変更された場合、計算された属性は監視され、
ウォッチ
1 に返されます。値の変更を監視し、非同期操作を実行します。 [axios request]
'$route.query': { this.loadArticle() } 2. キャッシュなし、現在の値が発生した場合のみ実行/応答は