- 单向数据绑定（v - bind）
- 基本用法
- 在Vue.js组件中，单向数据绑定主要通过
v - bind指令实现，它可以将父组件的数据传递给子组件。这个指令通常可以简写成:。例如，在父组件App.vue中有一个数据属性parentMessage：
javascript
复制代码
<script>
export default {
data() {
return {
parentMessage: '这是来自父组件的消息'
};
}
};
</script>
- 在父组件的模板中，将这个数据传递给子组件
Child.vue：
html
复制代码
<template>
<div>
<Child :message="parentMessage"/>
</div>
</template>
- 在子组件
Child.vue中，通过props接收这个数据：
javascript
复制代码
<script>
export default {
props: ['message']
};
</script>
复制代码
- 然后在子组件的模板中使用这个数据：
html
复制代码
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
- 动态绑定属性值
v - bind还可以用于动态绑定元素的属性值。例如，绑定一个class属性：
html
复制代码
<template>
<div>
<button :class="{'active': isActive}">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true
};
}
};
</script>
- 这里如果
isActive为true，按钮就会有active这个类名，从而可以通过CSS样式来改变按钮的外观。同样的道理，也可以绑定style属性，如:style="{color: textColor}"，其中textColor是组件数据中的一个属性，用于定义文本颜色。
- 双向数据绑定（v - model）
- 基本概念
- 双向数据绑定允许数据在组件和DOM元素之间双向流动。在表单元素（如
input、textarea、select）中经常会用到v - model指令。例如，在一个简单的组件中有一个input元素：
html
复制代码
<template>
<div>
<input v - model="inputValue"/>
<p>输入的值是：{{ inputValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>
- 当用户在
input框中输入内容时，inputValue数据会自动更新，同时模板中{``{ inputValue }}显示的内容也会实时更新。
- 在自定义组件中使用
v - model
- 要在自定义组件中使用
v - model，需要在组件内部遵循一定的规则。自定义组件要接收一个value属性，并在合适的时候通过$emit触发一个input事件。例如，创建一个自定义的计数器组件Counter.vue：
html
复制代码
<template>
<div>
<button @click="decrement">-</button>
<span>{{ value }}</span>
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
props: ['value'],
methods: {
increment() {
this.$emit('input', this.value + 1);
},
decrement() {
this.$emit('input', this.value - 1);
}
}
};
</script>
- 在父组件中使用这个计数器组件并利用
v - model进行双向数据绑定：
html
复制代码
<template>
<div>
<Counter v - model="counterValue"/>
<p>计数器的值是：{{ counterValue }}</p>
</div>
</template>
<script>
import Counter from './Counter.vue';
export default {
components: {
Counter
},
data() {
return {
counterValue: 0
};
}
};
</script>
- 这样，当用户在计数器组件中点击
+或-按钮时，counterValue在父组件中的数据会更新，同时也会将新的值传递回计数器组件，实现双向数据绑定。
- 计算属性（Computed）和数据绑定
- 计算属性的概念
- 计算属性是基于组件中的现有数据，通过一定的计算逻辑得到的新属性。计算属性会根据它所依赖的数据的变化而自动重新计算。例如，在一个组件中有两个数据属性
firstName和lastName，想要得到完整的姓名，可以使用计算属性：
javascript
复制代码
<script>
export default {
data() {
return {
firstName: '张',
lastName: '三'
};
},
computed: {
fullName() {
return this.firstName + this.lastName;
}
}
};
</script>
html
复制代码
<template>
<div>
<p>姓名：{{ fullName }}</p>
</div>
</template>
- 计算属性与数据绑定的关系
- 计算属性可以用于更复杂的数据绑定场景。比如，在一个购物车组件中，有商品的单价
unitPrice和购买数量quantity，想要计算总价totalPrice，可以使用计算属性：
javascript
复制代码
<script>
export default {
data() {
return {
unitPrice: 10,
quantity: 2
};
},
computed: {
totalPrice() {
return this.unitPrice * this.quantity;
}
}
};
</script>
html
复制代码
<template>
<div>
<p>单价：{{ unitPrice }}</p>
<p>数量：{{ quantity }}</p>
<p>总价：{{ totalPrice }}</p>
</div>
</template>
- 当
unitPrice或quantity发生变化时，totalPrice会自动重新计算，并且模板中的显示也会更新，实现了数据的动态绑定。
- 侦听器（Watch）和数据绑定
- 侦听器的概念
- 侦听器用于观察组件中的数据变化，并在数据变化时执行相应的操作。例如，在一个组件中有一个数据属性
message，想要在message变化时执行一个函数，可以使用watch：
javascript
复制代码
<script>
export default {
data() {
return {
message: '初始消息'
};
},
watch: {
message(newValue, oldValue) {
console.log('消息从', oldValue, '变为', newValue);
}
}
};
</script>
- 侦听器与数据绑定的关系
- 侦听器可以用于在数据绑定的过程中，当数据发生特定变化时进行一些额外的操作，如数据验证、异步请求等。例如，在一个表单组件中，有一个
email数据属性，当用户输入email后，想要验证其格式是否正确：
javascript
复制代码
<script>
export default {
data() {
return {
email: ''
};
},
watch: {
email(newValue) {
if (!this.validateEmail(newValue)) {
console.log('邮箱格式错误');
}
}
},
methods: {
validateEmail(email) {
const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0 - 9]{1,3}\.[0 - 9]{1,3}\.[0 - 9]{1,3}\.[0 - 9]{1,3}\])|(([a - A - Z0 - 9]+\.)+[a - A - Z]{2,}))$/;
return re.test(email);
}
}
};
</script>
- 这样，当用户在绑定
email数据的input框中输入内容时，watch会监测到email数据的变化，并进行格式验证，实现了与数据绑定相关的额外操作。