Vue2中的各種自定義元件
阿新 • • 發佈：2018-12-30
複製到頁面看下效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script> --> <script src="https://unpkg.com/vue"></script> <!-- <script type="text/javascript" src="js/vue.js"></script> --> <!-- <script type="text/javascript" src="js/vue.min.js"></script> --> <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css"> <style type="text/css"> .red{color: #f00;} </style> </head> <body> <div id="app1"> <h2>模板測試1</h2> <v-header></v-header> </div> <script type="text/javascript"> Vue.component("vHeader",{//標籤中必須要將駝峰法拆開寫。寫成<vHeader></vHeader>就不會有效果 template: "<div>這裡面是模板1的內容。</div>" }); var app1 = new Vue({ el:"#app1" }); </script> <hr> <div id="app2"> <h2>模板測試2</h2> <!-- 建立一個 to-item 元件的例項 --> <to-item></to-item> </div> <div id="app22"> <h2>模板測試2-----</h2> <!-- 建立一個 to-item 元件的例項 可以多次呼叫 但必須例項化--> <to-item></to-item> </div> <script type="text/javascript"> Vue.component("to-item",{ //"to-item"寫成"toItem"駝峰寫法也行。但呼叫模板的時候不能用駝峰。 template: "<strong class='red'>這裡是模板2內容的。</strong>" }); //定義模板後，必須例項化，不然是不顯示的，找不到Vue中的模板方法。 var app2 = new Vue({ el: "#app2" }); var app22 = new Vue({ el: "#app22" }); </script> <hr> <div id="app3"> <h2>這裡是模板測試3</h2> <ul> <other-item v-for="todo in list" :item = "todo" :key="todo.id" :id="todo.id"></other-item> </ul> </div> <script type="text/javascript"> Vue.component("other-item",{ props: ["item"], template: "<li>{{item.title}}</li>" }); var app3 = new Vue({ el: "#app3", data:{ list:[ {id: 0,title: "文字1"}, {id: 1,title: "文字2"}, {id: 2,title: "文字3"} ] } }); </script> <hr /> <div id="app4"> <h2>全域性模板4</h2> <global-component></global-component><!-- 使用自定義標籤在 Vue.js 模板中插入元件，編譯時，這部分內容會被替換為元件的內容 --> </div> <div id="app5"> <h2>全域性模板4-------在全域性元件定義之後呼叫</h2> <!-- 這裡也插入了這個元件，全域性註冊的元件可以在所有晚於該元件註冊語句構造的 Vue 例項中使用 --> <global-component></global-component> </div> <template id="global-template"> <!-- 這個模板裡面只能有一個跟目錄 --><!-- 此 DOM 元素的 innerHTML 作為全域性註冊元件的模板 --> <div> <h4>這裡面是全域性定義的元件模板內容</h4> <div>{{msg}}</div><!-- 和普通 Vue.js 模板一樣，可以進行插值 --> <input type="text" v-model="msg" /><!-- 和普通 Vue.js 模板一樣，也可以進行表單資料繫結 --> </div> </template> <script type="text/javascript"> Vue.component("global-component",{ // Vue.component("globalComponent",{ //globalComponent駝峰寫法也行，但引用的時候不行。 使用語法糖（只使用擴充套件例項選項）全域性註冊元件 data: function(){ //Vue 擴充套件例項構造器的 data 選項，必須是一個工廠函式，返回資料物件 return { msg: "輸入內容看看會有什麼變化。" } }, template: "#global-template" //template 是模板，可以是包含 HTML 程式碼的字串，也可以是 # + id，如果是 # + id，則會使用該選擇子匹配的 DOM 元素的 innerHTML 作為模板 }); //在定義模板之後例項化，才有效 var app4 = new Vue({ el: "#app4" }); var app5 = new Vue({ el: "#app5" }); </script> <hr /> <div id="d"> <div>1</div> <v-h></v-h> </div> <div id="dd"> <div>2</div> <v-h></v-h> </div> <template id="tem"> <div> <i>11</i> {{msg}} <input type="text" v-model="msg" /> </div> </template> <script type="text/javascript"> Vue.component("vH",{ data: function(){ return { msg: "hello word." } }, template: "#tem" // template: "<h6>888</h6>" }) new Vue({ el: "#d" }); new Vue({ el: "#dd" }); </script> <hr /> </body> </html>