vue复习

**Vue.js复习**

###1. Vue.js概述Vue.js是一款用于构建用户界面的前端框架，旨在简化HTML、CSS和JavaScript的使用。它提供了一个强大的生态系统，包括大量的库和工具，可以帮助开发者快速构建复杂的应用。

###2. Vue.js特点* **易学**:Vue.js有着非常友好的API设计，使得新手可以轻松上手。
* **灵活**:Vue.js支持多种模板语法，包括HTML、CSS和JavaScript。
* **高性能**:Vue.js使用了虚拟DOM（Virtual DOM）来优化渲染性能。
* **强大生态系统**:Vue.js有着庞大的社区和第三方库支持。

###3. Vue.js基本概念####1. Vue实例每个Vue应用都需要一个根实例，负责管理整个应用的状态和行为。

javascript// 创建一个新的Vue实例const app = new Vue({
 el: '#app',
 data: {
 message: 'Hello, World!'
 }
})

####2. 模板语法Vue.js支持多种模板语法，包括HTML、CSS和JavaScript。

html<!-- HTML模板 -->
<div>{{message}}</div>

<!-- CSS模板 -->
<style scoped>
 .hello {
 color: red;
 }
</style>

<!-- JavaScript模板 -->
<script>
 export default {
 data() {
 return {
 message: 'Hello, World!'
 }
 },
 methods: {
 sayHello() {
 console.log('Hello!')
 }
 }
 }
</script>

####3. 组件Vue.js的组件是构建复杂应用的基本单位。每个组件都有自己的模板、数据和方法。

javascript// 创建一个新的Vue组件const MyComponent = {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 methods: {
 sayHello() {
 console.log('Hello!')
 }
 }
}

###4. Vue.js生命周期Vue.js的生命周期是指组件从创建到销毁的整个过程。每个阶段都有特定的方法可以被调用。

####1. beforeCreate()

在组件创建之前，会触发这个方法。

javascriptexport default {
 data() {
 return {
 name: 'John'
 }
 },
 beforeCreate() {
 console.log('beforeCreate')
 }
}

####2. created()

在组件创建之后，会触发这个方法。

javascriptexport default {
 data() {
 return {
 name: 'John'
 }
 },
 created() {
 console.log('created')
 }
}

####3. beforeMount()

在组件挂载之前，会触发这个方法。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 beforeMount() {
 console.log('beforeMount')
 }
}

####4. mounted()

在组件挂载之后，会触发这个方法。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 mounted() {
 console.log('mounted')
 }
}

####5. beforeUpdate()

在组件更新之前，会触发这个方法。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 methods: {
 updateName() {
 this.name = 'Jane'
 }
 },
 beforeUpdate() {
 console.log('beforeUpdate')
 }
}

####6. updated()

在组件更新之后，会触发这个方法。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 methods: {
 updateName() {
 this.name = 'Jane'
 }
 },
 updated() {
 console.log('updated')
 }
}

####7. beforeDestroy()

在组件销毁之前，会触发这个方法。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 methods: {
 destroy() {
 this.$destroy()
 }
 },
 beforeDestroy() {
 console.log('beforeDestroy')
 }
}

####8. destroyed()

在组件销毁之后，会触发这个方法。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 methods: {
 destroy() {
 this.$destroy()
 }
 },
 destroyed() {
 console.log('destroyed')
 }
}

###5. Vue.js事件Vue.js支持多种事件类型，包括点击、鼠标移动、键盘输入等。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 methods: {
 handleClick(event) {
 console.log('handleClick', event)
 },
 handleMouseMove(event) {
 console.log('handleMouseMove', event)
 },
 handleKeyDown(event) {
 console.log('handleKeyDown', event)
 }
 }
}

###6. Vue.js过滤器Vue.js支持多种过滤器类型，包括时间、金额等。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 filters: {
 formatTime(time) {
 return new Date(time).toLocaleString()
 },
 formatMoney(money) {
 return money.toFixed(2)
 }
 }
}

###7. Vue.js计算属性Vue.js支持多种计算属性类型，包括简单的计算、复杂的逻辑等。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 computed: {
 fullName() {
 return this.name + ' Doe'
 },
 isAdult() {
 return new Date().getFullYear() - this.age >18 }
 }
}

###8. Vue.jswatchVue.js支持多种watch类型，包括简单的监听、复杂的逻辑等。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 watch: {
 name(newValue) {
 console.log('watch', newValue)
 },
 age(newValue) {
 if (newValue >18) {
 console.log('watch', newValue)
 }
 }
 }
}

###9. Vue.js异步Vue.js支持多种异步类型，包括简单的Promise、复杂的async/await等。

javascriptexport default {
 template: '<div>Hello, {{name}}!</div>',
 data() {
 return {
 name: 'John'
 }
 },
 methods: {
 async fetchData() {
 const response = await fetch('/api/data')
 const data = await response.json()
 console.log('fetchData', data)
 }
 }
}

###10. Vue.js插件Vue.js支持多种插件类型，包括简单的功能、复杂的逻辑等。

javascriptexport default {
 install(Vue) {
 Vue.prototype.$myPlugin = function() {
 console.log('install', this)
 }
 }
}

###11. Vue.js混合Vue.js支持多种混合类型，包括简单的功能、复杂的逻辑等。

javascriptexport default {
 methods: {
 myMethod() {
 console.log('myMethod')
 }
 },
 mixin: {
 myMixin() {
 this.myMethod()
 }
 }
}

###12. Vue.js全局过滤器Vue.js支持多种全局过滤器类型，包括简单的功能、复杂的逻辑等。

javascriptexport default {
 filters: {
 formatTime(time) {
 return new Date(time).toLocaleString()
 }
 },
 install(Vue) {
 Vue.filter('formatTime', this.formatTime)
 }
}

###13. Vue.js全局指令Vue.js支持多种全局指令类型，包括简单的功能、复杂的逻辑等。

javascriptexport default {
 directives: {
 myDirective() {
 console.log('myDirective')
 }
 },
 install(Vue) {
 Vue.directive