VUE
vue的实例属性
$data
Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
console.log(this.text === this.$data.text); //true
1$props
当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问,在子组件上使用
$el
Vue 实例使用的根 DOM 元素。在子组件上就是子组件的根DOM元素
$options
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处,直接修改$options.data的值不会更改数据,也不会触发视图渲染
$parent
父实例,如果当前实例有的话。
$root
当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。
const app = new Vue({})
this.$root === this.$root.$children[0].$root // true
this.$root === app //true
1
2
3
$children
当前实例的直接子组件。**需要注意 children并不保证顺序,也不是响应式的。∗∗如果你发现自己正在尝试使用‘children 并不保证顺序,也不是响应式的。**如果你发现自己正在尝试使用 `children并不保证顺序,也不是响应式的。∗∗如果你发现自己正在尝试使用‘children来进行数据绑定,考虑使用一个数组配合v-for` 来生成子组件,并且使用 Array 作为真正的来源。
$slots
用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:slot="foo"中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点。
在使用渲染函数书写一个组件时,访问 vm.$slots 最有帮助。
$scopedSlots
用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。
vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。
$refs
一个对象,持有注册过 ref特性的所有 DOM 元素和组件实例。
$isServer
当前 Vue 实例是否运行于服务器。用于服务端渲染
$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
Vue实例方法
$watch( expOrFn, callback, [options] )
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值
$on( event, callback )
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
$emit( eventName, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调。
$once( event, callback )
监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。
$forceUpdate()
不建议使用,频度控制不好容易造成内存溢出
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
如果更改在data中未声明的值,则不会触发视图更新,可以通过这个方法强制渲染,也可以通过$set避免这种情况
$off( [event, callback] )
移除自定义事件监听器。
如果没有提供参数,则移除所有的事件监听器;
如果只提供了事件,则移除该事件所有的监听器;
如果同时提供了事件与回调,则只移除这个回调的监听器。
$set( target, key, value )
Vue.set的别名
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
$delete( target, key, value)
Vue.delete的别名
删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是你应该很少会使用它。
$nextTick([callback])
Vue的渲染是异步的
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法
Vue数据绑定
vue可以访问绑定在this上的变量,无法访问定义在实例外的全局变量
computed
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。
如果不指定set,那么默认提供的函数将被用作属性的getter函数
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
watch
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
watch: {
a: function (val, oldVal) {
console.log( val, oldVal)
}
}
选项:deep
为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
当更改对象内部值时,vue的watch如果设置在整个对象上,那么将不会监听到变化,这时可以指定deep:true,但是这么做性能开销较大,因为每次对象中的任意一个值变化都会触发监听,可以在watch中直接监听内部值而不是整个对象
watch:{
'obj.a':{
get:function(){
//do something
}
}
}
选项:immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调
只有在vue第一次触发数据更新后,监听函数才会执行,制定了immediate为true后,会在页面mouted后直接触发监听函数
Vue原生指令
v-show
根据表达式之真假值,切换元素的 display CSS 属性。
v-if
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ,将提出它的内容作为条件块。
v-else v-else-if
限制:前一兄弟元素必须有 v-if 或 v-else-if。
v-for
基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名
v-for="(item, index) in items" //item:元素,index:索引
如果遍历Object
v-for="(value, key, index) in object" //value:键值,key:键名,index:索引
key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
<li v-for="(item,index)in items" :key="item.id">
</li>
1
2
v-on
修饰符:
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
vue基础组件及知识
最新推荐文章于 2022-12-08 21:32:03 发布