五、指令（2）

五、指令（2）
本章概要
- v-bind
- v-model
- v-on
  - 事件修饰符
  - 按键修饰符
  - 系统修饰键
  - .exact 修饰符
  - 鼠标按钮修饰符
5.1.4 v-bind

v-bind 主要用于响应更新 HTML 元素的属性，将一个或多个组件的 prop 动态绑定到表达式。
例5-9，如下：
```
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <div id="app">
            
            <img v-bind:src="imgSrc">
            
            
            <img :src="imgSrc">
            
            
            <a v-bind:[attrname]="url">链接a>
            
            
            <img :src="'images/' + fileName">
          
          	
      			<form v-bind="formObj">
      				<input type="text">
      			form>
        div>
    <script src="https://unpkg.com/vue@next">script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    attrname: 'href',
                    url: 'http://www.sina.com.cn/',
                    imgSrc: 'images/bg.jpg',
                    fileName: 'bg.jpg',
                    formObj: {
						method: 'get',
						action: '#'
					}
                }
            }
        }).mount('#app');
    script>
  body>
html>
```
5.1.5 v-model

v-model 指令用来在表单 input、textarea和select元素上创建双向数据绑定，它会根据空间类型自动选取正确的方法来更新元素。
尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以及更新数据，并对一些极端场景进行特殊处理。

提示：
语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。

例5-10，如下：
```
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <div id="app">
            <input type="text" v-model="message">
        div>
    
    <script src="https://unpkg.com/vue@next">script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    message: 'Hello World'    
                }
            }
        }).mount('#app');
    script>
  body>
html>
```
使用浏览器打开页面，可以看到空间中的内容为 Hello World ，在 Console 窗口输入以下内容并按 Enter 键：
```
vm.message = "Welcome you"
```
可以看到输入控件中的内容也发生了变化，如图：

接下来在输入框中随意输入一些内容，然后在 Console 窗口输入下面内容
```
vm.message
```
可以看到 message 的值也发生了变化，如图：

5.1.6 v-on

v-on 指令用于监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 指令的表达式可以是一段 JavaScript 代码，也可以是一个方法的名字或方法调用语句。如下：
例5-11
```
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <div id="app">
            <p>
                
                <button v-on:click="count += 1">Add 1button>
                <span>count: {{count}}span>
            p>
            <p>
                
                <button v-on:click="greet">Greetbutton>
                
                <button @click="greet">Greetbutton>
            p>
            <p>
                
                <button v-on:click="say('Hi')">Hibutton>
            p>
        div>
    
    <script src="https://unpkg.com/vue@next">script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    count: 0,
                    message: 'Hello, Vue.js!'
                }
            },
            //在选项对象的methods属性对象中定义方法
            methods: {
                greet: function() {
                    //方法的this值始终指向组件实例
                    alert(this.message)
                },
                //对象方法的简写语法
                say(msg) {
                    alert(msg)
                }
            }
        }).mount('#app');
    script>
  body>
html>
```
说明：
（1）方法是在选项对象的 methods 选项中定义，该选项是一个对象属性。在 methods 选项中定义的方法，可以直接通过组件实例访问，也可以从组件的模板中访问这些方法。在模板中，方法最常用作事件监听器。

注意：
一定不要使用箭头函数定义方法（如 plus:() => this.a++）。这是因为箭头函数绑定的是父级作用域的上下文，所以 this 将不会按照期望指向组件实例，this.a 将为 undefined。

（2）虽然 v-on 指令的表达式中可以直接书写 JavaScript 语句（例5-11的①），但在实际开发中，由于事件处理逻辑通常比较复杂，所以常用的还是例5-11的②、③形式。
（3）在渲染的结果中，并不会在 v-on 指令所在元素上出现对应的 JavaScript 事件属性。例 5-11渲染结果如下：

（4）当组件实例销毁时，所有的时间监听器都会被自动删除，所以无须担心如何清理它们。
如果在事件绑定的方法中需要访问原始的 DOM 事件，可以使用特殊的变量 event 把它传入方法。在单击链接的时候，会跳转到链接指向的页面，然而有时候会根据某个条件是否达成来决定是否跳转，如果条件不满足，这时会调用事件对象的 preventDefault() 方法阻止跳转。
**在使用 v-on 指令绑定事件处理器时，就可以用 event 传入原始的 DOM 事件对象，然后在事件处理器方法中访问原生的事件对象。**代码如下所示：
```
<a href="/login" v-on:click="login($event)">登录a>
//...
methods:{
	//...
	if(event){
  	event.preventDefault();
  }
}
```
上述代码也可以使用事件修饰符 .prevent 实现相同的功能。
此外，在事件方法中如果要访问事件绑定的原始 DOM 元素节点对象，可以调用 event .currentTarget 得到。
在使用 v-on 指令绑定的事件处理器中可以有多个方法，方法之间用逗号运算符分割。如下：
```
<button @click="one($event),two($event)">
    Submit
button>
//...
methods: {
    one(event){
        //第一个处理程序逻辑
    },
    two(event){
        //第二个处理程序逻辑
    }
},
```
1. 事件修饰符

在事件处理程序中调用 event.preventDefault() 方法或 event.stopPropagation() 方法是非常常见的需求，为了解决这个问题，Vue.js 提供了事件修饰符，让我们可以专注于纯粹的数据逻辑，而不需要考虑如何处理 DOM 事件细节。
修饰符是由点开头的指令后缀表示的，紧接在事件名称后书写。针对 v-on 指令，Vue 提供了以下修饰符：
- .stop：调用 event.stopPropagation()
- .prevent：调用 event.preventDefault()
- .capture：添加事件监听器时使用 capture 模式
- .self：仅当事件是从侦听器绑定的元素本身触发时才触发回调
- .{keyAlias}：仅当事件是从特定按键触发时才触发回调
- .once：仅触发一次回调
- .left：仅当鼠标左键时触发
- .right：仅当鼠标右键时触发
- .middle：仅当鼠标中键时触发
- .passive：以 {passive:true} 模式添加侦听器
针对前面调用 event.preventDefault() 方法阻止默认的链接跳转行为的需求，使用事件修饰符就可以轻松实现相同的功能。如下：
```
<a href="/login" v-on:click.prevent="login">登录a>
//...
methods:{
	//...
	login(){//...}
}
```
下面是上述部分事件修饰符的用法。
```
<a v-on:clickc.stop="doThis">a>


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


<a v-on:click.stop.prevent="doThat">a>


<form v-on:submit.prevent>form>


<div v-on:click.capture="doThis">...div>



<div v-on:click.self="doThat">...div>


<a v-on:click.once="doThis">a>


<button v-on="{mousedown:doThis,mouseup:doThat}">button>
```
说明：
（1）DOM 事件规范支持两种事件模型，即捕获型事件和冒泡型事件，捕获型事件从最外层的对象（大部分兼容标准浏览器使用 window 对象最为最外层对象）开始，直到引发事件的对象；冒泡型事件从引发事件的对象开始，一直向上传播，直到最外层的对象结束。任何发生在 DOM 事件模型中的事件，首先进入捕获阶段，直到达到目标对象，再进入冒泡阶段。v-on 指令提供的 .stop 和 .capture 修饰符即与此有关，所以了解了 JavaScript 的 DOM 事件模型，就很容易理解这两个修饰符的作用。
（2）修饰符可以串联在一起使用，但顺序很重要。例如，使用 v-on:click.prevent.self 会阻止所有的单击，而 v-on:click.self.prevent 只会阻止对元素自身的单击。
（3）如果某个事件只需要响应一次，与 addEventListener 的 passive 选项想对应。.passive 修饰符对于提高移动设备的性能特别有用。

2. 按键修饰符

在监听键盘事件时，经常需要检查详细的按键，为此，可以在 v-on 监听键盘事件时添加按钮修饰符。
```
<input v-on:keyup.enter="submit">
```
Vue 为最常用的按键提供了以下别名：
- .enter
- .tab
- .delete（捕获“删除”和“退格”键）
- .esc
- .space
- .up
- .down
- .left
- .right
3. 系统修饰键

Vue 还提供了以下系统修饰键，用来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
- .ctrl
- .alt
- .shift
- .meta
注意：
在 Mac 系统键盘上，meta 对应 command 键；在 Windows 系统键盘上，meta 对应 windows 徽标键；在 Sun 操作系统键盘上，meta 对应实心钻石键。

例如：
```
<input @keyup.alt.enter="clear">

<div @click.ctrl="doSomething">doSomethingdiv>
```
注意：
修饰键与常规按键不同，当和 keyup 事件一起使用时，事件触发时修饰键必须处于按下状态，如下面的代码：
```
<input @keyup.ctrl.c="doSomething">
```
当同时按下 Ctrl + C 键时 doSomething() 方法并不会被调用，只有在按住 Ctrl 键的情况下释放键 C 才能触发 doSomething() 方法的调用。要想在同时按下 Ctrl + 某个键时触发 keyup.ctrl ，那么需要用 Ctrl 的虚拟键代码 17 代替 Ctrl 修饰键。如下：
```
<input @keyup.17.c="doSomething">
```
4. .exact 修饰符

.exact 修饰符用于精确控制系统修饰符组合触发的事件。
```
<button @click.ctrl="onClick">1button>

<button @click.ctrl.exact="onClick">2button>

<button @click.exact="onClick">3button>
```
5. 鼠标按钮修饰符

以下鼠标按键修饰符分别对应的左键、右键、中键
- .left
- right
- .middle
例如，下面的代码只有在鼠标右击的时候才会触发事件处理函数。
```
<input @click.right="dododo">
```
相关阅读:
python获取抖音号发布数据
 基于flask和fomantic-ui的简易p2p文件分享平台的手动实现
 mybatis缓存知多少
 软考中级-软件设计师-视频学习时长记录
 git的使用场景
 14：00面试，14：06就出来了，问的问题有点变态。。。
playwright的安装与使用
 .NET MVC第一章、项目创建与使用
 R语言使用plot函数可视化数据散点图，通过xlim参数指定X轴的坐标范围（x axis limits）
【JavaWeb】数据库连接池
原文地址：https://blog.csdn.net/GXL_1012/article/details/127068866

本章概要

5.1.4 v-bind

5.1.5 v-model

5.1.6 v-on

1. 事件修饰符

2. 按键修饰符

3. 系统修饰键

4. .exact 修饰符

5. 鼠标按钮修饰符