没有搭建脚手架时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>