计算属性、内容分发、自定义事件
-
1、什么是计算属性
计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数:简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<p>currentTime1: {{currentTime1()}}</p>
<!-- 方法当属性-->
<p>currentTime2: {{currentTime2}}</p>
</div>
<!-- 1.导入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
// Model:数据
data:{
message:"hello,Vue"
},
methods: {
currentTime1:function() {
return Date.now();// 返回一个时间戳
}
},
computed: {//计算属性
currentTime2: function (){//计算属性 methods和computed中方法不能重名,如果重名,只会调用methods中的方法
return Date.now();
}
}
});
</script>
</body>
</html>
注意:methods和computed里的东西不能重名
说明:
- methods:定义方法, 调用方法使用currentTime1(), 需要带括号
- computed:定义计算属性, 调用属性使用currentTime2, 不需要带括号:this.message是为了能够让currentTime2观察到数据变化而变化
- 如何在方法中的值发生了变化,则缓存就会刷新!可以在控制台使用vm.message=”zs”, 改变下数据的值,再次测试观察效果!
结论:
调用方法时,每次都需要讲行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
2、内容分发
在Vue.js中我们使用
代码:(这里面有点绕,多看两遍就好了)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<!-- <p>书籍列表</p>-->
<!-- <ul>-->
<!-- <li>JAVA</li>-->
<!-- <li>C#</li>-->
<!-- <li>SQL</li>-->
<!-- </ul>-->
<!-- 这里是标签 :是v-bind的简写-->
<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>
<!-- 1.导入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
// slot:插槽
// 这3个都是组件,组件定义了标签
// \:代表换行
Vue.component("todo",{
template: '<div>\
<slot name = "todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
// 标题
Vue.component("todo-title",{
props: ['title'],//接收数据
template: '<h4>{{title}}</h4>'
});
Vue.component("todo-items",{
props: ['item'],
template: '<li>{{item}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
title: "书籍列表",
todoitems: ['JAVA','C#','SQL']
}
});
</script>
</body>
</html>
3、自定义事件
通以上代码不难发现,数据项在Vue的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用this.$emit(‘自定义事件名’, 参数)
代码:(很绕,多看几遍)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<!-- <p>书籍列表</p>-->
<!-- <ul>-->
<!-- <li>JAVA</li>-->
<!-- <li>C#</li>-->
<!-- <li>SQL</li>-->
<!-- </ul>-->
<!-- 这里是标签 :是v-bind的简写-->
<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" v-on:remove1="removeItems(index)"></todo-items>
</todo>
</div>
<!-- 1.导入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
// slot:插槽
// 这3个都是组件,组件定义了标签
Vue.component("todo",{
template: '<div>\
<slot name = "todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
// 标题
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
// 上面遍历出来index,所以这边可以接收
props: ['item','index'],
template: '<li>{{item}} <button @click="remove">删除</button></li>',
//只能绑定当前组件的方法
methods: {
remove: function (index){
//在组件中想删除data中的数据删除不到,只能使用自定义事件
//这里的remove是自定义事件名称,需要在HTML中使用v-on:remove的方式
//this.$emit 自定义事件分发
this.$emit('remove1',index);
}
}
});
var vm = new Vue({
el: "#app",
data: {
title: "书籍列表",
todoitems: ['JAVA','C#','SQL']
},
methods: {
removeItems:function (index){
this.todoitems.splice(index,1);//一次删除一个元素
}
}
});
</script>
</body>
</html>
4、Vue入门小结
核心:数据驱动,组件化
优点:借鉴了AngularJS的模块化开发和React的虚拟Dom,虚拟Dom就是把Demo操作放到内存中执行;
常用的属性:
- v-if
- v-else-if
- v-else
- v-for
- v-on绑定事件,简写@
- v-model数据双向绑定
- v-bind给组件绑定参数,简写:
组件化:
- 组合组件slot插槽
- 组件内部绑定事件需要使用到this.$emit(“事件名”,参数);
- 计算属性的特色,缓存计算数据
- 遵循SoC关注度分离原则,Vue是纯粹的视图框架,并不包含,比如Ajax之类的通信功能,为了解决通信问题,我们需要使用Axios框架做异步通信;
说明
Vue的开发都是要基于NodeJS,实际开发采用Vue-cli脚手架开发,vue-router路由,vuex做状态管理;Vue UI,界面我们一般使用ElementUI(饿了么出品),或者ICE(阿里巴巴出品)来快速搭建前端项目~~
官网: