首頁  >  文章  >  web前端  >  在vuejs中使用模組化的方式開發

在vuejs中使用模組化的方式開發

亚连
亚连原創
2018-06-20 15:11:042922瀏覽

這篇文章主要介紹了詳解如何用模組化的方式寫vuejs,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

引子

vuejs 是一個入門簡單的框架,具有使用簡單,擴展方便的特點。隨著webpack的流行,vuejs也推出了自己的load,vue-loader,可以方便的打包程式碼。最近寫了一個json viewer-ac,就是完全使用vue-loader帶來的模組化特性,寫的比較開心,也得到了不少經驗。這裡記錄一下。

檔案結構

 <template>
  <p>
   <app-header></app-header>
  </p>
</template>
<style>
...
</style>
<script>
  import AppHeader from &#39;./AppHeader.vue&#39;
  export default {
   name:&#39;app&#39;,
   props:[&#39;data&#39;]
   data() {
    return {}
    },
   methods: {
    handleClick() {}
   },
   components: {
    AppHeader
   }
  }
</script>

template 裡面是模板程式碼,這裡一般是一個閉合的html標籤,例如一個p。

style 裡是css程式碼,這個程式碼是作用到整個頁面的,如果只想作用到目前的模板中,需要用scoped屬性

 <style scoped>

如果想用一些css預處理器,例如sass,只需要聲明lang,然後vue-loader就會自動的加載,當然,前提是對應的sass-loader安裝好。

 <style lang="sass">

script 注意這裡使用的是 es6 的程式碼,我是使用babel來編譯,所以理所當然需要安裝 babel,es6的preset,還要在根目錄下自建 .babelrc 檔案。具體可以參考我的 ac 或用官方的 vue-cli 來初始化項目。

template 做不可見標籤

template不僅是模板最外面的標籤,同時,它也可以作為一個普通的標籤使用。例如,當我們需要用 v-if 來控制部分區域的顯示與隱藏時,就可以這樣。

 <template>
  <template v-if="valid">
    <p></p>
  </template>
  <template v-else>
   <p></p>
  </template>
</template>

而且,template是不會被渲染的,所以不會影響最終的dom結構。

注意:v-show 不能和template 一起使用

flux

實際開發的時候,會發現原始的資料管理模式比較混亂,很難區分哪些是臨時數據,持久數據,用戶數據,後台數據,這個時候,引入flux是再合適不過了。

如果暫時不想引入別的lib,可以嘗試自己實作一個,其實非常簡單。準備一個 store.js

 let trim = str => {
 return str.replace(/(^[\s\t]+)|([\s\t]+$)/g, &#39;&#39;);
}
export const state = {
  jsons: []
}

export const actions = {
  parse(jsonStr) {
    if(!trim(jsonStr)) return

    let jsonObj = null
    try{  
      jsonObj = JSON.parse(jsonStr)
    }catch(err){
      state.jsons.push({err: jsonStr + &#39;&#39;, valid: false })

    }
    if(jsonObj){
      state.jsons.push({obj:jsonObj, valid: true})
    }
  }
}

所有視圖的資料都來自 state。所有修改必須透過actions來完成。因為在子元件中資料的修改並不會影響到父元件,所以可以放心的使用 vuejs 的雙向綁定特性。

然後可以在app的根元件下引入state和actions,然後按需要傳遞給子元件
 

import { state, actions } from &#39;../store&#39; data() {
  return {
   state,
   actions
  }
 },
<child :state="state" :handleClick="actions.update"></child>

import 公共的css

#如果將頁面常用的style變數儲存到一個公共的檔案例如common.sass

 $width: 80%;
$height: 100%;
$moli-green:#CCF3E4;
$moli-white:#f8f8f8;

然後在元件的style中引入,豈不是很方便,很強大。

不過遺憾的是我暫時還不知道這個該如何實現。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在Jstree中如何實作選取父節點時被停用的子節點也會選取

在Vue中關於過濾器filters的用法

在Javascript中自適應處理方法

#

以上是在vuejs中使用模組化的方式開發的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn