Vue.js组件基础与实战应用.pdfVIP

day03

组件

组件(Component)是Vue.js最强大的功能之一

组件可以扩展HTML元素，封装可重用的代

组件

全局

Vponent(组件名称,{})第1个参数是名称，第2个参数是一个选项对象

全局组件后，任何vue实例都可以用

组件基础用

!--2、组件使用组件名称是以HTML的形式使用--

my-component/my-component

//组件

Vue.component(my-component,{

组件注意事项

组件参数的data值必须是函数同时这个函数要求返回一个对象

组件模板必须是单个根元素

组件模板的内容可以是模板字符串

!--

4、组件可以重复使用多次

--

button-counter/button-counter

button-counter/button-counter

button-counter/button-counter

!--8、必须使用短横线的方式使用组件--

hello-world/hello-world

/div

scripttypetext/javascript

//5如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，

//7、但是在普通的模板中，必须使用短横线的方式使用组件

Vue.component(HelloWorld,{

data:

function(){return

{

msg:HelloWorld

}

},

temte:div{{msg}}/div

});

Vue.component(button-counter,{

//1、组件参数的data值必须是函数

//同时这个函数要求返回一个对象

data:

function(){return

{

count:0

}

},

//2、组件模板必须是单个根元素

//3、组件模板的内容可以是模板字符串

temte:`

div

button@click=handle点击了{{count}}次/button

button测试123/button

#6在字符串模板中可以使用驼峰的方式使用组件

HelloWorld/HelloWorld

/div

`,

methods:{

handle:

function(){this.

count+=2;

}

}

})

varvmnew

Vue({el:

#app,data:{

}

});

/script