模块化开发与vue组件

最新推荐文章于 2022-09-05 21:27:48 发布

weixin_30460489

最新推荐文章于 2022-09-05 21:27:48 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guiyh/p/9357265.html

博客介绍了模块化开发，其能保证文件独立，提高性能、便于维护与团队开发，可引入官网或自定义模块，用require()引入，通过npm init -y管理。还提及Vue组件化开发，组件有自己模块，用id关联，使用时需注册到父组件下，可重复使用。

模块化开发是保证每个文件都是独立的模块，不受外界干扰，提高性能，便于后期维护与团队开发。
可以引入官网的模块，也可以自定义模块。

使用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>

转载于:https://www.cnblogs.com/guiyh/p/9357265.html