数据属性（Data Properties）：
1. 基本用法：
在组件中，通过 data 函数返回一个包含数据属性的对象：
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue 3.0!'
};
}
};
</script>
2. 响应式数据：
Vue.js 3.0 会自动使 data 中的属性成为响应式的，当数据发生变化时，视图会自动更新。
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
方法（Methods）：
1. 基本用法：
在 methods 选项中定义组件的方法：
<template>
<div>
<p>{{ greet() }}</p>
</div>
</template>
<script>
export default {
methods: {
greet() {
return 'Hello from method!';
}
}
};
</script>
2. 访问数据属性：
在方法中可以访问组件的数据属性：
<template>
<div>
<p>{{ greet() }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Alice'
};
},
methods: {
greet() {
return 'Hello, ' + this.name + '!';
}
}
};
</script>
3. 事件处理：
使用方法处理事件，例如按钮点击事件：
<template>
<div>
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked!');
}
}
};
</script>
Vue.js 3.0 中的数据属性和方法的使用方式与 2.x 类似，但通过 Composition API 你可以更灵活地组织组件的逻辑。在编写复杂组件时，你可能会用到 Composition API 的 setup 函数，它提供了更强大的组织和重用逻辑的方式。
转载请注明出处：http://www.zyzy.cn/article/detail/483/Vue 3.0