事件绑定

VUE中事件绑定用的是v-on:，可以简写为@

我们可以直接在标签里监听事件同时执行JS代码

1
<button v-on:click="cnt += 1">cnt++</button>

也可以在methods中写入事件然后在标签中使用

1
<button @click = "show"> {{msg}} </button>
1
2
3
4
5
6
7
8
9
10
11
var app = new Vue({
    el: "#app",
    data: {
        msg: "click"
    },
    methods: {
        show: function () {
            app.msg = "hello world!"
        }
    }
})

VUE还支持内联语句调用方法

1
2
<button @click = "show('hello')"> {{msg}} </button>
<button @click = "show('goodbye')"> {{msg}} </button>
1
2
3
4
5
6
7
8
9
10
11
var app = new Vue({
    el: "#app",
    data: {
        msg: "click"
    },
    methods: {
        show: function (str) {
            app.msg = str
        }
    }
})

我们发现当用这种传参方法之后，js原生事件的event属性就没有了，vue提供了$event参数来满足使用event属性的需求

1
<h1 v-for = "item in names" @click="fn(item, $event)"></h1>

修饰符

VUE还支持对事件进行修饰

比如原生js中阻止事件冒泡用的evt.stopPropagation()

在VUE中只要简单地使用.stop即可

1
<h1 v-for = "item in names" @click.stop="fn(item, $event)"></h1>

也可以添加修饰符阻止默认行为，对应原生js的evt.preventDefault()

1
<a src="http://www.baidu.com" @click.prevent="fn"></a>
修饰符 功能
.stop 阻止事件冒泡
.prevent 阻止浏览器默认行为
.capture 添加事件监听器时使用事件捕获模式
.self 只当在event.target是当前元素自身时触发处理函数
.once 只有第一次触发生效
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，优化移动端体验

在监听按键的时候还有按键修饰符，如下所示

1
2
3
4
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

按键还有一个特殊的修饰符.exact，允许精确地控制触发，官方例子如下

1
2
3
4
5
6
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

表单输入绑定

几乎所有html原生表单内容都是可以用v-model绑定的，具体要使用的时候可以查api，我这里稍微使用了一下做了个小demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<body>
    <div id="app">
        <div class="block">
            <div>
                <label>姓名：</label>
                <input type="text" placeholder="请输入姓名" v-model="name" />
            </div>

            <br />

            <label>性别</label>
            <select name="sex" v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
                <option value="其他">其他</option>
            </select>

            <label>&emsp;意向职位(可多选，按住ctrl)：</label>
            <select name="job" v-model="job" multiple="multiple">
                <option value="前端工程师">前端工程师</option>
                <option value="后端工程师">后端工程师</option>
                <option value="算法工程师">算法工程师</option>
                <option value="软件测试">软件测试</option>
                <option value="UI设计">UI设计</option>
            </select>

            <label>&emsp;联系方式：</label>
            <input type="text" v-model.number="tel" placeholder="请输入手机号码" />

            <div>
                <br />
                <div>教育经历：</div>
                <br />
                <textarea rows="5" cols="50" placeholder="请填入教育经历" v-model="education" />
                </textarea>
            </div>

            <div>
                <br />
                <div>项目经历：</div>
                <br />
                <textarea rows="5" cols="50" placeholder="请填入项目经历" v-model="experience" />
                </textarea>
            </div>


            <div>
                <br />
                <div>个人简介：</div>
                <br />
                <textarea rows="5" cols="50" placeholder="请填入个人简介" v-model="description" />
                </textarea>
            </div>

            <br />
        </div>

        <div class="block">
            <h4> 姓名：{{name}}</h4>
            <h4> 性别：{{sex}}</h4>
            <h4> 联系方式：{{tel}}</h4>
            <h4> 意向职位：{{job}}</h4>
            <h4> 教育经历：{{education}}</h4>
            <h4> 项目经历：{{experience}}</h4>
            <h4> 个人简介：{{description}}</h4>
        </div>
    </div>

    <script>
        let options = {
            el: "#app",
            data: {
                name: "",
                description: "",
                education: "",
                experience:"",
                sex: "",
                job: [],
                tel: ""
            }
        }
        var app = new Vue(options)
    </script>
</body>