vue基础知识点总结.docVIP

vue基础知识点总结

一、Vue简介

Vue是一款流行的JavaScript前端框架，用于构建用户界面。它采用了组件化的思想，使得代码的复用性和可维护性大大提高。Vue采用数据驱动视图的方式，当数据发生变化时，视图会自动更新，开发者无需手动操作DOM。

二、Vue实例

1.创建

-通过`newVue()`创建一个Vue实例。在创建实例时，可以传入一个配置对象，这个对象包含了诸如`el`（挂载元素）、`data`（数据对象）、`methods`（方法）等属性。

-例如：`varapp=newVue({el:app,data:{message:HelloVue}});`

2.生命周期

-有多个生命周期钩子函数，如`beforeCreate`、`created`、`beforeMount`、`mounted`等。

-`beforeCreate`在实例初始化之后，数据观测和事件配置之前被调用。`created`在实例创建完成后被调用，此时已完成数据观测等，但尚未挂载到DOM。`mounted`在挂载完成后被调用，此时可以访问到DOM元素。

三、数据绑定

1.插值表达式

-使用双大括号`{{}}`来进行数据绑定。例如在模板中`{{message}}`，`message`是Vue实例`data`中的属性。

2.v-bind指令

-用于绑定HTML属性。缩写为`:`,如`av-bind:href=url`可以写成`a:href=url`，`url`是Vue实例中的数据。

四、指令

1.v-if和v-else

-根据表达式的值来决定元素是否渲染。例如`v-if=isShow`，当`isShow`为`true`时元素渲染，为`false`时元素移除。可以搭配`v-else`使用，如`divv-if=isShow显示内容/divdivv-else隐藏内容/div`。

2.v-for

-用于循环渲染列表。例如`v-for=iteminitems`，`items`是一个数组，`item`是数组中的每一项。可以获取索引，如`v-for=(item,index)initems`。

3.v-on指令

-用于绑定事件。缩写为`@`，如`v-on:click=handleClick`可以写成`@click=handleClick`，`handleClick`是Vue实例`methods`中的一个方法。

五、组件化

1.组件的创建

-可以通过`Vponent(组件名,{template:组件模板内容,data:function(){return{}},methods:{}})`创建全局组件。也可以在Vue实例内部创建局部组件。

2.组件通信

-父子组件通信：父组件可以通过属性传递数据给子组件（`props`），子组件可以通过自定义事件向父组件传递数据。

-兄弟组件通信：可以通过共同的父组件或者使用Vuex（状态管理库）来实现。

六、Vuex（可选知识点）

1.核心概念

-`state`：存储应用的状态。

-`mutations`：用于同步修改`state`中的数据。

-`actions`：用于处理异步操作，如异步获取数据后再调用`mutations`来修改`state`。

-`getters`：类似于计算属性，用于从`state`中获取派生数据。

七、计算属性

1.基本用法

-使用`computed`选项来定义计算属性。计算属性会根据依赖的数据自动缓存结果。例如：

-`computed:{fullName:function(){returnthis.firstName++this.lastName}}`，当`firstName`或`lastName`发生变化时，`fullName`会重新计算。