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>