詳解如何用模塊化的方式寫vuejs

更新時間：2017年12月16日 14:31:02 作者：六月的海

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

引子

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

文件結(jié)構(gòu)

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

template 里是模板代碼，這里一般是一個閉合的html標(biāo)簽，比如一個div。

style 里是css代碼，這個代碼是作用到整個頁面的，如果只想作用到當(dāng)前的模板中，需要用scoped屬性

 <style scoped>

如果想用一些css預(yù)處理器，比如sass，只需要聲明lang，然后vue-loader就會自動的加載，當(dāng)然，前提是對應(yīng)的 sass-loader安裝好。

 <style lang="sass">

script 注意這里使用的是 es6 的代碼，我是使用babel來編譯，所以理所當(dāng)然需要安裝 babel，es6的preset，還要在根目錄下自建 .babelrc 文件。具體可以參考我的 ac 或者用官方的 vue-cli 來初始化項目。

template 做不可見標(biāo)簽

template不僅是模板最外面的標(biāo)簽，同時，它也可以作為一個普通的標(biāo)簽使用。比如，當(dāng)我們需要用 v-if 來控制部分區(qū)域的顯示與隱藏時，就可以這樣。

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

而且，template是不會被渲染的，所以不會影響最終的dom結(jié)構(gòu)。

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

flux

實際開發(fā)的時候，會發(fā)現(xiàn)原始的數(shù)據(jù)管理模式比較混亂，很難區(qū)分哪些是臨時數(shù)據(jù)，持久數(shù)據(jù)，用戶數(shù)據(jù)，后臺數(shù)據(jù)，這個時候，引入 flux是再合適不過了。

如果暫時不想引入別的lib，可以嘗試自己實現(xiàn)一個，其實非常簡單。準(zhǔn)備一個 store.js

 let trim = str => {
 return str.replace(/(^[\s\t]+)|([\s\t]+$)/g, '');
}
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 + '', valid: false })

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

所有視圖的數(shù)據(jù)都來自 state。所有修改必須通過actions來完成。因為在子組件中對數(shù)據(jù)的修改并不會影響到父組件，所以可以放心的使用 vuejs 的雙向綁定特性。

然后可以在app的根組件下引入 state和actions，然后按需要傳遞給子組件

import { state, actions } from '../store' 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中引入，豈不是很方便，很強大。

不過遺憾的是我暫時還不知道這個該如何實現(xiàn)。:(

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

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

詳解如何用模塊化的方式寫vuejs

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

詳解如何用模塊化的方式寫vuejs

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕