一、v-on:监听事件
事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件,可以绑定到Vue中的methods中的方法事件!
案例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/Vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">Click me</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
message : '马西莫'
},
methods: {//方法必须定义在Vue的method对象中
sayHi: function () {
alert(this.message)
}
}
});
</script>
</body>
</html>
效果:
二、什么是双向数据绑定
2.1、概述
Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex ,那么数据流也是单项的,这时就会和双向数据绑定有冲突。
2.2、为什么要实现数据的双向绑定
在Vue.js 中,如果使用vuex ,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,Vue.js 的双向数据绑定用起来就特别好了。即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作。
2.3、在表单中使用双向数据绑定
可以用v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特 殊处理。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/Vue.js"></script>
</head>
<body>
<div id="app">
输入的文本:<input type="text" v-model="message">{{message}}<br>
===========================================================<br>
性别:
<input type="radio" name="sex" value="男" v-model="massimo">男
<input type="radio" name="sex" value="女" v-model="massimo">女
<p>
选中了:{{massimo}}
</p>
===========================================================<br>
下拉框:
<select v-model="selected">
<option>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>value:{{selected}}</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
message: "123",
massimo: '',
selected: ''
}
});
</script>
</body>
</html>
效果: