Vue 是一个用于构建用户界面的渐进式框架。它的主要目标是通过尽可能简单的API提供高效的数据驱动的组件系统。
复习Vue时，可以关注以下几个方面：
- 安装和基本用法：了解如何安装Vue，并创建一个基本的Vue应用。
// 引入Vue库
import Vue from 'vue'
// 创建一个Vue实例
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
- 模板语法：Vue使用基于HTML的模板语法，了解其特性如指令、插值等。
<div id="app">
{{ message }}
</div>
- 响应式数据：Vue使数据和DOM保持同步，了解如何声明响应式数据。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
- 计算属性和观察者：计算属性用于处理复杂逻辑，观察者则用于响应数据的变化。
new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
- 组件系统：了解如何定义组件，以及如何注册和使用组件。
// 定义组件
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 创建Vue实例
new Vue({
el: '#app',
components: {
'my-component': MyComponent
}
})
- 生命周期钩子：了解不同生命周期钩子的用法，如
created, mounted等。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function () {
console.log('Component created.')
}
})
- 指令：Vue指令是特殊的attribute，以
v-开头，可以用来应用维护数据在DOM上的响应式行为。
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
- 表单绑定：了解如何使用
v-model进行表单输入和应用状态之间的双向绑定。
<div id="app">
<input v-model="message" placeholder="编辑我">
<p>消息: {{ message }}</p>
</div>
- Ajax与API调用：了解如何在Vue中处理API调用和响应。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created() {
axios.get('/api/data')
.then(response => {
this.message = response.data
})
.catch(error => {
console.error('There was an error!', error)
})
}
})
- 路由：如果使用Vue Router，复习如何定义路由、导航链接和视图。
// 引入Vue和Vue Router
import Vue from 'vue'
import Router from 'vue-router'
// 定义组件
const Home = { template: '<div>Home component</div>' }
const About = { template: