计算属性概念
可以理解为缓存的效果
简单代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>getCurrentTime1 {{getCurrentTime1()}}</p>
<!--下面可以通过属性就调用-->
<p>getCurrentTime2 {{getCurrentTime2}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello jie"
},
methods:{
getCurrentTime1:function () {
return Date.now();//返回当前时间戳
}
},
//计算属性
computed:{
getCurrentTime2:function () {
return Date.now();//返回当前时间戳
}
}
});
</script>
</body>
</html>
区别:在控制台调用就会发现 计算属性的方式数值并不会更新。
计算属性就是将不经常变化的数据保存起来，形成缓存的效果。
slot概念
slot相当于一个空标签，通过vue可以实现动态改变值和样式，把一块区域内容抽了出来可以实现复用，就和Java里封装的工具类一样
简单例子:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:temptitle="title" ></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" v-bind:tempitem="item"></todo-items>
</todo>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('todo',{
template: `
<div>\
<slot name="todo-title"></slot>
<ul>
<slot name="todo-items"></slot>
</ul>
</div>
`
});
Vue.component('todo-title',{
props:['temptitle'],
template: `<div>{{temptitle}}</div>`
});
Vue.component('todo-items',{
props:['tempitem'],
template:'<li>{{tempitem}}</li>'
});
var vm=new Vue({
el:"#app",
data:{
title: "学习的东西",
todoItems: ['Java','Linux','C++']
}
});
</script>
</body>
</html>