Vue-基础入门(上)--Part.2(8-9)

2-8 事件绑定事件修饰符

事件修饰符

老规矩先贴个代码^ ^

<script>
  const app = Vue.createApp({
    data () {
      return {
         count: 0
      }
    },
    methods: {
      handleBtnClick() {
        this.count += 1
      }
    },
    template: `
      <div>
        {{count}}
        <button @click="handleBtnClick">click</button>
      </div>
    `
  })
  const vm = app.mount('#root');
</script>

这个就是简单的绑定一个click事件，点击按钮，左边的数字+1

我们还可以这样写<button @click="count += 1">click</button>

这样写看似简洁一点，但是用这种方式能执行的逻辑太少了，所以建议还是调用方法好一点

然后就是一个click事件是可以触发多个方法的

<div >
  {{count}}
  <button @click="handleBtnClick(), handleDivClick()">click</button>
</div>

记得要加括号！！

然后再介绍一些修饰符

stop
```
methods: {
  handleBtnClick() {
    this.count += 1
  },
  handleDivClick() {
    alert('hi')
  }
},
template: `
  <div @click="handleDivClick">
    {{count}}
    <button @click="handleBtnClick">click</button>
  </div>
```
这样子写，当我们点击按钮的时候，不仅count会+1，还会弹出'hi'，这个就是事件冒泡，我们点击button的时候向上冒泡也触发了div上绑定的点击事件，所以要阻止事件冒泡，我们只需要<button @click.stop="handleBtnClick">click</button>，这样点击按钮不会向父元素冒泡了
self
```
<div @click.self="handleDivClick">
  {{count}}
  <button @click="handleBtnClick">click</button>
</div>
```
.self就是会判断点击的是不是自己本身的内容，假如点击的是子元素，就不会触发handleDivClick，如果点击的count就会触发
prevent

阻止默认行为，前面应该写到过这里省略
capture

事件的触发是按照冒泡模式来的，也就是先触发里面的元素，加.capture就是让事件的触发反着来，也就是按照捕获模式来触发(用的不太多)
once

前面应该也写到过，.once这个事件只执行一次

按键修饰符

<input @keydown.enter="handleKeydown">

其他的按键修饰符：tab、delete、esc、up、down、left、right

鼠标修饰符

<button @click="handleBtnClick">click</button>这样写的话，其实鼠标上的三个键点击都会触发handleBtnClick的，我们可以加.left、.right、.middle指定鼠标按键

精确修饰符

<button @click.ctrl="handleBtnClick">click</button>这样写，当我们按住ctrl点击就能触发，但是我们如果按下ctrl和其他键盘上的键，也能触发事件，所以我们可以添加一个.exact精确修饰符，这样只能按下ctrl点击才能触发事件

2-9 表单中双向绑定指令的使用

先看一个简单点的：

<script>
  const app = Vue.createApp({
    data () {
      return {
         message: 'hi'
      }
    },
    template: `
      <span>{{message}}</span>
      <input v-model="message" />
    `
  })
  const vm = app.mount('#root');
</script>

这个是一个简单的数据双向绑定，当input框里的内容发生改变，前面span元素里的内容也会发生变化同样的前面span里的内容变化，input框里的内容也会跟着变化。这种情况input标签上就不用写value了

同样的textarea也能这样使用

<span>{{message}}</span>
<textarea v-model="message" />

checkbox也能使用(多选框)

<script>
  const app = Vue.createApp({
    data () {
      return {
         message: []
      }
    },
    template: `
      <div>{{message}}</div>      
      apple <input type="checkbox" v-model="message" value="apple" />
      orange <input type="checkbox" v-model="message" value="orange" />
      peach <input type="checkbox" v-model="message" value="peach" />
    `
  })
  const vm = app.mount('#root');
</script>

需要注意的是：

message是一个数组，因为checkbox是多选框，所以要用数组存值，里面存的值即是input框上面绑定的value

接着是radio(单选框)

<script>
  const app = Vue.createApp({
    data () {
      return {
         message: ''
      }
    },
    template: `
      <div>{{message}}</div>      
      apple <input type="radio" v-model="message" value="apple" />
      orange <input type="radio" v-model="message" value="orange" />
      peach <input type="radio" v-model="message" value="peach" />
    `
  })
  const vm = app.mount('#root');
</script>

注意：message是一个空字符串，因为radio是单选框，只需要存放一个数据，所以用字符串就可以了

最后是select

<script>
  const app = Vue.createApp({
    data () {
      return {
         message: '',
         options: [
           {
             text: 'A',
             value: 'A'
           }, {
             text: 'B',
             value: 'B'
           }, {
             text: 'C',
             value: 'C'
           }
         ]
      }
    },
    template: `
      <div>
        {{message}}
        <select v-model="message">
          <option v-for="item in options" :value="item.value">{{item.text}}</option>
        </select>
      </div>
    `
  })
  const vm = app.mount('#root');
</script>

自己看代码吧其实也没什么好说的捏，如果设置成多选就把message改为数组，然后select标签上加一个multiple

最最最后一点

<script>
  const app = Vue.createApp({
    data () {
      return {
         message: 'orange',
      }
    },
    template: `
      <div>
        {{message}}
        <input type="checkbox" v-model="message" true-value="apple" false-value="orange" />
      </div>
    `
  })
  const vm = app.mount('#root');
</script>