4.新建一个单文件组件Ref.vue,采用“响应式数据绑定”的方法,实现在页面输出自己的直挂云帆济沧海座右铭,并将更改以后的数据输出在控制台。
时间: 2024-10-06 11:05:32 浏览: 34
在Vue.js中,你可以创建一个名为`Ref.vue`的单文件组件(.vue文件),并使用Vue的内置`ref`属性来实现响应式数据绑定。首先,你需要设置一个数据属性作为引用,然后在模板中绑定这个引用。下面是`Ref.vue`组件的基本结构:
```html
<template>
<div>
<input v-model="customQuote" placeholder="请输入座右铭">
<p>{{ customQuote }}</p>
</div>
</template>
<script>
export default {
data() {
return {
customQuote: '', // 初始化一个空字符串用于存储座右铭
};
},
watch: {
customQuote(newValue) { // 当customQuote变化时,触发此函数
console.log('新的座右铭:', newValue); // 输出到控制台
},
},
};
</script>
```
在这个例子中:
- `v-model`指令用于双向数据绑定,输入框的内容会实时同步到`customQuote`变量。
- `{{ customQuote }}`会在模板中显示当前的座右铭值。
- `watch`选项监听`customQuote`的变化,当其值改变时,会打印新值到控制台。
要在页面上使用这个组件,只需将其引入并实例化即可,例如:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ref.vue 示例</title>
<!-- 引入Vue库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
<div id="app">
<ref-vue></ref-vue>
</div>
<script src="Ref.vue"></script>
</body>
</html>
```
当你在输入框中更改座右铭,更新的文字会立即展示,并在控制台看到相应的变更记录。
阅读全文