目次
1. イベントメカニズム
Vue は v-on コマンドを使用して DOM イベントをリッスンし、トリガーされたときにいくつかの JavaScript コードを実行します. また、呼び出す必要があるメソッド名を受け取ることもできます.メソッドの event パラメータを介して$ネイティブ イベント オブジェクトを渡すことができます。他のパラメーターを渡すこともできます。v-on: イベント名を@event 名に短縮できます
<body>
<div id="app">
<!-- 直接运行一些 JavaScript 代码 -->
<button v-on:click="console.log('我被点击了')">点击我</button>
<!-- 接收一个需要调用的方法名称，即函数名，函数实现写在methods中 -->
<button v-on:click="handler">点击我</button>
<!-- 传递参数 -->
<button v-on:click="handler1($event,'Hi')">点击我</button>
<!-- 简写 -->
<button @click="handler1($event,'Hi')">点击我</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
handler(){
console.log('hello vue');
},
handler1(e,n){
console.log(e,n);
}
}
})
</script>
</body>
2. イベント修飾子
JavaScript イベント ハンドラーで event.preventDefault() または event.stopPropagation() を呼び出すことは、非常に一般的な要件です。Vue はより良い方法を提供します。イベント ハンドラーには純粋なデータ ロジックのみがあり、DOM イベントの詳細を処理する代わりに、これらの詳細はイベント修飾子によって完成されます。
一般的な修飾子は次のとおりです。
.stopイベントのバブリングを停止
.prevent は、イベントのデフォルトの動作を防ぎます
.capture は、イベント キャプチャ フェーズ中にイベント処理関数を実行します。
.self は、 event.target が現在の要素自体である場合にのみハンドラーをトリガーします
.onceイベント ハンドラーは 1 回実行され、バインドが解除されます。
The default behavior of the .passive scrolling event (つまり、スクロール動作) は、すぐにトリガーされます. 通常、モバイル端末のパフォーマンスを向上させるために、スクロールと組み合わせて使用されます (イベントが発生するたびに、ブラウザーがチェックするため)イベントのデフォルト アクションを防ぐための preventDefault があるかどうか..passive を追加して、ブラウザーにクエリの必要がないことを伝え、デフォルト アクションを防ぐために preventDefault を使用しません.パッシブであり、競合を防止することはできません同時にリスナーにバインドされます。 )
キー修飾子 (通常、keyup イベント タイプと組み合わせて使用されます):
.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right 、.ctrl、.alt、.shift、.meta
マウス修飾子 (mouseup イベント):
.左、.右、.中
<style>
.outer{
width: 400px;
height: 400px;
background-color: rgb(233, 47, 202);
display: flex;
justify-content: center;
align-items: center;
}
.outer1{
overflow: scroll;
height: 100px;
}
.inner{
width: 200px;
height: 200px;
background-color: rgb(237, 143, 20);
}
</style>
</head>
<body>
<div id="app">
<!-- 按下回车执行 enter 或者 13 (13表示回车键)-->
<!-- <input type="text" @keyup.enter="console.log('键盘按下了')"> -->
<input type="text" @keyup.13="console.log('键盘按下了')">
<!-- 按下鼠标执行 mouseup middle 中间滚轮 left right -->
<input type="text" @mouseup.middle="console.log('鼠标按下了')">
<br>-------------------------------------------------------
<!-- .stop 阻止事件冒泡 -->
<div class="outer" @click="outer">
<div class="inner" @click.stop="inner">stop 阻止事件冒泡</div>
</div>
<br>-------------------------------------------------------
<!-- .captrue 事件捕获阶段执行 -->
<div class="outer" @click.capture="outer">
<div class="inner" @click="inner">.captrue 事件捕获阶段执行</div>
</div>
<!-- 阻止事件的默认行为 prevent -->
<a @click.prevent="toJump" href="https://www.baidu.com">百度一下</a>
<!-- 事件修饰符 passive 一般与scroll连用 表示直接使用事件默认行为-->
<div class="outer outer1" @scroll="outer">
<div class="inner" @click="inner"></div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
outer(){
console.log('outer被点击了');
},
inner(event){
console.log('inner被点击了');
// 原生阻止事件冒泡
// event.stopPropagation()
},
toJump(event){
// 原生阻止事件默认行为
// event.preventDefault()
}
}
})
</script>
</body>3 つの双方向データ バインディング
双方向のデータ バインディングは、<input>フォーム上、およびv-model ディレクティブを持つ要素<textarea>上で作成できます。コントロールの種類に基づいて、要素を更新するための正しい方法が自動的に選択されます。その魔法にもかかわらず、v-model は本質的には構文糖衣にすぎません。ユーザー入力イベントをリッスンしてデータを更新し、いくつかの極端なシナリオに対して特別な処理を実行します。v-model を使用して値をバインドする場合、name 属性を記述する必要はありません。<select>
<body>
<div id="app">
<!-- v-model 数据改变 v-model 视图也会更新-->
{
{stu}}
<!-- lazy修饰符 懒加载，按下回车后才更新数据 -->
<!-- 用户名: <input type="text" v-model.lazy="stu.username"> -->
<!-- trim修饰符 去除前后空格 -->
<br>
<br>
用户名: <input type="text" v-model.trim="stu.username">
<!-- number修饰符 将输入的值转成数字类型-->
密码: <input type="password" v-model.number="stu.password">
<!-- 单选按钮 -->
<br>
男:<input type="radio" value="male" v-model="stu.gender">
女:<input type="radio" value="female" v-model="stu.gender">
<br>
<!-- 复选框 -->
游泳<input type="checkbox" value="swimming" v-model="stu.hobbies">
篮球<input type="checkbox" value="basketball" v-model="stu.hobbies">
足球<input type="checkbox" value="football" v-model="stu.hobbies">
<br>
<!-- 多行文本框 -->
<textarea v-model="stu.introduce"></textarea>
<br>
<!-- 下拉框 -->
<select v-model="stu.city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="liuzhou">柳州</option>
</select>
</div>
<script>
new Vue({
el:"#app",
data:{
// 表单对象
stu:{
hobbies:[]
}
},
methods:{}
})
</script>
</body>