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

来源：互联网发布：南研所网络产品线编辑：程序博客网时间：2024/05/21 17:56

续上一篇文章：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
importHeaderfrom'./components/header'

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

1
export const sqrt = Math.sqrt;

在父组件中导入

1
importsqrtfrom'./components/header';

引用一个组件

1
import Header from './components/header'

在该组件中定义

1
2
3
4
5
6
exportdefault{
  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
conststore=newVuex.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>
  <divclass="header">
    <divv-show="isShowSearch"></div>
    <divclass="title"v-show="!isShowSearch">
      <av-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
exportdefault{
  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/

0 0

南研所网络产品线

原创粉丝点击