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

詳解VUE 定義全局變量的幾種實現(xiàn)方式

 更新時間:2017年06月01日 09:58:41   作者:程序仲小仲  
本篇文章主要介紹了VUE 全局變量的幾種實現(xiàn)方式,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

最近在學習VUE.js 中間涉及到JS全局變量,與其說是VUE的全局變量,不如說是模塊化JS開發(fā)的全局變量。

1、全局變量專用模塊

就是以一個特定模塊來組織管理這些全局量,需要引用的地方導入該模塊便好。

全局變量專用模塊 Global.vue

<script type="text/javascript">
const colorList = [
 '#F9F900',
 '#6FB7B7',
 '#9999CC',
 '#B766AD',
 '#B87070',
 '#FF8F59',
 '#FFAF60',
 '#FFDC35',
 '#FFFF37',
 '#B7FF4A',
 '#28FF28',
 '#1AFD9C',
 '#00FFFF',
 '#2894FF',
 '#6A6AFF',
 '#BE77FF',
 '#FF77FF',
 '#FF79BC',
 '#FF2D2D',
 '#ADADAD'
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}
</script>

模塊里的變量用export 暴露出去,當其它地方需要使用時,引入模塊global便可。

需要使用全局變量的模塊 html5.vue

<template>
 <ul>
  <template v-for="item in mainList">
   <div class="projectItem" :style="'box-shadow:1px 1px 10px '+ getColor()">
     <router-link :to="'project/'+item.id">
      ![](item.img)
      <span>{{item.title}}</span>
     </router-link>
   </div>
  </template>
 </ul>
</template>
<script type="text/javascript">
import global_ from 'components/tool/Global'
export default {
 data () {
  return {
   getColor: global_.getRandColor,
   mainList: [
    {
     id: 1,
     img: require('../../assets/rankIcon.png'),
     title: '登錄界面'
    },
    {
     id: 2,
     img: require('../../assets/rankIndex.png'),
     title: '主頁'
    }
   ]
  }
 }
}
</script>
<style scoped type="text/css">
.projectItem
{
 margin: 5px;
 width: 200px;
 height: 120px;
 /*border:1px soild;*/
 box-shadow: 1px 1px 10px;
}
.projectItem a
{
 min-width: 200px;
}
.projectItem a span
{
 text-align: center;
 display: block;
}
</style>

2、全局變量模塊掛載到Vue.prototype 里。

Global.js同上,在程序入口的main.js里加下面代碼

import global_ from './components/tool/Global'
Vue.prototype.GLOBAL = global_

掛載之后,在需要引用全局量的模塊處,不需再導入全局量模塊,直接用this就可以引用了,如下:

<script type="text/javascript">
export default {
 data () {
  return {
   getColor: this.GLOBAL.getRandColor,
   mainList: [
    {
     id: 1,
     img: require('../../assets/rankIcon.png'),
     title: '登錄界面'
    },
    {
     id: 2,
     img: require('../../assets/rankIndex.png'),
     title: '主頁'
    }
   ]
  }
 }
}
</script>

3、使用VUEX

Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)。因此可以存放著全局量。因Vuex有點繁瑣,有點殺雞用牛刀的感覺。認為并沒有必要。

鏈接:vuex官方介紹

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

相關文章

  • Vue2.0實現(xiàn)購物車功能

    Vue2.0實現(xiàn)購物車功能

    這篇文章主要為大家詳細介紹了Vue2.0實現(xiàn)購物車功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • uni-app中vue3表單校驗失敗的問題及解決方法

    uni-app中vue3表單校驗失敗的問題及解決方法

    最近遇到這樣的問題在app中使用uni-forms表單,并添加校驗規(guī)則,問題是即使輸入內(nèi)容,表單校驗依然失敗,本文給大家分享uni-app中vue3表單校驗失敗的問題及解決方法,感興趣的朋友一起看看吧
    2023-12-12
  • VUE實現(xiàn)表單元素雙向綁定(總結)

    VUE實現(xiàn)表單元素雙向綁定(總結)

    本篇文章主要介紹了VUE實現(xiàn)表單元素雙向綁定(總結) ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Vue在外部配置打包文件夾名稱和url地址前綴

    Vue在外部配置打包文件夾名稱和url地址前綴

    本文主要介紹了Vue在外部配置打包文件夾名稱和url地址前綴,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-06-06
  • vue移動端判斷手指在屏幕滑動方向

    vue移動端判斷手指在屏幕滑動方向

    這篇文章主要為大家詳細介紹了vue移動端判斷手指在屏幕滑動方向,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • vue如何使用bable將es6轉譯為es5

    vue如何使用bable將es6轉譯為es5

    這篇文章主要介紹了vue如何使用bable將es6轉譯為es5問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • Vue+elementUI下拉框自定義顏色選擇器方式

    Vue+elementUI下拉框自定義顏色選擇器方式

    這篇文章主要介紹了Vue+elementUI下拉框自定義顏色選擇器方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • vue登錄注冊及token驗證實現(xiàn)代碼

    vue登錄注冊及token驗證實現(xiàn)代碼

    在vue單頁中,我們可以通過監(jiān)控route對象,從中匹配信息去決定是否驗證token,然后定義后續(xù)行為。下面通過實例代碼給大家分享vue登錄注冊及token驗證功能,需要的朋友參考下吧
    2017-12-12
  • Vue中組件遞歸及使用問題

    Vue中組件遞歸及使用問題

    這篇文章主要介紹了Vue中組件的遞歸和使用問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-03-03
  • vue3.x ref()語法糖賦值方式

    vue3.x ref()語法糖賦值方式

    這篇文章主要介紹了vue3.x ref()語法糖賦值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論