VUE学习（三）html引入vue.js，组件的创建和使用_htmlvue.js页面创建vue组件加载style-CSDN博客

本文链接：https://blog.csdn.net/java_xuetu/article/details/123364468

1、简单的创建和使用vue组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  {{ message }}
		  <p>
			  <my-comp></my-comp>
		  </p>
		</div>
	</body>
	<script type="text/javascript">
		// 定义一个名为 MyComp 的新组件
		var MyComp = {
		  data: function () {
			return {
			  count: 999
			}
		  },
		  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
		};
		//全局注册组件，所有的vue实列都可以使用
		// Vue.component('MyComp', MyComp);
		
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  },
		  //局部注册组件，只能当前的vue实列可以使用
		  components:{
			  MyComp:MyComp
		  }
		})
	</script>
</html>

2、对上面的组件写法的优化，这个写法结构和以后的vue开发有很大关联

index.html：注意引入的main.js，它必须要写【type="module"】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="./js/main.js" type="module"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
</html>

main.js：就是1中的index.html页面中的vue提取到一个js文件中而已，并且引入了App组件

//引入组件
import App from "./App.js";

var vm = new Vue({
	el:"#app",
	components:{
		App:App
	},
	template:'<App/>',
});

App.js：它就是一个组件，并且还引入了Products组件

//引入
import Products from "../component/Products.js";

var template = '<div><h1>测试组件</h1><Products /></div>';

//导出
export default {
	//注册组件
	components: {
	    Products:Products,
	},
	template:template,
};

Products.js：就是一个纯粹的组件

var template = '<p>这里是产品</p>';

//导出组件
export default {
	template,
}

这里的组件其实就是js文件，引入js文件用 import 。