vue第四天基础知识

一、表单输入绑定

v-model 指令在表单 、 及 元素上创建双向数据绑定。
注意：v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。
eg:
html:

<input v-model="msg" placeholder="edit me">
<p>Message is: {{ msg}}</p>

js:

 data: {
    msg: "",
    username: "",
    password: "",
}

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

表单输入绑定综合练习：

 <div id="app">
        <div>
            <form action="">
                <table class="table">
                    <thead>
                        <tr>
                            <th colspan="2" style="text-align: center;">表单注册</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td scope="row">请输入用户名：</td>
                            <td><input type="text" name="username" v-model="userInfo.username"></td>
                            <!-- <td></td> -->
                        </tr>
                        <tr>
                            <td scope="row">请输入密码：</td>
                            <td><input type="text" name="password" v-model="userInfo.password"></td>
                            <!-- <td></td> -->
                        </tr>
                        <tr>
                            <td scope="row">请选择城市：</td>
                            <td><select name="city" id="" v-model="userInfo.city">
                                    <option value="" disabled>--请选择城市--</option>
                                    <option value="1">北京</option>
                                    <option value="2">上海</option>
                                    <option value="3">天津</option>
                                    <option value="4">郑州</option>
                                </select></td>
                            <!-- <td></td> -->
                        </tr>
                        <tr>
                            <td>请选择爱好</td>
                            <td>
                                <input type="checkbox" name="hobby" id="playGame" value="playGame"
                                    v-model="userInfo.hobby">
                                <label for="playGame">打游戏</label>
                                <input type="checkbox" name="hobby" id="play" value="play" v-model="userInfo.hobby">
                                <label for="play">玩耍</label>
                                <input type="checkbox" name="hobby" id="movie" value="movie" v-model="userInfo.hobby">
                                <label for="movie">看电影</label>
                                <input type="checkbox" name="hobby" id="binge-watching" value="binge-watching"
                                    v-model="userInfo.hobby">
                                <label for="binge-watching">追剧</label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align: center;"><button @click="register"
                                    type="button">注册啦~</button></td>
                        </tr>
                    </tbody>
                </table>
            </form>


        </div>
    </div>

    <!-- 实例化vue的方法 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hhhhahhh",
                userInfo: {
                    username: '',
                    password: '',
                    city: '',
                    hobby: [], //复选框必须设置为数组接受数据，否则点击要么全部选中，或者全部不选
                }
            },
            methods: { //方法
                register() {
                    console.log("注册按钮被点击了");
                    console.log(this.userInfo);
                },
            },
            watch: { //监听函数
                // 写接口
                msg(val) {
                    console.log(val);
                },
            },
            computed: {

            }
        });
    </script>

运行结果：

点击注册按钮后，控制台：

二、事件

2.1 非表单事件：

原生js:
阻止默认行为：event.preventDefault()
阻止事件冒泡： event.stopPropagation()//事件冒泡的机制：本质上是子元素被触发后，也作用于父元素，父元素也会被触发。
两者都阻止：return false;
vue:(通过事件修饰符)
阻止默认行为：.prevent
阻止事件冒泡：.stop
eg:(阻止事件冒泡)

 		<!-- 阻止右键菜单事件 -->
        <!-- <div class="bigBox" @contextmenu.prevent> -->
        <!-- 阻止右键事件（浏览器行为）, 触发bigClick函数-->
        <div class="bigBox" @contextmenu.prevent="bigClick">

            <div class="smallBox" @click.stop='smallClick'>

            </div>
        </div>

2.2 表单事件

隐式传参，即不写 “$event”，会有默认的事件源。

<button @click="get">点我点我~</button>   

显式传参，通过特殊变量“$event”，便于访问原始的DOM事件

   <button @click="get($event)">点我点我~</button>

blur:失去光标事件
focus:获取光标事件

  <input type="text" v-model="msg" @blur="blur" @focus="focus">{{msg}}     

change:内容发生变化时，触发change事件（输入框是再失去光标时候判断）

 <input type="text" v-model="msg1" @change="change">{{msg1}}

三、事件修饰符

修饰符是由点开头的指令后缀来表示的。

3.1 事件修饰符：

.stop	阻止事件冒泡
.prevent 阻止默认行为
.capture 捕获事件    
.self 	只触发自身的方法，不触发父元素
.once	只触发一次	
.passive 不拦截默认事件

**capture:**给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。
代码演示：

运行结果：

passive: Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

请记住，每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作,而.passive 会告诉浏览器你不想阻止事件的默认行为,不用查询了，我们没用preventDefault阻止默认动作，从而提升移动端的性能。

3.2 键盘修饰符

.left .37
.right .39
.up .38
.down.40
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space

实例：只有按下回车键时，才触发enter（）方法。

<div class="bigBox" @keydown.enter="enter"></div>

3.3 vue的表单修饰符

.lazy ： 延迟
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number ：数字,类似于type:number

.trim ：去空格

四、遇到的问题：

1、form表单内，点击button后，页面自动刷新。
产生问题原因：表单中标签默认的类型是submit，即默认的button点击就会触发表单的提交事件。
解决思路：将此button变为普通的button按钮
方法：
1.在标签中添加属性type=“button”。

<button type="button"></button>

2.将标签改为标签。

<input type="button" />

3.在button的点击事件中加入阻止默认事件执行的代码段。

$('button').on('click', function(e) {
    e.preventDefault();
});