1. 安装 Vue.js：
你可以通过使用 npm 或 yarn 来安装 Vue.js。在项目目录下运行以下命令：
npm install vue@next
# 或者使用 yarn
yarn add vue@next
2. 创建一个 Vue 实例：
在你的 HTML 文件中引入 Vue.js，并创建一个简单的 Vue 实例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 3.0 Tutorial</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="path/to/vue.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue.js 3.0!'
};
}
});
app.mount('#app');
</script>
</body>
</html>
3. 模板语法：
Vue.js 使用模板语法将数据绑定到 DOM。在模板中，你可以使用插值表达式 {{ }} 来显示数据。
<div id="app">
<h1>{{ message }}</h1>
</div>
4. 数据绑定：
使用 v-bind 指令可以将数据绑定到 HTML 特性。
<div id="app">
<a v-bind:href="url">Click me</a>
</div>
<script>
const app = Vue.createApp({
data() {
return {
url: 'https://www.example.com'
};
}
});
app.mount('#app');
</script>
5. 事件处理：
使用 v-on 指令可以监听 DOM 事件。
<div id="app">
<button v-on:click="onClick">Click me</button>
</div>
<script>
const app = Vue.createApp({
methods: {
onClick() {
alert('Button clicked!');
}
}
});
app.mount('#app');
</script>
6. 条件渲染和循环：
使用 v-if、v-else-if 和 v-else 进行条件渲染，使用 v-for 进行循环。
<div id="app">
<p v-if="isVisible">This is visible</p>
<p v-else-if="isHidden">This is hidden</p>
<p v-else>This is the default</p>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
isVisible: true,
isHidden: false,
items: ['Item 1', 'Item 2', 'Item 3']
};
}
});
app.mount('#app');
</script>
这是一个简要的 Vue.js 3.0 基础教程，覆盖了创建 Vue 实例、模板语法、数据绑定、事件处理、条件渲染和循环等基本概念。进一步学习时，你可以深入了解 Vue.js 的生命周期钩子、组件化开发、Vue Router、Vuex 等更高级的主题。
转载请注明出处：http://www.zyzy.cn/article/detail/478/Vue 3.0