vue计算属性
vue计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算 的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>布局篇 计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" type="text/javascript"></script> </head> <body> <div id="app"> <p>调用当前时间属性：{{currentTime2}}</p> <p>调用当前时间方法：{{currentTime1()}}</p> </div> </body> </html> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello World' }, methods: { currentTime1: function () { return Date.now(); } }, computed: { currentTime2: function () { this.message; return Date.now(); } } }); </script>
说明
methods：定义方法，调用方法使用 currentTime1()，需要带括号
computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化
注意：methods 和 computed 里不能重名
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点；计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
Vue 中的内容分发
在 Vue.js 中我们使用 < slot > 元素作为承载分发内容的出口，作者称其为 插槽，可以应用在组合组件的场景中
利用插槽功能实现一个组合组件
比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？
#定义一个名为 todo 的待办事项组件 Vue.component('todo', { template: '<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' });
该组件中放置了两个插槽，分别为 todo-title 和 todo-items
#定义一个名为 todo-title 的待办标题组件 Vue.component('todo-title', { props: ['title'], template: '<div>{{title}}</div>' });
#定义一个名为 todo-items 的待办内容组件 Vue.component('todo-items', { props: ['item', 'index'], template: '<li>{{index + 1}}. {{item}}</li>' });
#实例化 Vue 并初始化数据 var vm = new Vue({ el: '#vue', data: { todoItems: ['《刀剑神域3》', '《关于我转生成为史莱姆这件事》', '《实力至上主义教室》'] } });
html:
<div id="vue"> <todo> <todo-title slot="todo-title" title="今日动漫推荐"></todo-title> <todo-items slot="todo-items" v-for="(item, index) in todoItems" v-bind:item="item" v-bind:index="index" :key="index"></todo-items> </todo> </div>
此时，我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中
