中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么用模塊化的方式寫vuejs

發布時間:2021-02-19 14:08:51 來源:億速云 閱讀:144 作者:小新 欄目:web開發

小編給大家分享一下怎么用模塊化的方式寫vuejs,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

引子

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

文件結構

 <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標簽,比如一個div。

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">
    <div></div>
  </template>
  <template v-else>
   <div></div>
  </template>
</template>

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

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

flux

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

如果暫時不想引入別的lib,可以嘗試自己實現一個,其實非常簡單。準備一個 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})
    }
  }
}

所有視圖的數據都來自 state。所有修改必須通過actions來完成。 因為在子組件中對數據的修改并不會影響到父組件,所以可以放心的使用 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中引入,豈不是很方便,很強大。

以上是“怎么用模塊化的方式寫vuejs”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

丹江口市| 重庆市| 商南县| 德令哈市| 肇源县| 沭阳县| 滦平县| 涟水县| 额济纳旗| 临沂市| 肇源县| 尼勒克县| 马尔康县| 建宁县| 甘泉县| 东阿县| 长子县| 文昌市| 苏尼特右旗| 平武县| 尚志市| 永胜县| 阿克苏市| 吉安市| 常德市| 库车县| 嘉定区| 汤阴县| 林州市| 吉安县| 南昌县| 安泽县| 庐江县| 丰镇市| 昌黎县| 岳普湖县| 秦安县| 长治市| 贵定县| 安仁县| 土默特左旗|