vue2的知识点，更多前端知识在主页，还有其他知识会持续更新
Vue 指令
Vue指令是Vue.js中的一个重要概念，用于向DOM元素添加特定行为或功能。Vue指令以v-开头，例如v-bind、v-if、v-for等。
v-bind
动态绑定属性
用法： v-bind：属性名=“vue变量” 简写 ：属性名=“vue变量”
<img v-bind:src="imageSrc">v-on
给元素绑定事件监听器
用法：v-on：已定义的函数方法（实参） 简写 ： @事件名=“函数”
修饰符：.stop：阻止事件冒泡 .prevent 阻止默认行为 .once 程序运行期间，只触发一次
<button v-on:click="handleClick">点击我</button>v-model 在表单输入元素或组件上创建双向绑定
用于实现双向数据绑定，将表单元素的值与Vue实例中的数据进行关联。例如，将输入框的值与message数据进行双向绑定：
范围：<input> <select> <txttrea> <components>
用法：<input v-model="属性名"> // 复选框的值为数组 单选值为布尔值
修饰符：.lazy 编辑完成后才更新数据 .number 将字符串数字转成number数字 .trim 消除字符两端的空格
<input type="text" v-model="message">v-text 插值表达式 用于设置元素的部分内容
用法： <span v-text="span"></span> = <span>{{span}}</span>
容使用后在其中插值 无视所插的值
v-html 与v-text意义相同
用法：<div v-html="html"></div> html可以是HTML格式 可以自动编译
同样无视所插入的值
v-show 改变display css属性来工作 ps：频繁切换使用
用法：<div v-show="属性名"></div>
与v-if不同之处：v-show 会在dom渲染中保留该元素 仅切换了元素上display
v-show 不支持在 <template> 元素上使用 也不能喝 v-else 搭配使用
v-if 直接从dom上移除
用法：<div v-if="vue变量"></div>
<div v-if="isShow">显示内容</div>
<div v-show="isShow">显示内容</div>v-for 基于基础数据多次渲染元素或模块
用法：<div v-for="(item,key) in 数据" key="key"></div>
数据绑定类型：Array | object | Number | Iterable
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>vue的响应式基础
Vue2的响应式基础是指Vue框架中实现数据双向绑定的核心机制。在Vue2中，当数据发生变化时，视图会自动更新，反之亦然。这种实现是通过Vue的响应式系统来实现的。
Vue2的响应式基础主要包括以下几个方面：
-
数据劫持：Vue2通过Object.defineProperty()方法来劫持数据对象的属性，使得当属性被读取或修改时，可以触发相应的更新操作。
-
依赖追踪：Vue2通过Watcher对象来追踪数据对象的依赖关系，当数据发生变化时，会通知相关的Watcher对象进行更新操作。
-
派发更新：当数据发生变化时，Vue2会通过触发更新函数来更新相关的视图。
-
异步更新：Vue2通过nextTick()方法实现异步更新，将多个数据变化合并为一次更新操作，提高性能。
总的来说，Vue2的响应式基础通过数据劫持、依赖追踪、派发更新和异步更新等机制实现了数据与视图的双向绑定，使得开发者可以更加方便地管理和操作数据，提高了开发效率和用户体验。
选用选项式API时，会用 data 选项来声明组件的响应状态。此选项的值返回一个对象函数
vue将在创建新组件实例的时候调用此函数
声明属性
这些实例上的属性仅在实例首次创建时添加
声明方法
Methods 是一个包含所有方法的对象，在此你可以定义方法
不能用监听函数，vue自动为methods 中的方法绑定永远指向组件实例的this
DOM更新时机
当你改变响应式状态，DOM也会自动更新，然而，你得注意DOM的更新并不是同步的，无论你进行了多少次声明，每个组件都只需要更新一次
若要等待一个状态改变的dom跟新完成，可以使用nextTick()这个全局API
vue的计算属性
在Vue中，计算属性是指在模板中可以直接使用的属性，它们的值是通过对其他数据进行计算得到的。计算属性的值是基于它们的依赖缓存的，只有在依赖发生变化时才会重新计算，这样可以提高性能。
计算属性的定义方式如下：
new Vue({
data: {
message: 'Hello, Vue!'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
})
在上面的例子中，reversedMessage是一个计算属性，它依赖于message属性。当message发生变化时，reversedMessage会重新计算并更新视图。
计算属性的特点包括：
-
缓存：计算属性的结果会被缓存，只有在它的依赖发生改变时才会重新计算。这样可以避免不必要的计算，提高性能。
-
响应性：计算属性会自动响应数据的变化，当依赖的数据发生改变时，计算属性会自动重新计算并更新相关的视图。
-
懒加载：计算属性只会在模板中使用时才会计算，如果没有使用则不会计算，这样可以节省性能。
-
可以依赖多个数据：计算属性可以依赖于多个数据，只要其中任何一个数据发生变化，计算属性就会重新计算。
总的来说，计算属性是Vue中一种非常方便的机制，可以帮助开发者简化模板中的逻辑，提高代码的可维护性和性能。通过合理使用计算属性，可以更加高效地处理数据和更新视图。
格式：
computed: {
"计算属性名" () {
return "值"
}
}
可写式计算属性
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
