30天学完vue打卡第三天

复习并且巩固了vue的一些简单指令。

一、v-model的使用

      1、v-model 给表单元素使用 ，双向数据绑定

     2、数据变化,视图自动更新

     3、视图变化,数据自动更新

    形式：v-model="变量" 

双向绑定示例：（输入内容同步更新）

 

 

学习了指令修饰符分别有：

一、.trim 去首位空格

姓名：<input v-model.trim="username" type="text">

二、.number 转为数字型

 年龄：<input v-model.number="age" type="text">

三、.stop 阻止冒泡

 <div @click="fatherFn" class="father">
            <div @click.stop="sonFn" class="son">儿子</div>
 </div>

四、.prevent 阻止默认行为

<a @click.prevent href="https://www.baidu.com">百度</a>