vue2.0开发实践总结之疑难篇

前端之家收集整理的这篇文章主要介绍了vue2.0开发实践总结之疑难篇前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上一篇文章 ,如果没有看过的可以移步看一下。

本篇文章目录如下:

1. vue 组件的说明和使用

2. vuex在实际开发中的使用

3. 开发实践总结

1. vue 组件的说明和使用

一个组件实质上是一个拥有

1. 默认导出(不用命名)

以上代码实际上会自动生成一个

在父组件中导入

2.直接在任何变量或者函数前面加上一个关键字

在父组件中导入

在该组件中定义

在template中使用

//注意,html不区分大小写,所以需要将 comHeader 写成 com-header

一个vue对象通常包括下面几个属性

2. vuex

通过尤大大这张图,我们很清楚的看到,所有的数据流都是单向的,并且actions只能通过分发mutations来修改 store 实例的状态

像一些全局信息通用,比如 header内容的渲染,是否显示,loading 什么时候显示,什么时候隐藏,以及接口api的固定值,都写在store记录组件的state。

在mutations中改变state状态

{ state.comm.loading = status },//修改header的信息 changeIndexConf: (state,data) => { Object.assign(state.comm.indexConf,data) } })

e.g 在 header.vue 中 控制是否显示

template代码

{{title}}

@H_404_5@

在其他地方控制 header 是否显示, e.g: 详情页面

3.开发实践总结

1. vue-router

由于整个项目list组件很多地方公用,并且‘我的收藏',‘搜索结果页面',‘我的圈子',仅仅只是从 /search/own 到 /search/star 此时,原来的组件实例会被复用,意味着组件的生命周期钩子不会再被调用 解决方法: 复用组件时,想对路由参数的变化作出响应的话,可以简单地 watch(监测变化) 对象

2.判断是否登陆

进入个人信息页面,由于需要判断是否已登陆,此时由 router 进行一个拦截,具体代码如下

3.常用api

1). 点击事件获取当前对象

event.target ,this为vue 对象

2). 和jquery类似获取当前dom对象

代码如下:
注册" class="button"/> this.$refs.isSubmit.removeAttribute('disabled') //使用this.$refs 获取当前dom

其他常见的api 可移步

如果在阅读中有发现任何错误或者有更好的建议,请联系我,谢谢!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/43826.html

猜你在找的Vue相关文章