沒有搭建腳手架時vue元件的使用
阿新 • • 發佈：2018-12-15
沒有搭建腳手架時vue元件的使用
- 全域性元件
//全域性元件 第一種聲名方式 var s = Vue.extend({ template: "<h6>全域性元件 第一種聲名方式</h6>" }) Vue.component("hello", s); //前臺標籤呼叫 <hello></hello> //全域性元件 第二種宣告方式 Vue.component("k", { template: "<h6>全域性元件 第二種宣告方式</h6>" }); //前臺標籤呼叫 <k></k> -
區域性元件
components: { //區域性元件，宣告方式1 zujian1: { template: "<h6>區域性元件，宣告方式</h6>" //因為宣告的是字串直接呼叫 <zujian1></zujian1> }, //區域性元件，宣告方式2 zujian2: { template: "#zujian2", data() { return { msg: "元件2的值" } } }, } //第二種呼叫方式 //因為宣告的不是字串所以不能直接使用 需要通過標籤<template id="zujian2"></template> 標籤之間必須要用html標籤 如<template id="zujian2"><div>{{msg}}</div></template> 不能沒有html標籤就直接呼叫 <head> <template id="zujian2"> //此處要加上元件的id <p>{{msg}}</p> </template> <body> <!--頁面容器--> <div id="my" class="container" v-cloak> <div class="container"> <hello></hello> <k></k> <zujian1></zujian1> <zujian2></zujian2> /*為空的時候不能使用，必須要用到模板*/ </div> </div> </body> </head>