Vue基础知识

Vue 是一个渐进式的 JavaScript 框架，用于构建用户界面。以下是一些 Vue 的基础知识：

1. 组件（Components）：Vue 的核心概念是组件，组件是 Vue 应用的基本构建块。每个组件都有自己的模板、逻辑和样式。

   <template>
     <div>{{ message }}</div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         message: 'Hello, Vue!'
       };
     }
   }
   </script>
   
   <style>
   /* 样式 */
   </style>
   

2. 指令（Directives）：Vue 使用指令（以 v- 开头）来在模板中绑定数据。常用指令包括 v-bind（动态绑定属性）、v-model（双向绑定）、v-for（列表渲染）、v-if（条件渲染）等。

   <div v-if="show">Hello</div>
   <input v-model="inputValue" />
   

3. 数据绑定（Data Binding）：Vue 支持单向绑定和双向绑定。单向绑定使用 v-bind 指令，双向绑定使用 v-model 指令。

   <img v-bind:src="imageSrc" />
   <input v-model="text" />
   

4. 生命周期钩子（Lifecycle Hooks）：Vue 组件有一系列生命周期钩子函数，例如 created、mounted、updated 和 destroyed，用于在组件的不同阶段执行代码。

   export default {
     created() {
       console.log('Component created');
     }
   }
   

5. 计算属性（Computed Properties）：计算属性是基于响应式数据进行计算的属性，可以缓存结果，只有当依赖的数据发生变化时才会重新计算。

   export default {
     data() {
       return {
         number: 1
       };
     },
     computed: {
       doubled() {
         return this.number * 2;
       }
     }
   }
   

6. 事件处理（Event Handling）：Vue 使用 v-on 指令来监听 DOM 事件并执行相应的 JavaScript 方法。

   <button v-on:click="handleClick">Click me</button>
   

7. 插槽（Slots）：插槽允许你在组件中传递内容，从而在组件中插入自定义内容。

   <template>
     <slot></slot>
   </template>
   

8. 路由（Routing）：Vue Router 是 Vue 的官方路由管理器，用于在应用中创建路由和导航。

   import Vue from 'vue';
   import Router from 'vue-router';
   
   Vue.use(Router);
   
   const router = new Router({
     routes: [
       { path: '/', component: Home },
       { path: '/about', component: About }
     ]
   });
   

Vue 是一个功能强大的框架，适用于从小型项目到大型应用的开发，提供了简洁的 API 和灵活的功能扩展。