Vue框架学习大纲

Vue.js 是一个构建用户界面的框架，尤其是单页面应用。以下是一些主要基于 Vue 2.x 的版本必须了解的 Vue.js基本知识点和特性：

1. Vue 实例:
   创建一个 Vue 实例是开始使用 Vue 的第一步。

   var vm = new Vue({
     // 选项
   });
   

2. 数据绑定:
   Vue 提供了非常直观的数据绑定语法。

   <div id="app">
     {{ message }}
   </div>
   <script>
     var app = new Vue({
       el: '#app',
       data: {
         message: 'Hello Vue!'
       }
     });
   </script>
   

3. 指令 (Directives):
   指令是带有 v- 前缀的特殊属性。

   <p v-if="seen">Now you see me</p>
   <script>
     var app = new Vue({
       el: '#app',
       data: {
         seen: true
       }
     });
   </script>
   

4. 事件处理:
   使用 v-on 指令监听 DOM 事件。

   <button v-on:click="counter += 1">Add 1</button>
   <p>The button above has been clicked {{ counter }} times.</p>
   <script>
     var app = new Vue({
       el: '#app',
       data: {
         counter: 0
       }
     });
   </script>
   

5. 计算属性 (Computed properties):
   计算属性是基于它们的依赖进行缓存的。

   var vm = new Vue({
     el: '#example',
     data: {
       a: 1
     },
     computed: {
       // a computed getter
       b: function () {
         // `this` points to the vm instance
         return this.a + 1
       }
     }
   });
   

6. 双向数据绑定:
   使用 v-model 指令实现双向数据绑定。

   <input v-model="message" placeholder="edit me">
   <p>Message is: {{ message }}</p>
   <script>
     var app = new Vue({
       el: '#app',
       data: {
         message: ''
       }
     });
   </script>
   

7. 组件 (Components):
   组件是 Vue.js 最强大的特性之一。

   Vue.component('button-counter', {
     data: function () {
       return {
         count: 0
       }
     },
     template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
   });
   

8. 生命周期钩子 (Lifecycle Hooks):
   每个 Vue 实例都有一系列的初始化过程，并且在这个过程中会运行一些叫做生命周期钩子的函数，如 created, mounted, updated, destroyed。

   new Vue({
     data: {
       a: 1
     },
     created: function () {
       // `this` 指向 vm 实例
       console.log('a is: ' + this.a)
     }
   })
   

9. 条件渲染:
   使用 v-if 和 v-show 进行条件渲染。

   <h1 v-if="ok">Yes</h1>
   <h1 v-show="ok">Yes</h1>
   

10. 列表渲染:
    使用 v-for 指令渲染列表。

    <ul id="example-1">
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul>
    

11. Vue Router:
    Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用。

12. Vuex:
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

13. 插槽 (Slots) 和 作用域插槽 (Scoped Slots):
    插槽是组件模板中的一种占位符，用于接收用户传递的内容。

以上基本知识点和特性为您提供了使用 Vue.js 构建应用程序的基础。为了更好地理解和使用 Vue.js，推荐深入阅读Vue.js 官方文档并尝试创建自己的 Vue.js 项目。

Vue 3.x 在这些基础上做了许多改进和添加了新的特性。以下是 Vue 3.x 中的一些新特性和变化：

1. Composition API:
   Vue 3 引入了 Composition API，它提供了一种更灵活的代码组织方法，特别是对于更复杂的组件和逻辑。

   import { ref, computed } from 'vue';
   
   export default {
     setup() {
       const count = ref(0);
       const doubled = computed(() => count.value * 2);
   
       function increment() {
         count.value++;
       }
   
       return {
         count,
         doubled,
         increment
       }
     }
   }
   

2. Reactivity System:
   Vue 3 的响应系统得到了重写，使用 Proxy API 替代了 Vue 2 的 Object.defineProperty API，带来了更好的性能和更多的可能性。

3. Multiple v-models:
   Vue 3 允许在一个组件上使用多个 v-model，这使得 prop 和事件的处理变得更为简单和灵活。

   <script setup>
   import { ref } from 'vue'
   
   const modelValue = ref('')
   const modelValue2 = ref('')
   </script>
   
   <template>
   <your-component
     v-model="modelValue"
     v-model:other="modelValue2"
   />
   </template>
   

4. Teleport:
   Teleport 提供了一种将组件 HTML 渲染到 DOM 中的其他位置的方法。

   <teleport to="#end-of-body">
     <div>I will be rendered at the end of body!</div>
   </teleport>
   

5. Suspense:
   Suspense 是一种使得组件等待嵌套的异步依赖项的方法。

   <Suspense>
     <template #default>
       <AsyncComponent />
     </template>
     <template #fallback>
       <div>Loading...</div>
     </template>
   </Suspense>
   

6. Improved Template Syntax:
   Vue 3 提供了模板语法的改进，包括新的 v-if 和 v-for 的用法。

7. Global Mounting Configuration:
   通过 createApp 方法，您可以在全局配置你的应用程序。

8. Fragment, Portal, and Suspense Components:
   Vue 3 引入了新的内置组件，使得开发者能够更灵活地构建用户界面。

9. Custom Renderer API:
   Vue 3 提供了自定义渲染器 API，使得创建自定义渲染器更为简单。

10. Better TypeScript Support:
    Vue 3 提供了改进的 TypeScript 类型支持，使得在 TypeScript 项目中使用 Vue 变得更加友好。

11. New Style and Transition Features:
    新的样式和过渡特性使得创建动画和过渡效果更为简单和强大。

以上是 Vue 3.x 的一些新特性和改进。为了更好地理解和使用 Vue 3，建议阅读 Vue 3 官方文档。