1. 创建 Vue 实例
在使用 Vue 时，通常会先创建一个 Vue 实例。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Instance</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
</body>
</html>
在上述代码中，通过 `new Vue()` 创建了一个 Vue 实例，`el` 选项指定了实例挂载的 DOM 元素，`data` 选项用于定义实例的数据。
2. 数据绑定
Vue 提供了多种数据绑定方式，最常见的是使用双大括号 `{{ }}` 进行文本插值。
html
<div id="app">
<p>{{ message }}</p>
<input v-model="message" type="text">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
- `{{ message }}`：将 `data` 中的 `message` 数据显示在页面上。
- `v-model`：实现双向数据绑定，即输入框的值会随着 `message` 的变化而变化，同时 `message` 也会随着输入框的值的改变而更新。
3. 事件处理
使用 `v-on` 指令（简写为 `@`）来绑定 DOM 事件。
html
<div id="app">
<button @click="increaseCount">Click me</button>
<p>Count: {{ count }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increaseCount() {
this.count++;
}
}
});
</script>
在这个例子中，`@click` 绑定了 `increaseCount` 方法，当按钮被点击时，`increaseCount` 方法会被调用，从而使 `count` 的值加 1。
4. 条件渲染和列表渲染
- **条件渲染**：使用 `v-if`、`v-else`、`v-else-if` 指令进行条件渲染。
html
<div id="app">
<p v-if="isShow">This is shown when isShow is true.</p>
<p v-else>This is shown when isShow is false.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
});
</script>
- **列表渲染**：使用 `v-for` 指令进行列表渲染。
html
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
});
</script>
5. 组件化开发
组件是 Vue 应用的重要组成部分，可将页面拆分成多个小的、可复用的组件。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Component</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
// 定义组件
Vue.component('my-component', {
template: '<p>This is a custom component.</p>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
在这个例子中，使用 `Vue.component` 定义了一个名为 `my-component` 的组件，然后在 Vue 实例的模板中使用该组件。
6. 生命周期钩子的使用
Vue 实例有多个生命周期钩子，可在特定阶段执行自定义逻辑。
javascript
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
created() {
console.log('Instance created');
},
mounted() {
console.log('Instance mounted');
}
});
在上述代码中，`created` 钩子在实例创建完成后执行，`mounted` 钩子在实例挂载到 DOM 后执行。
7. 使用 Vue Router 进行路由管理
Vue Router 是 Vue.js 官方的路由管理器，用于实现单页面应用（SPA）的路由功能。
javascript
// 1. 定义路由组件
const Home = { template: '<div>Home page</div>' };
const About = { template: '<div>About page</div>' };
// 2. 定义路由
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
// 3. 创建路由实例
const router = new VueRouter({
routes
});
// 4. 创建并挂载根实例
new Vue({
router
}).$mount('#app');
8. 使用 Vuex 进行状态管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
javascript
// 1. 创建 store
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
});
// 2. 在组件中使用 store
new Vue({
store,
methods: {
incrementCount() {
this.$store.commit('increment');
}
}
});
以上就是 Vue 的一些常见操作，掌握这些操作可以帮助你构建出功能丰富的 Vue 应用。