vue 2.0 开发实践总结之疑难篇

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

本篇文章目录如下：

1.  vue 组件的说明和使用

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

3.  开发实践总结

1.  vue 组件的说明和使用

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

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

1.  默认导出（不用命名）

JavaScript

1 2 3 4 5 6 7

export default {    data ( ) {      return {        msg : 'header'      }    } }

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

在父组件中导入

1	import Header from './components/header'

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

1	export const sqrt = Math . sqrt ;

在父组件中导入

1	import sqrt from './components/header' ;

引用一个组件  

1	import Header from './components/header'

在该组件中定义

1 2 3 4 5 6

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

在template中使用

1 2 3 4 5

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

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

1 2 3 4 5

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

2. vuex

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

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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状态

JavaScript

1 2 3 4 5 6 7 8 9 10 11

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 中 控制是否显示

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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代码

1 2 3 4 5 6 7 8 9 10

< 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： 详情页面

JavaScript

1 2 3 4 5 6 7 8 9 10 11

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（监测变化）  对象

JavaScript

1 2 3 4 5 6 7

export default {    watch : {      '$route' ( to , from ) {        // 对路由变化作出响应...      }    } }

2.判断是否登陆

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

JavaScript

1 2 3 4 5 6 7 8 9

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对象

1	ref = "isSubmit" @ click = "register" value = "立即注册" class = "button" / >

1	this . $ refs . isSubmit . removeAttribute ( 'disabled' )    //使用this.$refs 获取当前dom

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

完整的源码   https://github.com/beidan/photoShare

转载：http://web.jobbole.com/89337/