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


Posted in Javascript onDecember 07, 2016

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

本篇文章目录如下:

1.  vue 组件的说明和使用

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

3.  开发实践总结 

1.  vue 组件的说明和使用
一个组件实质上是一个拥有预定义选项的一个 Vue 实例
在header组件内部允许外部使用,需要导出属性,有2种导出方法

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

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

以上代码实际上会自动生成一个 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

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

通过尤大大这张图,我们很清楚的看到,所有的数据流都是单向的,并且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官方文档

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 #Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 #Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 #Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 #Javascript
JavaScript之Vue.js【入门基础】
Dec 06 #Javascript
浅析JavaScript中作用域和作用域链
Dec 06 #Javascript
利用JS轻松实现获取表单数据
Dec 06 #Javascript
You might like
[转帖]PHP世纪万年历
2006/12/06 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
JavaScript实现表单验证功能
2020/12/09 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
python 把数据 json格式输出的实例代码
2016/10/31 Python
python字符串中的单双引
2017/02/16 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
教师岗位职责范本
2013/12/29 职场文书
物流业务员岗位职责
2014/02/08 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书