處理邊界情況之X-template
點擊打開視頻講解更加詳細
另一個定義模板的方式是在一個<script>元素中，并為其帶上 text/x-template 的型別，然后通過一個 id 將模板參考過去，例如：
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
x-template 需要定義在 Vue 所屬的 DOM 元素外，
這些可以用于模板特別大的 demo 或極小型的應用，但是其它情況下請避免使用，因為這會將模板和該組件的其它定義分離開，
完整案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>末晨曦吖</title>
</head>
<body>
<div id="app">
<hello-world></hello-world>
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
</div>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
var app = new Vue({
el:'#app'
})
</script>
</body>
<style scoped>
body{
padding: 0;
margin: 0;
}
</style>
</html>
若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502663.html
標籤：其他