Vue(03)——事件绑定和双向绑定
1、事件绑定
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on
指令中是不可行的。因此 v-on
还可以接收一个需要调用的方法名称。实例如下:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<button v-on:click="hello">Click Me</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "万里顾一程"
},
methods: {
hello: function (event){
alert(this.message);
}
}
});
</script>
</body>
</html>
2、双向绑定
什么是双向数据绑定
Vue.js是一个MVVM框架,数据双向绑定,即当数据发生变化的时候,视图也发生变化,当视图发生变化时,数据也会跟着同步变化。这也算是vue.js的精髓之处了。
值得注意的是,我们所说的数据双向绑定,一定是对UI控件来说的,非UI控件不会涉及到数据的双向绑定。单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突。
为什么要实现数据的双向绑定
在Vue.js中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,Vue.js的双向数据绑定用起来就特别的舒服了。即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作。
2.1、表单输入绑定
你可以用 v-model
指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注意:v-model
会忽略所有表单元素的 value
、checked
、selected
attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data
选项中声明初始值。
单行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
单行文本:<input v-model="message" type="text">{{message}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "123"
}
});
</script>
</body>
</html>
文本框后面数据随着文本框里的内容改变而改变
多行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
</head>
<body>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
多行文本:<textarea v-model="message" placeholder="add multiple lines"></textarea>
{{message}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
</body>
</body>
</html>
单选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
性别:
<input type="radio" name="sex" value="男" v-model="sexName">男
<input type="radio" name="sex" value="女" v-model="sexName">女
<p>
选中了谁:{{sexName}}
</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
sexName:""
}
});
</script>
</body>
</html>
复选框
单个复选框,绑定到布尔值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
是否有心理疾病:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
checked:false
}
});
</script>
</body>
</html>
多个复选框,绑定到同一个数组:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
checkedNames: []
}
});
</script>
</body>
</html>
下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
selected: ""
}
});
</script>
</body>
</html>
参考自Vue教程:https://cn.vuejs.org/v2/guide/forms.html