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 相关文章推荐
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
Javascript验证方法大全
Sep 21 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
浅谈JavaScript中this的指向更改
Jul 28 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
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python深入学习之上下文管理器
2014/08/31 Python
详解Python中类的定义与使用
2017/04/11 Python
Python 列表理解及使用方法
2017/10/27 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
大一自我鉴定范文
2013/10/04 职场文书
情人节活动策划方案
2014/02/27 职场文书
外贸专业求职信
2014/03/09 职场文书
电台编导求职信
2014/05/06 职场文书
经典毕业生求职信
2014/07/12 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
通用员工手册范本
2015/05/14 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
初中美术教学反思
2016/02/17 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
Python如何配置环境变量详解
2021/05/18 Python
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技