template(标签模板)
生活随笔
收集整理的這篇文章主要介紹了
template(标签模板)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
template(標簽模板)
作用:將組件的模板內容通過標簽模板的形式展示出來,其目的為了書寫簡便.
<!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>Document</title><!-- 引入vue.js --><script src="./vue.js"></script> </head> <body><!-- 作用域 --><div id="app"><v-one></v-one><v-two></v-two></div><!-- 標簽模板 --><template id="one"><div><h1>one組件</h1><div>王運舵</div></div></template><!-- 標簽模板 --><template id="two"><h1>two組件</h1></template><script>// 實例化vuenew Vue({el:'#app',data:{},methods:{},// 局部組件components:{vOne:{template:'#one'},vTwo:{template:'#two'}}})</script> </body> </html>定義的任何一個組件是一個VueComponent實例
<!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>Document</title><!-- 引入vue.js --><script src="./vue.js"></script> </head> <body><!-- 作用域 --><div id="app"><v-one></v-one><v-two></v-two></div><!-- 標簽模板 --><template id="one"><div class="one"><h1>one組件</h1><div>王運舵</div></div></template><!-- 標簽模板 --><template id="two"><div class="two"><h1>two組件</h1></div></template><script>// 實例化vuenew Vue({el:'#app',data:{},methods:{},// 局部組件components:{// 定義的任何一個組件是一個VueComponent實例vOne:{template:'#one',beforeCreate(){console.group('==one組件創建之前==')console.groupEnd()},created(){console.group('==one組件創建完成==')console.groupEnd()},beforeMount(){console.group('==one組件掛載之前==')console.groupEnd()},mounted(){console.group('==one組件掛載完成==')console.log(this);console.groupEnd()}},vTwo:{template:'#two',beforeCreate(){console.group('==two組件創建之前==')console.groupEnd()},created(){console.group('==two組件創建完成==')console.groupEnd()},beforeMount(){console.group('==two組件掛載之前==')console.groupEnd()},mounted(){console.group('==two組件掛載完成==')console.log(this);console.groupEnd()}}},beforeCreate(){console.group('==父組件創建之前==')console.groupEnd()},created(){console.group('==父組件創建完成==')console.groupEnd()},beforeMount(){console.group('==父組件掛載之前==')console.groupEnd()},mounted(){console.group('==父組件掛載完成==')console.log(this);console.groupEnd()}})</script> </body> </html>總結
以上是生活随笔為你收集整理的template(标签模板)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机备忘录中的笔记前后顺序可以调吗?
- 下一篇： 中文语音识别