Vue.set(data, ‘c’, 3)
// `vm.c` 和 `data.c` 现在是响应的
初始化数据：尽管Vue.js提供动态的添加相应属性，还是推荐在data对象上声明所有的相应属性。
不这么做：
var vm = new Vue({
template: '<div>{{msg}}</div>'
})
// 然后添加 `msg`
vm.$set('msg', 'Hello!')应该这么做：
var vm = new Vue({
data: {
// 以一个空值声明 `msg`
msg: ''
},
template: '<div>{{msg}}</div>'
})
// 然后设置 `msg`
vm.msg = 'Hello!'组件完整案例
下面介绍的例子实现了模态窗口功能，代码也比较简单。
html代码：
<!-- 实现script定义一个模板 -->
<script type="x/template" id="modal-template">
<!--模板是否显示通过v-show="show"来设置， transition设置动画效果-->
<div class="modal-mask" v-show="show" transition="modal">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<!--slot 相当于header占位符-->
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<!--slot 相当于body占位符-->
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<!--slot 相当于footer占位符-->
<slot name="footer">
default footer
</slot>
<button class="modal-default-button" @click="show = false">OK</button>
</div>
</div>
</div>
</div>
</script>
<div id="app">
<!--点击按钮时设置vue实例特性showModal的值为true-->
<button id="show-modal" @click="showModal = true">show modal</button>
<!--modal是自定义的一个插件，插件的特性show绑定vue实例的showModal特性-->
<modal :show.sync="showModal">
<!--替换modal插件中slot那么为header的内容-->
<h3 slot="header">Custom Header</h3>
</modal>
</div>js代码：
//定义一个插件，名称为modal
Vue.component("modal", {
//插件的模板绑定id为modal-template的DOM元素内容
template: "#modal-template",
props: {
//特性，类型为布尔
show:{
type: Boolean,
required: true,
twoWay: true
}
}
});
//实例化vue，作用域在id为app元素下，
new Vue({
el: "#app",
data: {
//特性，默认值为false
