VUE是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。
组件
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
注册组件
组件的注册分为全局注册和局部注册,下面的注册是全局注册。
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
1.使用组件，并通过父组件往子组件传递参数。
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
组件复用
有如下的组件：
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
使用该组件的形式如下：
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
因为组件是可复用的 Vue 实例，所以它们与new Vue接收相同的选项，例如data computed watch methods 以及生命周期钩子等，仅有的特殊例外像el这样的根实例特有选项
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建
data必须是一个函数
一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝,如果 Vue 没有这条规则，点击一个按钮就可能会影响到其它所有实例
通过 Prop 向子组件传递数据
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个props选项将其包含在该组件可接受的 prop 列表中。
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
正在的应用场景如下：
//真实的数据应该是一个数组
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
<blog-post v-for "post in posts"
v-bind:key="post.id" v-bind:title="post.title">
</blog-post>
单个根元素
每个组件都需要有且仅有一个元素。
并且传递的数据需要尽量方便。
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
传输的数据需要尽可能方便：
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
而不是按照如下规则进行：
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
v-bind:content="post.content"
v-bind:publishedAt="post.publishedAt"
v-bind:comments="post.comments"
></blog-post>
向父组件传递数据
<!--在父组件上声明布局-->
new Vue({
el:'enlarge-text-demo',
postFontSize:20
})
<div id='enlarge-text-demo'>
<blog-post style="{font-size: postFontSize + 'em'}" v-for:"post in posts" :key="post.id" :post="post" v-on:enlarge-text="postFontSize += 0.1">
</blog-post>
<div>
<!--子组件-->
<!--注册组件-->
Vue.component('blog-post',{
props:['post'],
templete:`
<div class='blog-post'>
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
<div v-html="post.content"></div>
</div>
`
})
子控件往父控件传递参数
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
或者，如果这个事件处理函数是一个方法：
<blog-post
...
v-on:enlarge-text="onEnlargeText"
></blog-post>
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
使用v-model
V-model是双选绑定，上面的内容是单向绑定
<input v-model="searchText"/>
等效于
<input :value="searchText"
@input="searchText=$event.target.value"/>
因此，要想使用v-model,必须按照如下方式使用：
<custom-input
v-bind:value="searchText" //自定义属性
v-on:input="searchText = $event" //自定义属性
></custom-input>
vue的子组件的写法如下：
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)" //回传属性
>
`
})
因此 可以使用v-model
<custom-input v-model="searchText"></custom-input>
通过插槽分发内容
和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：
<alert-box>
Something bad happened.
</alert-box>
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
输出结果：
Error! Something bad happened.
t:插槽传递内容
动态组件
有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面。
<component v-bind:is="currentTabComponent"></component>
