template(标签模板)
生活随笔
收集整理的這篇文章主要介紹了
template(标签模板)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
template(標(biāo)簽?zāi)０?
作用:將組件的模板內(nèi)容通過標(biāo)簽?zāi)０宓男问秸故境鰜?其目的為了書寫簡(jiǎn)便.
<!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><!-- 標(biāo)簽?zāi)０?--><template id="one"><div><h1>one組件</h1><div>王運(yùn)舵</div></div></template><!-- 標(biāo)簽?zāi)０?--><template id="two"><h1>two組件</h1></template><script>// 實(shí)例化vuenew Vue({el:'#app',data:{},methods:{},// 局部組件components:{vOne:{template:'#one'},vTwo:{template:'#two'}}})</script> </body> </html>定義的任何一個(gè)組件是一個(gè)VueComponent實(shí)例
<!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><!-- 標(biāo)簽?zāi)０?--><template id="one"><div class="one"><h1>one組件</h1><div>王運(yùn)舵</div></div></template><!-- 標(biāo)簽?zāi)０?--><template id="two"><div class="two"><h1>two組件</h1></div></template><script>// 實(shí)例化vuenew Vue({el:'#app',data:{},methods:{},// 局部組件components:{// 定義的任何一個(gè)組件是一個(gè)VueComponent實(shí)例vOne:{template:'#one',beforeCreate(){console.group('==one組件創(chuàng)建之前==')console.groupEnd()},created(){console.group('==one組件創(chuàng)建完成==')console.groupEnd()},beforeMount(){console.group('==one組件掛載之前==')console.groupEnd()},mounted(){console.group('==one組件掛載完成==')console.log(this);console.groupEnd()}},vTwo:{template:'#two',beforeCreate(){console.group('==two組件創(chuàng)建之前==')console.groupEnd()},created(){console.group('==two組件創(chuàng)建完成==')console.groupEnd()},beforeMount(){console.group('==two組件掛載之前==')console.groupEnd()},mounted(){console.group('==two組件掛載完成==')console.log(this);console.groupEnd()}}},beforeCreate(){console.group('==父組件創(chuàng)建之前==')console.groupEnd()},created(){console.group('==父組件創(chuàng)建完成==')console.groupEnd()},beforeMount(){console.group('==父組件掛載之前==')console.groupEnd()},mounted(){console.group('==父組件掛載完成==')console.log(this);console.groupEnd()}})</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的template(标签模板)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机备忘录中的笔记前后顺序可以调吗?
- 下一篇： 中文语音识别