vue最常用基础知识

Vue.js是一种轻量级的前端JavaScript框架，设计用于构建可维护、易于扩展的单页应用。它通过数据驱动的视图来简化前端开发流程，并且具备组件化和响应式数据绑定的特点。以下将详细介绍Vue.js的一些基础知识，为构建Vue知识体系提供坚实的基础。 一、Vue实例及选项 Vue实例是使用Vue.js开发应用的入口点，通过new Vue()来创建。实例的选项（options）定义了其行为，常用选项包括： 1. el: 用于挂载实例到页面上的一个已存在的DOM元素。例如，Vue实例可以使用el选项直接挂载到一个ID为app的div元素上。 2. data: 实例化Vue对象时定义的数据对象，通常包含多个属性，这些属性将被绑定到模板中。 3. props: 一个数组或对象，用于接收父组件传递给当前组件的数据。 ***puted: 用于声明计算属性，这些属性依赖于data中的响应式数据，当依赖的数据变化时，计算属性会自动更新。 5. methods: 定义Vue实例的方法，这些方法可以在模板中被直接调用，并执行业务逻辑操作。 6. watch: 提供了一个方式，可以观察和响应Vue实例上的数据变动。 二、Vue指令 Vue的指令是带有v-前缀的特殊属性，它们提供了一种方式，可以在模板中声明性地应用响应式数据绑定和DOM操作。常见的指令包括： 1. v-text: 更新元素的textContent内容。 2. v-html: 更新元素的innerHTML内容。 3. v-show: 基于表达式的结果，切换元素的display属性。 4. v-if, v-else, v-else-if: 根据条件渲染元素，v-if是条件渲染指令，v-else和v-else-if只能与v-if配合使用。 5. v-for: 基于一个数组或者对象迭代渲染一块模板。 6. v-on: 用于监听DOM事件，并在触发时执行一些JavaScript代码。 7. v-bind: 动态绑定一个或多个属性，或组件prop到表达式。 8. v-model: 在表单控件或者组件上创建双向绑定。 9. v-once: 使元素或组件只渲染一次，之后变更数据不会触发更新。 三、计算属性和侦听属性 计算属性和侦听属性都是Vue响应式系统的一部分，但它们的应用场景和设计目的不同。 1. 计算属性依赖于data中的响应式数据，只有当这些依赖的数据发生变化时才会重新计算。它们是基于它们的依赖进行缓存的，仅在相关依赖改变时才重新求值，适用于复杂的计算场景。 2. 侦听属性则用于在数据变化时执行异步或开销较大的操作，如发送API请求。它们不提供缓存，每当侦听的数据变化时，侦听函数都会被调用。 四、控制class和style 在Vue中，class和style可以使用v-bind指令动态绑定。 1. class: 可以直接绑定对象或数组到元素的class属性，对象的键名对应class名称，键值对应布尔值决定是否应用这个class。 2. style: 可以绑定内联样式，同样支持对象和数组形式，对象键名对应样式属性名，键值对应样式值。 五、v-if和v-show指令的区别及应用场景 v-if是真正的条件渲染，它会根据表达式的真假来决定是否将元素渲染到DOM中；v-show仅是通过CSS切换显示状态。v-if在初始渲染时若条件为假则不渲染，在条件第一次变为真时开始渲染；而v-show不管初始条件如何都会渲染元素，仅通过改变CSS来切换显示状态。v-if有更高的切换开销，适合不经常切换条件；v-show有更高的初始渲染开销，但切换开销较小，适合频繁切换条件的场景。 六、v-if和v-for指令的优先级及使用策略 在Vue中，v-for指令具有比v-if更高的优先级。如果需要同时使用这两个指令，建议把v-if移动到包含v-for的元素之外或者使用<template>作为包裹元素，并在其中放置v-if指令。 七、v-for的语法格式和使用key v-for用于基于数组迭代渲染一块模板。其语法格式有三种：item in items、(item, index) in items和(item, key, index) in items。使用key是为了给Vue提供一个提示，以便跟踪每个节点的身份，从而更高效地更新和排序现有的DOM元素。key应该是一个唯一的标识符。 八、数组和对象的响应式变化检测限制及解决方法 Vue无法检测以下场景的数组变化： 1. 直接使用索引设置一个数组项，例如 vm.items[indexOfItem] = newValue。 2. 修改数组的长度，例如 vm.items.length = newLength。 3. 无法检测对象属性的添加或删除。解决方法是使用Vue.set方法，如Vue.set(object, key, value)。 九、事件修饰符 Vue提供了一些内置的事件修饰符，它们允许你直接在模板中的v-on指令中使用，常见的有： 1. .stop: 阻止事件继续传播。 2. .prevent: 阻止事件默认行为。 3. .capture: 使用事件捕获模式。 4. .self: 只有当事件是从绑定元素本身触发时才触发事件处理器。 5. .once: 事件监听器将只触发一次。 十、表单输入绑定 v-model指令在表单控件或者组件上创建双向数据绑定，使得数据状态同步更新。 这些知识点涵盖了Vue.js核心框架的一些基础，包括实例创建、指令使用、响应式原理、事件处理和表单数据绑定等关键点。掌握这些基础知识，就能快速构建起Vue.js开发的初步框架，并在实际开发中灵活运用，快速组成自己的Vue知识体系。