Vue-组件化 计算属性
计算属性应该使用 computed 属性，他会把内部方法变为静态属性直接可以调用
一下使用 computed 与 methods 进行对比
<div > <div>date1: {{date1()}} </div> <div>date_1: {{date1}}</div> <div>date2: {{date2}}</div> <!--<div>date_2: {{date2()}}</div>--> </div> <script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#vue', methods: { date1: function(){ return Date.now(); } }, computed: { date2: function (){ return Date.now(); } } }); </script>
注意：methods和computed里的东西不能重名
methods：定义方法，调用方法使用currentTime10），需要带括号，
computed：定义计算属性，调用属性使用currentTime2，不需要带括号；
如何在方法中的值发生了变化，则缓存就会刷新;
结论：
调用方法时，每次都需要进行计算，可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；
插槽1.创建一个Vue的html文件模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div > </div> <script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#vue' }); </script> </body> </html>2.创建一个Vue组件
Vue.component("todo",{ template: '<div>\ <slot></slot>\ <ul>\ <slot></slot>\ </ul>\ </div>' });在这个名为 todo 的Vue组件中 加入了两个插槽 <slot>
3.再创建两个Vue组件可以补充到 插槽 中
Vue.component("todo",{ template: '<div>\ <slot></slot>\ <ul>\ <slot></slot>\ </ul>\ </div>' }); Vue.component("todo-title",{ }); Vue.component("todo-items",{ });4.补充其余部分
var vm = new Vue({ el:'#vue', data: { title: "我是一个title", todoItems: ['Java','Python','Linux','Nginx'] } }); <div > <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items> </todo> </div> Vue.component("todo-title",{ props: ['title'], template: '<div>{{title}}</div>' }); Vue.component("todo-items",{ props: ['item'], template: '<li>{{item}}</li>' });
1.修改html页面，增加删除按钮
<div > <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index"></todo-items> </todo> </div> Vue.component("todo-items",{ props: ['item','index'], template: '<li>{{index}}---{{item}}--<button @click="remove">删除</button></li>', methods: { remove: function (){ alert("111"); } } });增加了 数组索引 以及 删除按钮
一个Vue组件只能调用这个组件内的方法，但是这样做不到删除数组元素
所以应该使用 this.$emit('方法名',index);
2.先在Vue中增加删除方法
methods: { removeItems: function (index) { alert("删除了"+this.todoItems[index]); this.todoItems.splice(index,1); // 一次删除一个元素 } }这个方法一次删除一个元素，即删除当前元素，删除之前会弹出删除的元素名
3.在Vue组件中进行方法绑定
<todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items> Vue.component("todo-items",{ props: ['item','index'], template: '<li>{{index}}---{{item}}--<button @click="remove">删除</button></li>', methods: { remove: function (index){ this.$emit('remove',index); } } });这时候再进入页面可以实现，点击按钮删除数组元素功能
个人博客为：
MoYu's Github Blog
MoYu's Gitee Blog