Vue全家桶实战03_【从入门到放弃系列】
生活随笔
收集整理的這篇文章主要介紹了
Vue全家桶实战03_【从入门到放弃系列】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
組件圖示?
Demo實例
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>組件的創建</title> </head> <body><div id="app"></div><script type="text/javascript" src="node_modules/vue/dist/vue.js"></script><script type="text/javascript">//局部入口組件的聲明var App={data(){return{}},template:`<div>我是入口組件</div>`}new Vue({el:"#app",data(){return{}},//掛載子組件components:{App},//父組件直接可以使用template:`<App></App>`});</script></body> </html>結果展示
局部組件? 即：聲明，掛載，使用
? ? ?
組件開發流程圖示
?
Demo演示
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>組件的使用</title> </head> <body><div id="app"></div><script type="text/javascript" src="node_modules/vue/dist/vue.js"></script><script type="text/javascript">//全局組件//第一個參數是組件的名字，第二個參數是optionsVue.component('Vbtn',{template:`<button type="">按鈕</button>`});var Vheader = {template:`<div>我是頭部組件<Vbtn /></div>`};var Vaside = {template:`<div>我是Vue<Vbtn /></div>`};var Vcontent = {template:`<div>我是GeorgeDage<Vbtn /></div>`};//1.聲明var App={template:`<div><Vheader /><Vaside /><Vcontent /></div>`,components:{Vheader,Vaside,Vcontent}};new Vue({el:"#app",data(){return{}},//2.掛載components:{App},//3.使用template:`<App></App>`});</script></body> </html>結果展示：
總結
以上是生活随笔為你收集整理的Vue全家桶实战03_【从入门到放弃系列】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何提升springboot服务吞吐量
- 下一篇： 你不知道的127.0.0.1和0.0.0