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 相关文章推荐
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
Node在Controller层进行数据校验的过程详解
Aug 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
php笔记之常用文件操作
2010/10/12 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
如何在PHP中使用数组
2020/06/09 PHP
jQuery JSON的解析方式分享
2011/04/05 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python实现ping指定IP的示例
2018/06/04 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python气泡提示与标签的实现
2020/04/01 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
医药大学生求职简历的自我评价
2013/10/17 职场文书
保荐人的岗位职责
2013/11/19 职场文书
运动会广播稿200字
2014/01/15 职场文书
优秀实习生感言
2014/03/01 职场文书
人事任命书范文
2014/06/04 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
同意转租证明
2015/06/24 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers