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 "值"
}
}
}