当前位置：首页 > news >正文

Vue框架学习大纲

news 2025/8/26 6:38:03

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 getterb: function () {// `this` points to the vm instancereturn 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-componentv-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:
新的样式和过渡特性使得创建动画和过渡效果更为简单和强大。