【Vue】基础(五) 数据及事件绑定与监听、值绑定
数据及事件绑定
-
- 一、数据绑定
-
-
- 单向绑定
-
- 插值绑定
- v-bind绑定
- 双向绑定
-
- 二、表单控件绑定
- 三、值绑定
-
-
- .lazy（懒加载）修饰符
- .number修饰符
- .trim修饰符
-
- 四、事件绑定与监听
-
-
- 方法及内联处理器
- 修饰符
-
- 五、class与style的绑定
-
-
- 绑定class
- 绑定内联样式
-
一、数据绑定
单向绑定
单向绑定： 把 Model 绑定到 View 后，当用 JavaScript 代码更新Model 时，View会自动更新。因此，我们不需要进行额外的 DOM 操作，只需要进行 Model 操作就可以实现视图的联动更新。
单向绑定的实现过程是：
-
所有数据只保存一份。
-
一旦数据变化，就去更新页面(只有
data->DOM，没有DOM->data) -
若用户在页面上做了更新，就手动收集(双向绑定式自动收集)，合并到原有的数据中。
插值绑定
插值绑定： 是数据绑定的基本形式，用“{ { }}”实现，这种语法在Vue中称为Mustache语法。插值的形式就是{ { data }}，它使用的是单向绑定。首先定义一个JavaScript对象作为 Model，并且把这个 Model 的两个属性绑定到 DOM 节点上。
<div id="app">{
{ num }}div>
<script>
new Vue({
el: '#app',
data: {
num: '学习Vue'
}
})
script>
【提示】Vue实例就是ViewModel的代理对象。
在上述代码中
-
el：指定要把Model绑定到 id 为 app 的DOM节点上；
-
data：指定Model。data中的num相当于Model
View
v-bind绑定
v-bind绑定： 如果HTML的某些属性可以支持单向绑定，我们只需要在该属性前面加上v-bind指令，这样Vue在解析时会识别出该指令，将属性值跟Vue实例的Model 进行绑定。以后，我们就可以通过 Model 来动态的操作该属性，从而实现 DOM 的联动更新。
<div id="app">
<p v-bind:class="jumooc">Hello,{
{ name }}p>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Vue之旅',
jumooc:'red'
}
})
script>
<style>
.red{
background-color: red;
}
.blue{
background-color: blue;
}
style>
双向绑定
双向绑定： Vue框架的核心功能就是双向数据绑定。简单的说，双向绑定就是把Model绑定到 View的同时也将 View绑定到 Model 上，这样既可以通过更新Model 来实现View的自动更新，也可以通过更新 View 来实现 Model 数据的更新。
在Vue中只有表单元素能够创建双向的绑定，可以用v-model指令在、