VUE的模板分离写法。
1、第一种(不常用)
<script type="text/x-template" id="myCpm">
<div>
<h2>模板分离的写法</h2>
</div>
</script>
2、第二种
<template id="myCpm2">
<div>
<h2>模板分离的写法</h2>
</div>
</template>
****完整代码*****
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<cpn></cpn>
<cpn2></cpn2>
</div>
<body>
<!-- 第一种 -->
<script type="text/x-template" id="myCpm">
<div>
<h2>模板分离的写法</h2>
</div>
</script>
<!-- 第二种 -->
<template id="myCpm2">
<div>
<h2>模板分离的写法</h2>
</div>
</template>
<script>
Vue.component('cpn', { template: '#myCpm' })
// 第一种注册全局组件
let vm = new Vue({
el: '#app',
data: () => ({}),
components: {
'cpn2': { template: '#myCpm2' }
}
// 第二种注册局部组件
})
</script>
</body>
</html>