欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2.0開發(fā)實踐總結(jié)之疑難篇

 更新時間：2016年12月07日 08:37:01   作者：beidan  
這篇文章主要為大家總結(jié)了vue2.0開發(fā)實踐的疑難,具有一定的參考價值，感興趣的小伙伴們可以參考一下

續(xù)上一篇文章：vue2.0 開發(fā)實踐總結(jié)之入門篇 ，如果沒有看過的可以移步看一下。 

本篇文章目錄如下：

1.  vue 組件的說明和使用

2.  vuex在實際開發(fā)中的使用

3.  開發(fā)實踐總結(jié) 

1.  vue 組件的說明和使用
一個組件實質(zhì)上是一個擁有預(yù)定義選項的一個 Vue 實例
在header組件內(nèi)部允許外部使用，需要導(dǎo)出屬性，有2種導(dǎo)出方法

1.  默認導(dǎo)出（不用命名）

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

以上代碼實際上會自動生成一個 new vue

在父組件中導(dǎo)入

import Header from './components/header' 

2.直接在任何變量或者函數(shù)前面加上一個關(guān)鍵字

export const sqrt = Math.sqrt;

在父組件中導(dǎo)入

import sqrt from './components/header'; 

引用一個組件 

import Header from './components/header'

在該組件中定義

export default{
 data: function () {}, //data一定要是返回一個函數(shù)
  components: {
  comHeader: Header //聲明組件
 }
 }

在template中使用

<template>
 <div class="com-app">

  <com-header></com-header> //注意，html不區(qū)分大小寫，所以需要將 comHeader 寫成 com-header 
 </div>
</template>
 

一個vue對象通常包括下面幾個屬性

data：  //vue對象的數(shù)據(jù)
methods： //vue對象的方法
watch： //對象監(jiān)聽的方法
computed： //計算邏輯放到computed中
created： //屬性已綁定，dom未生成，一般在這里進行ajax處理以及頁面初始化處理

2. vuex

 

通過尤大大這張圖，我們很清楚的看到，所有的數(shù)據(jù)流都是單向的，并且actions只能通過分發(fā)mutations來修改 store 實例的狀態(tài)

像一些全局信息通用，比如 header內(nèi)容的渲染，是否顯示，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狀態(tài)

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 狀態(tài)值
  },
  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.開發(fā)實踐總結(jié)

1. vue-router

由于整個項目list組件很多地方公用，并且‘我的收藏'，‘搜索結(jié)果頁面'，‘我的圈子'，僅僅只是從  /search/own 到 /search/star
此時，原來的組件實例會被復(fù)用，意味著組件的生命周期鉤子不會再被調(diào)用
解決方法：  復(fù)用組件時，想對路由參數(shù)的變化作出響應(yīng)的話，可以簡單地 watch（監(jiān)測變化）  對象

export default {
 watch: {
 '$route' (to, from) {
  // 對路由變化作出響應(yīng)...
 }
 }
}

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

復(fù)制代碼 代碼如下:
<input type="submit" disabled="canSubmit" ref="isSubmit" @click="register" value="立即注冊" class="button"/>
 this.$refs.isSubmit.removeAttribute('disabled')   //使用this.$refs 獲取當前dom
 

其他常見的api  可移步   vue2.0官方文檔

如果在閱讀中有發(fā)現(xiàn)任何錯誤或者有更好的建議，請聯(lián)系我，謝謝！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論