引子
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中引入，豈不是很方便，很強大。
不過遺憾的是我暫時還不知道這個該如何實現。:(
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
