计算属性应该使用 computed 属性,他会把内部方法变为静态属性直接可以调用
一下使用 computed 与 methods 进行对比
<div id="vue" >
<div>date1: {{date1()}} div>
<div>date_1: {{date1}}div>
<div>date2: {{date2}}div>
{date2()}}-->
div>
<script src="https://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里的东西不能重名
结论:
调用方法时,每次都需要进行计算,可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
1.创建一个Vue的html文件模板
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="vue" >
div>
<script src="https://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 name="todo-title">slot>\
<ul>\
<slot name="todo-items">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 id="vue" >
<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 id="vue" >
<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);
}
}
});
这时候再进入页面可以实现,点击按钮删除数组元素功能