模塊化開發與vue組件
阿新 • • 發佈:2018-07-24
depend abc class package pan pen web 開頭 init
var $=require("jquery") // 引入官網的模塊
var asd=require("./dd.js") // 引入當前文件下的dd.js文件
var quan=require("./ff") //沒有package.json文件 默認入口文件index.js
模塊化開發是保證每個文件都是獨立的模塊,不受外界幹擾,提高性能,便於後期維護與團隊開發。
可以引入官網的模塊,也可以自定義模塊。
使用require()引入需要使用的模塊,自定義的模塊在使用之前需要通過module.exports 暴露出去。
通過npm init -y 下載package.json文件管理維護模塊,其中 main 為入口文件 ,dependencies 指定項目開發與上線需要的模塊 ,devdependeciens 指定項目開發中需要而上線時不需要的模塊。
var as=require("aa") // 自定義的模塊,放在node_modules文件夾下入口文件為aa.js
var $=require("jquery") // 引入官網的模塊
var asd=require("./dd.js") // 引入當前文件下的dd.js文件
var quan=require("./ff") //沒有package.json文件 默認入口文件index.js
vue 組件化開發
每個組件都自己的模塊,組件與模塊之間用id關聯,每個模塊只能有一個頂層標簽,組件名必須大寫開頭,不能使用h5標簽來命名,組件的data是個函數,每個組件下面的數據只能在它自己對應的模塊下使用。如果需要使用此組件,需要將其註冊到需要使用的父組件下(components),以標簽的形式調用,且可以重復使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <heads></heads><!-- 標簽形式調用 可以重復使用 --> <heads></heads> </div> </body> </html> <template id="tem1"> <div> <!--模板只能有一個頂層標簽--> <p>{{cont}}</p> <!--組件的數據寫在模板裏--> <mains></mains> </div> </template> <template id="tem2"> <div> <h3>{{info}}</h3> </div> </template> <script> let Mains = { //子組件必須寫在父組件前面 template:"#tem2", data:function(){ return{ info:"abc" } } }; let Heads = { //組件名 大寫開頭 不能使用h5標簽 template:"#tem1", //模板和組件通過id關聯 data:function(){ //組件的data是個函數 return{ cont:"12345" } }, components:{ //註冊組件 mains:Mains } }; let app = new Vue({ el:"#app", data:{ msg:"web" }, components:{ //註冊組件 heads:Heads } }); </script>
模塊化開發與vue組件