2.Vue学习笔记—事件处理、表单收集

• 注意: 撰写本文目的主要是为了给自己做一个备忘录，如果你学过vue并且希望从本文中找到一些忘记的知识点，那么你可以阅读本文章。由于文章内讲解并不是很多，因此此文章并不适合小白入门使用。

6.事件处理

• 事件处理：简单来说就是监听鼠标点击与键盘事件并对其做出相应处理，通过触发预先实现好的函数来处理事件。
• 话不多说，上图上代码

前端页面展示:

前端代码:

    <div id="example">
        <h2>1.绑定监听</h2>
        <button @click="test1">test1</button>
        <button @click="test2('谢清照')">test2</button>
        <button @click="test3">test3</button>
        <button @click="test4('信鸽', $event)">test4</button>

        <h2>2.事件修饰符</h2>
        <div style="width:200px; height:200px;background:red" @click="test5">
            <div style="width:100px; height:100px;background:skyblue" @click.stop="test6"></div>
            <!--@click.stop的功能：阻止事件冒泡-->
        </div>

        <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
        <!--@click:prevent"设置默认事件，阻止原有事件-->

        <h2>3.按键修饰符</h2>
        <input type="text" @keyup.13="test8">
        <!--键盘处理事件，处理的键跟在keyup后面-->
        <input type="text" @keyup.enter="test8">

    </div>

js代码:

    <script>
        new Vue({
            el: '#example',
            data: {
                test1() {
                    alert("test1")
                },
                test2(msg) {
                    alert(msg)
                },
                test3(event) {
                    alert(event.target.innerHTML)
                },
                test4(number, event) {
                    alert(number + '---' + event.target.innerHTML)
                },

                test5() {
                    alert("out")
                },
                test6() {
                    alert("inner")
                },

                test7() {
                    alert("去百度")
                },

                test8(event) {
                    // if (event.keyCode === 13) { //13:回车键
                    alert(event.target.value + ' ' + event.keyCode)
                    // }       //原始实现方法
                }
            }
        })
    </script>

7.表单收集

• 表单收集在项目中重要的地位不用多说吧。直接开撸。

前端页面展示:

前端代码

  <div id="demo">
    <form action="/XXX" @submit.prevent="handleSubmit">
      <!--文本框-->
      <span>用户名:</span>
      <input type="text" v-model="username"><br>

      <!--密码框-->
      <span>密码:</span>
      <input type="password" v-model="password"><br>

      <!--性别-->
      <span>性别:</span>
      <input type="radio" id="female" value="女" v-model="sex">
      <label for="female">女</label>
      <input type="radio" id="male" value="男" v-model="sex">
      <label for="male">男</label><br>

      <!--爱好-->
      <span>爱好:</span>
      <input type="checkbox" id="basket" value="basket" v-model="likes">
      <label for="basket">篮球</label>
      <input type="checkbox" id="foot" value="foot" v-model="likes">
      <label for="foot">足球</label>
      <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
      <label for="pingpang">乒乓</label><br>

      <!--城市-->
      <span>城市：</span>
      <select v-model="cityId">
        <option value="">未选择</option>
        <option :value="city.id" v-for="(city, index) in allCitys" :key="index">{{city.name}}</option>
      </select><br>
      <span>介绍：</span>
      <textarea rows="10"></textarea>

      <!--提交-->
      <button type="submit">注册</button>
    </form>
  </div>

js代码:

<script>
    const vm = new Vue({
        el: "#demo",
        data: {
            username: '',
            password: '',
            sex: '女', //radio初始值
            likes: ['foot'], //foot为初始值
            allCitys: [{
                id: 1,
                name: 'BJ'
            }, {
                id: 2,
                name: 'SH'
            }, {
                id: 3,
                name: 'GD'
            }],
            cityId: '3' //3为初始值
        },
        methods: {
            handleSubmit() {
                console.log(this.username, this.password)
            }
        }
    })
</script>