续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下。

本篇文章目录如下:

1.  vue 组件的说明和使用

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

3.  开发实践总结

1.  vue 组件的说明和使用

一个组件实质上是一个拥有预定义选项的一个 Vue 实例

在header组件内部允许外部使用,需要导出属性,有2种导出方法

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

1 export default {
2 data () {
3 return {
4 msg: 'header'
5 }
6 }
7 }

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

在父组件中导入

 import Header from './components/header'

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

 export const sqrt = Math.sqrt;

在父组件中导入

 import sqrt from './components/header';

引用一个组件  

import Header from './components/header'

在该组件中定义

  export default{
data: function () {}, //data一定要是返回一个函数
components: {
comHeader: Header //声明组件
}
}

在template中使用

 <template>
<div class="com-app">
<com-header></com-header> //注意,html不区分大小写,所以需要将 comHeader 写成 com-header
</div>
</template>

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

 data:      //vue对象的数据
methods: //vue对象的方法
watch: //对象监听的方法
computed: //计算逻辑放到computed中
created: //属性已绑定,dom未生成,一般在这里进行ajax处理以及页面初始化处理

2. vuex

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

像一些全局信息通用,比如 header内容的渲染,是否显示,loading 什么时候显示,什么时候隐藏,以及接口api的固定值,都写在store记录组件的state。
 const store = new Vuex.Store({
state: {
comm: {
loading: false, //是否显示loading
apiUrl: 'http://www.sherlochao.com:9091/photosharing/', //接口base url
imgUrl: 'http://www.sherlochao.com:9091/filebase', //图片base url
indexConf: {
isFooter: true, // 是否显示底部
isSearch: true, // 是否显示搜索
isBack: false, // 是否显示返回
isShare: false, // 是否显示分享
title: '' // 标题
}
}
}
})

在mutations中改变state状态

 const store = new Vuex.Store({
mutations: {
//loading的显示
isLoading: (state, status) => {
state.comm.loading = status
},
//修改header的信息
changeIndexConf: (state, data) => {
Object.assign(state.comm.indexConf, data)
}
})

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

 export default {
data: function () {
return {}
},
computed: {
isShowSearch: function () {
return this.$store.state.comm.indexConf.isSearch //获取vuex里面 state 状态值
},
title: function () {
return this.$store.state.comm.indexConf.title
},
isBack: function () {
return this.$store.state.comm.indexConf.isBack
}
}
}

template代码

 <template>
<div class="header">
<div v-show="isShowSearch"></div>
<div class="title" v-show="!isShowSearch">
<a v-show="isBack" class="back t-icon" @click="goBack"><span
class="iconfont icon icon-xiangzuojiantou"></span></a>
<p>{{title}}</p>
</div>
</div>
</template>

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

 export default {
created: function () {
vm.$store.commit('changeIndexConf', {
isFooter: false,
isSearch: false,
isBack: true,
isShare: true,
title: '详情页'
})
}
}

3.开发实践总结

1. vue-router

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

2.判断是否登陆

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

 router.beforeEach(function (to,from,next) {
var userMsg = localStorage.getItem('userMsg')
if(to.path === '/home'){
if(!userMsg){
next({ path: '/login' })
}
}
next()
})

3.常用api

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

event.target , this为vue 对象
 
2. 和jquery类似获取当前dom对象
 <input type="submit" disabled="canSubmit" ref="isSubmit" @click="register" value="立即注册" class="button"/>
 this.$refs.isSubmit.removeAttribute('disabled')   //使用this.$refs 获取当前dom

其他常见的api  可移步   vue2.0官方文档

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

原创文章,转发请注明来源!

源码github 地址: https://github.com/beidan/photoShare

如果有用的话,麻烦star 或者  fork ~ 

vue 2.0 开发实践总结之疑难篇的更多相关文章

  1. vue2.0 开发实践总结之入门篇

    vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...

  2. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  3. vue.js2.0开发中的几个技巧

    最近用Vue.js开发了几个项目,Vue的双向数据绑定和组件化让我耳目一新,减少了很多底层重复的工作,和基于jQuey的前端开发不起来,基于Vue的开发给我一种酣畅淋漓的感觉. 下面给出我基于Vue. ...

  4. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  5. Vue 3.0 升级指南

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 2020年9月18日Vue 3.0正式发布,距离2016年10月1日Vue ...

  6. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  7. vue.js 2.0开发(3)

    组件化 Vue.component('todo-items',{ }); 定义组件,首先是标签的名字todo-items,然后里面还要配置一些选项,首先是我们的模板template,里面需要填入的内容 ...

  8. vue.js 2.0开发(2)

    如果我们想实时的显示我们todos的长度这个业务逻辑可以这样: <h1>{{message}} ({{todos.length}})</h1> 直接展示todos的length ...

  9. vue.js 2.0开发

    创建一个工程文件: css中引用的是bootstrap的css,js中就是vue,index页面: <!DOCTYPE html> <html> <head> &l ...

随机推荐

  1. 中文分词工具探析(一):ICTCLAS (NLPIR)

    1. 前言 ICTCLAS是张华平在2000年推出的中文分词系统,于2009年更名为NLPIR.ICTCLAS是中文分词界元老级工具了,作者开放出了free版本的源代码(1.0整理版本在此). 作者在 ...

  2. WCF备忘录一:服务端实例的生命周期

    示例代码下载地址:WCFDemo1Day 概述 客户端向WCF服务发出请求后,服务端会实例化一个Service对象(实现了契约接口的对象)用来处理请求,实例化Service对象以及维护其生命周期的方式 ...

  3. WinForm操作隐藏的小知识点

    这次的项目需要使用Winform来实现,我们使用的是CSkin的皮肤.文章主要记录使用过程中遇到的小问题,也是楼主网上查找很久才找到的,这里总结下. 插件地址: 使用SKinDataGridView出 ...

  4. 2011奥斯卡最佳纪录片《监守自盗(Inside Job)》小结

    影片探讨了2008年金融危机产生的原因. 美国忽略1933年的旧法律,立新法,以放松金融监管. 投资银行被允许更高的杠杆率,33:1,也就是说,投资物跌价3%就会导致破产. 投资银行放贷,但是转手将贷 ...

  5. ASP.NET Core服务器综述

    原文地址:Servers overview for ASP.NET Core By Tom Dykstra, Steve Smith, Stephen Halter, and Chris Ross A ...

  6. C#开发微信门户及应用(7)-微信多客服功能及开发集成

    最近一直在弄微信的集成功能开发,发现微信给认证账户开通了一个多客服的功能,对于客户的咨询,可以切换至客服处理的方式,而且可以添加多个客服进行处理,这个在客户咨询比较多的时候,是一个不错的营销功能.微信 ...

  7. C#开发微信门户及应用(2)--微信消息的处理和应答

    微信应用如火如荼,很多公司都希望搭上信息快车,这个是一个商机,也是一个技术的方向,因此,有空研究下.学习下微信的相关开发,也就成为计划的安排事情之一了.本系列文章希望从一个循序渐进的角度上,全面介绍微 ...

  8. Threejs中的材质贴图

    最近项目需要折腾three.js,有关three.js几点说明 1.作用 threejs适合创建简单的模型视图 2.对于复杂的模型图(如:室内模型图)需要美术3D制作,前端导成特定格式文件(如*.mt ...

  9. angularjs中的filter(过滤器)——格式化日期的date

    date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串. 格式化字符串的基本参数: 'yyyy': 用4位数字表示年(例如:AD 1 => 0001, AD 2010 => 20 ...

  10. ArcGIS Engine开发之地图基本操作(1)

    ArcGIS提供的各类数据形式以及相应接口 1. 空间数据 在GIS软件中,空间数据有多种不同的形式存在.按照不同的划分标准可以分为矢量数据和栅格数据.GIS格式数据和非GIS格式数据(CAD格式). ...