Vue中抽离组件模板的几种方式

1.全局组件和局部组件的创建


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript" src="https://unpkg.com/vue">script>
	head>
	<body>
		<div id="app">
			<component-public>component-public>
		div>

		<div id="app2">
			<component-public>component-public>
		div>
	body>
html>


<script type="text/javascript">
		Vue.component('component-public', {
      
			template:`

全局组件

`
}) const app = new Vue({ el:"#app", components:{ // 局部组件 "component-private":{ template:`
账号 密码
`
} } }) const app2 = new Vue({ el:"#app2" })
script> html>

2.组件模板分离编写的方式

  1. 通过script标签创建
   	
   <script type="text/x-template" id="component-script">
   	<div>
   		通过script标签编写组件
   	</div>
   script>
  1. 通过template标签创建
	<template id="component-template">
   		<div>
   			通过template标签创建的组件
   		div>
   	template>

你可能感兴趣的:(vue,vue,html,javascript)