1. Vue 实例
Vue 应用的核心是 Vue 实例。通过创建一个 Vue 实例，你可以将其连接到一个现有的 HTML 元素，并通过提供选项来控制应用的行为。
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue!'
};
}
});
app.mount('#app');
</script>
在上述示例中，data 选项用于声明响应式数据，{{ message }} 使用了双花括号语法，将 message 数据绑定到页面上。
2. 指令
指令是以 v- 开头的特殊属性，用于在模板中添加特殊行为。常见的指令有：
- v-bind：动态绑定 HTML 属性。
- v-model：实现表单元素的双向数据绑定。
- v-for：用于循环渲染列表。
- v-if、v-else-if、v-else：条件性地渲染元素。
- v-show：根据表达式的真假切换元素的显示与隐藏。
3. 事件处理
可以使用 v-on 指令来监听 DOM 事件，并在触发时执行指定的方法。
<button v-on:click="handleClick">Click me</button>
<script>
const app = Vue.createApp({
methods: {
handleClick() {
alert('Button clicked!');
}
}
});
app.mount('#app');
</script>
4. 计算属性
计算属性允许你在模板中放置声明式的逻辑，以便更容易地维护和测试。
<div>
{{ reversedMessage }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue!'
};
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
});
app.mount('#app');
</script>
5. Watchers
Watchers 允许你观察一个数据，并在其变化时执行异步或昂贵的操作。
<div>
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue!'
};
},
watch: {
message(newValue, oldValue) {
console.log(`Message changed from ${oldValue} to ${newValue}`);
}
}
});
app.mount('#app');
</script>
6. 组件
Vue.js 是一个组件化的框架，允许你构建可复用和模块化的组件。
<!-- MyComponent.vue -->
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello from MyComponent!'
};
}
};
</script>
在其他组件或实例中使用：
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
'my-component': MyComponent
}
};
</script>
这些是 Vue.js 3.0 的基础概念，能够帮助你构建动态和交互性的用户界面。深入了解这些概念，你将能够更好地利用 Vue.js 的强大功能。Vue.js 的官方文档是学习的好资源，可以在 [Vue.js 官方文档](https://v3.vuejs.org/) 中找到更详细和深入的信息。
转载请注明出处：http://www.zyzy.cn/article/detail/534/Vue 3.0