vue事件处理器

事件处理的时候，v-on,监听DOM事件，在运行的时候运行js的代码。

事件监听：v-on

<body>
        <div id="app">
            <button v-on:click="counter+=1">点我</button>
            <p>这个按钮被点击了{
   {counter}}次</p>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    counter:0
                }
            })
        </script>
    </body>

通常，我们使用一个方法，调用js的方法，我们还可以使用v-on接受一个定义的方法：

<body>
        <div id="app">
            <!--greet时我们定义的方法-->
            <button v-on:click="greet">点我</button>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    name:'vue.js'
                },
                //method对象中定义方法
                methods:{
                    greet:function(){
                        alert('hello'+this.name)
                    }
                }
            })
        </script>
    </body>

事件的修饰符：

v-on指令缩写@ （v-on:click == @click）

处理DOM事件细节，vue通过（.）表示的指令后缀来调用修饰符

.stop 阻止单击事件冒泡

.prevent 提交事件不再重载页面

.capture 添加事件侦听器的时候使用事件捕获模式

.self 在该元素本身触发时（不是子元素）触发回调

.once click事件只能点击一次（2.14版本新增）

按键修饰符

vue允许v-on在监听键盘事件的时候，添加按键修饰符

v-on:keyCode @keyUP

.enter

.tab

.up

.left

.alt

.mate

vue.js表单

我们早介绍表单的时候，首先回顾一下双向绑定

v-model指令在表单元素上创建双向数据绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PgBMtgXf-1604129049371)(C:\Users\DELL\AppData\Local\Temp\1564625799276.png)]

v-model会根据控件类型自动的选取正确的方法更新元素

输入框

<body>
        <div id="app">
            <p>input元素</p>
            <input v-model="message">
            <p>消息{
   {message}}</p>
            <p>textarea 元素</p>
            <textarea v-model="message2"></textarea>
            <p style="white-space: pre">{
   {message2}}</p>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    message:'亲爱的，热爱的',
                    message2:'古诗词'
                }
            })
        </script>
    </body>

单选按钮

<body>
        <div id="app">
              <input type="radio" id="runoob" value="林志玲" v-model="picked">
                  <!--label可以把光标转移到对应的元素上-->
              <label for="runoob">林志玲</label>
              <br>
              <input type="radio" id="google" value="迪丽热巴" v-model="picked">
              <label for="google">迪丽热巴</label>
              <br>
              <span>选中值为: {
   { picked }}</span>
            </div>
            <script>
            new Vue({
              el: '#app',
              data: {
                picked : '空'
              }
            })
            </script>
    </body>

复选框

<body>
        <div id="app">
            <p>单个复选框</p>
            <input type="checkbox" id="checkbox" v-model="checked" />
            <label for="checkbox">{
   {checked}}</label>
            <p>多个复选框</p>
            <input type="checkbox" id="a" v-model="checkedName"  value="方天画戟"/>
            <label for="a">方天画戟</label>
            <input type="checkbox" id="b" v-model="checkedName"  value="青龙偃月"/>
            <label for="b">青龙偃月</label>
            <input type="checkbox" id="c" v-model="checkedName"  value="丈八蛇矛"/>
            <label for="c">丈八蛇矛</label>
            <span>最终选定的而武器：{
   {checkedName}}</span>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    checked:true,
                    checkedName:[]
                }
            })
        </script>
    </body>

select列表

<body>
        <div id="app">
              <select v-model="selected" name="fruit">
                <option value="">选择人物</option>
                <option value="亚瑟">战士</option>
                <option value="靳柯">刺客</option>
              </select>
              <div id="output">
                  选择的人物是: {
   {selected}}
              </div>
            </div>
            <script>
            new Vue({
              el: '#app',
              data: {
                selected: '' 
              }
            })
            </script>
    </body>

修饰符：

.lazy

在默认的情况下，v-model在input事件中同步输入框的值与数据，如果输入.lazy，转变在change事件中同步

.number

将用户输入的值，自动转换为number类型

.trim

自动过滤输入两端的空格

回顾：

监听事件：v-on （两种方法）

表单的使用 v-model

修饰符

作业：

1、事件监听两种方法熟练掌握

## 修饰符：
.lazy
在默认的情况下，v-model在input事件中同步输入框的值与数据，如果输入.lazy，转变在change事件中同步
.number
将用户输入的值，自动转换为number类型
.trim
自动过滤输入两端的空格
## 回顾：
监听事件：v-on （两种方法）
表单的使用  v-model
修饰符
## 作业：
1、事件监听两种方法熟练掌握
2、输入框的使用