#yyds干货盘点#14.组件对象剖析
一、Vue组件对象1.Vue组件本质上是 VueComponent 对象，而VueComponent对象 是 Vue对象 的扩展类对象。
[*]Vue组件创建时可以使用任何有效的Vue对象属性和方法（如 data、methods、computed、created、……）。
var c = Vue.component('my-component',{
template: '<h3>hello world</h3>'
});
2.组件绑定的HTML结构
[*]可以直接在 template 属性中给出字符串形式，也可以使用HTML模板或Script模板形式；组件只允许有唯一一个根元素。
[*]字符串：单引号或双引号，` ` 语法（支持字符串换行）
var c = Vue.component('my-component',{
template: `
<div class="rating">
<span v-for="num in 5">
<img src="images/star.png">
</span>
</div>
`
});
[*]HTML模板：在HTML中使用<tmplate></template> 标签给出有效的HTML代码，在创建组件的 template属性中，给出上述<template>标签的id值。
<template id="rating">
<div class="rating">
<span v-for="num in 5">
<img src="images/star.png">
</span>
</div>
</template>var c = Vue.component('rating',{
template: '#rating'
});
二、组件对象的属性
创建组件时，可以使用任何有效的Vue对象属性，如data属性、computed属性、methods属性等等。
[*]data属性：表示Vue组件可用的响应式数据
[*]必须是函数形式，否则程序出错；
[*]必须在函数中返回 独有对象，否则程序会产生对象共享内存的bug。
var c = Vue.component('my-component',{
template: '.....',
data: {
name: 'my-component'
}
});<div id="app">
<my-component></my-component>
<my-component></my-component>
</div>
[*]computed属性：Vue组件中使用的计算属性
[*]methods属性：Vue组件中使用的自定义方法（函数）
[*]其它属性：生命周期回调方法、过滤器
三、Vue组件对象（HTML代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件对象剖析</title>
</head>
<body>
<div id="app">
<h6>my-component</h6>
<my-component></my-component>
<hr>
<h6>另一个my-component</h6>
<my-component></my-component>
</div>
<template id="my">
<!-- 组件的html模板中只允许有一个根元素 -->
<div>
<div>this is div content</div>
<p>this is p content from template</p>
<p>message={{message}}</p>
<button @click="message = 'update message'">修改message</button>
</div>
</template>
<script src="vue.js"></script>
<script>
var data = {
message: 'global message'
}
//创建一个全局组件
const my = Vue.component('my-component',{
template: '#my',
//data属性：当前组件使用的数据信息
//data属性必须是回调函数形式，回调函数中要返回对象
//data属性应该返回一个独有对象
data:function(){
return {
message: 'component-message'
};
}
// template: `
// <div>
// <span>this is span content</span>
// <p>this is p content</p>
// </div>
// `
});
//Vue实例对象
var vm = new Vue({
el: '#app'
});
</script>
</body>
</html>注：一定要引入Vue.js点击链接下载开发版或生产版本在html中引入即可
https://blog.51cto.com/u_15173612/4845417
页:
[1]