您好,登錄后才能下訂單哦!
小編給大家分享一下怎么用模塊化的方式寫vuejs,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
引子
vuejs 是一個(gè)入門簡單的框架,具有使用簡單,擴(kuò)展方便的特點(diǎn)。隨著webpack的流行,vuejs也推出了自己的load,vue-loader,可以方便的打包代碼。最近寫了一個(gè)json viewer-ac,就是完全使用vue-loader帶來的模塊化特性,寫的比較開心,也得到了不少經(jīng)驗(yàn)。這里記錄一下。
文件結(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 里是模板代碼,這里一般是一個(gè)閉合的html標(biāo)簽,比如一個(gè)div。
style 里是css代碼,這個(gè)代碼是作用到整個(gè)頁面的,如果只想作用到當(dāng)前的模板中,需要用scoped屬性
<style scoped>
如果想用一些css預(yù)處理器,比如sass,只需要聲明lang,然后vue-loader就會(huì)自動(dòng)的加載,當(dāng)然,前提是對(duì)應(yīng)的 sass-loader安裝好。
<style lang="sass">
script 注意這里使用的是 es6 的代碼,我是使用babel來編譯,所以理所當(dāng)然需要安裝 babel,es6的preset,還要在根目錄下自建 .babelrc 文件。具體可以參考我的 ac 或者用官方的 vue-cli 來初始化項(xiàng)目。
template 做不可見標(biāo)簽
template不僅是模板最外面的標(biāo)簽,同時(shí),它也可以作為一個(gè)普通的標(biāo)簽使用。比如,當(dāng)我們需要用 v-if 來控制部分區(qū)域的顯示與隱藏時(shí),就可以這樣。
<template> <template v-if="valid"> <div></div> </template> <template v-else> <div></div> </template> </template>
而且,template是不會(huì)被渲染的,所以不會(huì)影響最終的dom結(jié)構(gòu)。
注意:v-show 不能和 template 一起使用
flux
實(shí)際開發(fā)的時(shí)候,會(huì)發(fā)現(xiàn)原始的數(shù)據(jù)管理模式比較混亂,很難區(qū)分哪些是臨時(shí)數(shù)據(jù),持久數(shù)據(jù),用戶數(shù)據(jù),后臺(tái)數(shù)據(jù),這個(gè)時(shí)候,引入 flux是再合適不過了。
如果暫時(shí)不想引入別的lib,可以嘗試自己實(shí)現(xiàn)一個(gè),其實(shí)非常簡單。準(zhǔn)備一個(gè) 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來完成。 因?yàn)樵谧咏M件中對(duì)數(shù)據(jù)的修改并不會(huì)影響到父組件,所以可以放心的使用 vuejs 的雙向綁定特性。
然后可以在app的根組件下引入 state和actions,然后按需要傳遞給子組件
import { state, actions } from '../store' data() { return { state, actions } },
<child :state="state" :handleClick="actions.update"></child>
import 公共的css
如果將頁面常用的style變量存儲(chǔ)到一個(gè)公共的文件比如 common.sass
$width: 80%; $height: 100%; $moli-green:#CCF3E4; $moli-white:#f8f8f8;
然后在組件的style中引入,豈不是很方便,很強(qiáng)大。
以上是“怎么用模塊化的方式寫vuejs”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。