计算机网络/计算机科学与应用/系统/运维/开发

组件化模板抽离


<!DOCTYPE html>

<html>

<head>

<title>父子组件</title>

<meta charset="utf-8">

</head>

<body>

<div id="app">

<cpn></cpn>

</div>

<!-- 1、script标签  -->

<!-- <script type="text/x-template" id="cpn">

<div>

<h2>我是标题2</h2>

<p>我是内容2</p>

</div>

</script> -->


<!-- 2、template标签 -->

<template id="cpn">

<div>

<h2>我是标题2</h2>

<p>我是内容2</p>

</div>

</template>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

// 注册一个全局组件

Vue.component('cpn', {

template:'#cpn'

})


// root组件

let app = new Vue({

el:"#app",

data:{

}

})

</script>

</body>

</html>


顺,不妄喜;逆,不惶馁;安,不奢逸;危,不惊惧。--史记

评论

^