vue(html,css,vue2,vue3) 学习总结

**Vue.js学习总结**

### 前言Vue.js是一款非常流行的前端框架，尤其是在构建大型单页应用时。作为一名新手，我花了几个月时间学习并实践Vue.js，下面是我的学习总结。

### Vue.js的特点Vue.js有以下几个特点：

* **渐进式**:Vue.js可以与其他库和框架一起使用，不需要全部替换。
* **易学**:Vue.js的API设计非常简单易用，新手也能快速上手。
* **高效**:Vue.js提供了大量优化性能的工具和方法。

### Vue.js的基本概念####1. 组件组件是Vue.js最核心的概念。每个Vue.js应用都是由多个组件组成，每个组件都有自己的模板、数据和方法。

html<!-- hello.vue -->
<template>
 <div>{{ message }}</div>
</template>

<script>
export default {
 data() {
 return {
 message: 'Hello, World!'
 }
 }
}
</script>

####2. 模板模板是组件的视图部分，使用HTML结构来描述组件的外观。

html<!-- hello.vue -->
<template>
 <div>
 <h1>{{ title }}</h1>
 <p>{{ message }}</p>
 </div>
</template>

<script>
export default {
 data() {
 return {
 title: 'Hello, World!',
 message: 'This is a Vue.js application.'
 }
 }
}
</script>

####3. 数据数据是组件的状态部分，使用JavaScript对象来描述组件的内部状态。

javascript// hello.vueexport default {
 data() {
 return {
 title: 'Hello, World!',
 message: 'This is a Vue.js application.'
 }
 }
}

####4. 方法方法是组件的行为部分，使用JavaScript函数来描述组件的内部逻辑。

javascript// hello.vueexport default {
 data() {
 return {
 title: 'Hello, World!',
 message: 'This is a Vue.js application.'
 }
 },
 methods: {
 sayHello() {
 console.log('Hello, World!')
 }
 }
}

### Vue.js的生命周期Vue.js组件有以下几个生命周期：

* **beforeCreate**:组件创建之前。
* **created**:组件创建之后。
* **beforeMount**:组件挂载之前。
* **mounted**:组件挂载之后。
* **beforeUpdate**:组件更新之前。
* **updated**:组件更新之后。
* **beforeDestroy**:组件销毁之前。
* **destroyed**:组件销毁之后。

javascript// hello.vueexport default {
 data() {
 return {
 title: 'Hello, World!',
 message: 'This is a Vue.js application.'
 }
 },
 methods: {
 sayHello() {
 console.log('Hello, World!')
 }
 },
 beforeCreate() {
 console.log('beforeCreate')
 },
 created() {
 console.log('created')
 },
 beforeMount() {
 console.log('beforeMount')
 },
 mounted() {
 console.log('mounted')
 },
 beforeUpdate() {
 console.log('beforeUpdate')
 },
 updated() {
 console.log('updated')
 },
 beforeDestroy() {
 console.log('beforeDestroy')
 },
 destroyed() {
 console.log('destroyed')
 }
}

### Vue.js的事件Vue.js组件可以通过以下方式触发事件：

* **$emit**:触发自定义事件。
* **$on**:监听自定义事件。

javascript// hello.vueexport default {
 data() {
 return {
 title: 'Hello, World!',
 message: 'This is a Vue.js application.'
 }
 },
 methods: {
 sayHello() {
 console.log('Hello, World!')
 this.$emit('hello')
 }
 },
 mounted() {
 this.$on('hello', () => {
 console.log('hello event triggered')
 })
 }
}

### Vue.js的路由Vue.js组件可以通过以下方式实现路由：

* **$router**:获取当前路由信息。
* **$route**:获取当前路由参数。

javascript// hello.vueexport default {
 data() {
 return {
 title: 'Hello, World!',
 message: 'This is a Vue.js application.'
 }
 },
 methods: {
 sayHello() {
 console.log('Hello, World!')
 this.$router.push('/hello')
 }
 },
 mounted() {
 const route = this.$route console.log(route)
 }
}

### Vue.js的状态管理Vue.js组件可以通过以下方式实现状态管理：

* **Vuex**:使用Vuex来管理全局状态。
* **$store**:获取当前 Vuex 状态。

javascript// hello.vueexport default {
 data() {
 return {
 title: 'Hello, World!',
 message: 'This is a Vue.js application.'
 }
 },
 methods: {
 sayHello() {
 console.log('Hello, World!')
 this.$store.commit('hello')
 }
 },
 mounted() {
 const state = this.$store.state console.log(state)
 }
}

### Vue.js的插件Vue.js组件可以通过以下方式实现插件：

* **use**:使用插件来扩展 Vue.js 功能。
* **install**:安装插件到 Vue.js 应用中。

javascript// hello.vueexport default {
 data() {
 return {
 title: 'Hello, World!',
 message: 'This is a Vue.js application.'
 }
 },
 methods: {
 sayHello() {
 console.log('Hello, World!')
 this.$plugin.hello()
 }
 },
 mounted() {
 const plugin = this.$plugin console.log(plugin)
 }
}

### 总结Vue.js是一个非常流行的前端框架，尤其是在构建大型单页应用时。通过学习和实践 Vue.js，我们可以更好地理解它的特点、基本概念、生命周期、事件、路由、状态管理和插件等方面。