Vue.js[组件(Component)]

什么是:

拥有专属的HTML，CSS，数据的，可重用的页面独立区域
一个页面由多个组件聚合而成一个大型的页面
在代码层面上，一个组件就是一个可反复使用的自定义标签。

vs jq插件 vs boot组件

boot插件: 虽然可重用，但仍需要大量工作亲力亲为 且，不能绑定数据，比如: 轮播图，如果图片变化，就得改HTML，无法根据数据库变化，自动动态变化。

为什么:

松散耦合，便于重用，便于大项目维护，便于协作开发

何时:

今后，所有页面，都是由多个组件组合而成。
凡是重用的，必须先定义为组件，再使用

如何:

(1)创建一个组件：

<div id="app">...
<div>
new Vue({el:"#app",data: { ... }
})

根组件

Vue.component( '组件名' , {template: '一批HTML元素',data: function(){  return {....} },methods:{ },computed: { },watch: { }
} )

Vue.component(‘组件名’, {

//组件名推荐写法: xz-counter 用横线分割多个单词，不推荐使用驼峰命名
/*data:{ count: 1 }*/
//报错: The “data” option should be a function that returns a per-instance value in component definitions.
data: function(){
//强调: 自定义子组件中的data必须是一个函数，然后函数返回一个包含子组件模型数据的对象
return {
//因为，每个组件，为了避免在重用时，模型数据互相影响，就要求必须有自己专属的对象，而不是共用同一个对象。
//只有通过函数，动态创建{}，才能反复创建多个模型数据对象，分别服务于各自所属的组件

count: 1}},methods:{add(){this.count++;  //this指当前组件对象}},

watch:{},
computed:{},
template:
//组件最终会翻译为普通的html显示，html要定义在template中
<div>
//强调: 组件模板中，必须只能有一个父级根元素
//如果不加唯一父元素，报错: Component template should contain exactly one root element.

<button>-</button><span>{{count}}</span><button @click="add">+</button></div>`
})

(2)在视图中使用组件：

<div id="app"><组件名></组件名>
</div>

其实: var vm=new Vue({
//也是一个组件，而且是整个页面的根组件
el:
//只有根组件，才能使用el属性来绑定根元素
//其它自定义子组件中，都必须使用template属性代替el:
//其余以下属性，子组件也可使用

 data:method: computed:watch:
})

模板HTML的写法: 2种:

• 写在template属性中:
  问题: 不符合内容与行为分离的原则，不便于编写和维护
  无法利用IDE的HTML语法提示
• 写在一个独立的<template>元素中: ——强烈推荐