vue2总结一些小功能

一 、keep-alive

实现router切换状态保留 如果加载的数据ok 就不用重复加载了。代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div class="tab">
<router-link class="tab-item" to="/goods" tag="li" active-class="active">
<a href="javascript:;">商品</a>
</router-link>
</div>
<div>
<!--实现router切换状态保留 果加载的数据ok 就不用重复加载了-->
<keep-alive>
<!--:seller="seller" 向子组件传递数据-->
<router-view :seller="seller"></router-view>
</keep-alive>
</div>
</div>
</template>

二 、ref 引用指向 DOM节点

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

1
2
3
4
5
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
// 访组件实例
this.$refs.profile

关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,应当避免在模板或计算属性中使用 $refs。

三、Vue.nextTick( [callback, context] )

异步更新队列、为了在数据变化之后等待 Vue 完成更新 DOM可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '没有更新'
}
},
methods: {
updateMessage: function () {
this.message = '更新完成'
console.log(this.$el.textContent) // => '没有更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '更新完成'
})
}
}
})

四 、set 全局操作

对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性

1
2
3
4
5
6
7
8
9
10
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
//你可以添加一个新的 age 属性到嵌套的 userProfile 对象或者更改:
Vue.set(vm.userProfile, 'age', 27);
Vue.set(vm.userProfile, 'name', 'tom');

有时你可能需要为已有对象赋予多个新属性,在这种情况下,应该用两个对象的属性创建一个新的对象

1
2
3
4
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

五 、Vue.filter( id, [definition] )自定义过滤器

注册或获取全局过滤器。

1
2
3
4
5
6
7
8
9
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
return
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
})
六 、Vue.directive( id, [definition] )自定义属性指令

详细用法 https://cn.vuejs.org/v2/guide/custom-directive.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册 (指令函数)
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
// getter,返回已注册的指令
var myDirective = Vue.directive('my-directive')

七 、 自定义插件 Vue.use( plugin )
1
2
3
4
5
6
7
8
9
10
import StarComponent from './star.vue'
const Star_ing = {
install: function(Vue) {
Vue.component('Star_', StarComponent)
}
}
export default Star_ing
Vue.use(Star)//使用插件
//调用插件
<Star_></Star_>
八 、使用 Prop 传递数据

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。详细地址:https://cn.vuejs.org/v2/guide/components.html#Prop

1
2
3
4
5
6
7
8
9
10
//父组件
<router-view :seller="seller"></router-view>
//子组件
export default {
props: {
seller: {
type: Object
}
}
}

九 、$emit 触发事件

使用 $on(eventName) 监听事件
  使用 $emit(eventName) 触发事件

展开阅读全文

没有更多推荐了,返回首页