Vue.js 是一个构建用户界面的框架，尤其是单页面应用。以下是一些主要基于 Vue 2.x 的版本必须了解的 Vue.js基本知识点和特性：
-
Vue 实例:
创建一个 Vue 实例是开始使用 Vue 的第一步。var vm = new Vue({ // 选项 }); -
数据绑定:
Vue 提供了非常直观的数据绑定语法。<div id="app"> { { message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> -
指令 (Directives):
指令是带有v-前缀的特殊属性。<p v-if="seen">Now you see me</p> <script> var app = new Vue({ el: '#app', data: { seen: true } }); </script> -
事件处理:
使用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> -
计算属性 (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 } } }); -
双向数据绑定:
使用v-model指令实现双向数据绑定。<input v-model="message" placeholder="edit me"> <p>Message is: { { message }}</p> <script> var app = new Vue({ el: '#app', data: { message: '' } }); </script> -
组件 (Components):
组件是 Vue.js 最强大的特性之一。Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me { { count }} times.</button>' }); -
生命周期钩子 (Lifecycle Hooks):
每个 Vue 实例都有一系列的初始化过程，并且在这个过程中会运行一些叫做生命周期钩子的函数，如created,mounted,updated,destroyed。new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) -
条件渲染:
使用v-if和v-show进行条件渲染。<h1 v-if="ok">Yes</h1> <h1 v-show="ok">Yes</h1> -
列表渲染:
使用v-for指令渲染列表。<ul id="example-1"> <li v-for="item in items"> { { item.message }} </li> </ul> -
Vue Router:
Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用。 -
Vuex:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 -
插槽 (Slots) 和 作用域插槽 (Scoped Slots):
插槽是组件模板中的一种占位符，用于接收用户传递的内容。
以上基本知识点和特性为您提供了使用 Vue.js 构建应用程序的基础。为了更好地理解和使用 Vue.js，推荐深入阅读Vue.js 官方文档并尝试创建自己的 Vue.js 项目。
Vue 3.x 在这些基础上做了许多改进和添加了新的特性。以下是 Vue 3.x 中的一些新特性和变化：
-
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 } } } -
Reactivity System:
Vue 3 的响应系统得到了重写，使用 Proxy API 替代了 Vue 2 的 Object.defineProperty API，带来了更好的性能和更多的可能性。 -
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> -
Teleport:
Teleport 提供了一种将组件 HTML 渲染到 DOM 中的其他位置的方法。<teleport to="#end-of-body"> <div>I will be rendered at the end of body!</div> </teleport> -
Suspense:
Suspense 是一种使得组件等待嵌套的异步依赖项的方法。<Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <div>Loading...</div> </template> </Suspense> -
Improved Template Syntax:
Vue 3 提供了模板语法的改进，包括新的 v-if 和 v-for 的用法。 -
Global Mounting Configuration:
通过createApp方法，您可以在全局配置你的应用程序。 -
Fragment, Portal, and Suspense Components:
Vue 3 引入了新的内置组件，使得开发者能够更灵活地构建用户界面。 -
Custom Renderer API:
Vue 3 提供了自定义渲染器 API，使得创建自定义渲染器更为简单。 -
Better TypeScript Support:
Vue 3 提供了改进的 TypeScript 类型支持，使得在 TypeScript 项目中使用 Vue 变得更加友好。 -
New Style and Transition Features:
新的样式和过渡特性使得创建动画和过渡效果更为简单和强大。
以上是 Vue 3.x 的一些新特性和改进。为了更好地理解和使用 Vue 3，建议阅读 Vue 3 官方文档。