Vue(第三天)
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:以下是本篇文章正文内容,下面案例可供参考
一、什么是计算属性(computed)?
计算属性是重点突出在属性两个字上,首先它是个属性其次这个属性有计算的能力,这里计算就是个函数。简单说,它就是一个能够将结果换成起来的属性,仅此而已:可以想象为缓存。
1、使用步骤
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>currentDate01:{{currentDate01()}}</p>
<p>currentDate02:{{currentDate02}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'zhangsan'
},
methods: {
currentDate01: function () {
return Date.now();
}
},
// currentDate02,这是个属性,不是方法
computed: {
currentDate02: function () {
this.message
return Date.now();
}
}
});
</script>
</body>
</html>
说明:
- methods:方法定义,调用方法使用currentDate01(),需要带括号
- computed:定义计算属性,调用属性currentDate02,不需要带括号
结论
调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那么如果这个结果不经常变化的呢?此时可以考虑将这个结果缓存起来,采用计算属性可以很方便做到这个点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销。
二、内容分发
在Vue.js中我们使用slot元素作为承载分发内容的出口,作者称其为插槽,可以应用在组合组件的场景中;
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-classes slot="todo-classes" v-for="item in classes"
:classes="item"></todo-classes>
</todo>
</div>
<script>
// 插槽
Vue.component("todo", {
template: '<div>\n' +
' <slot name="todo-title"></slot>\n' +
' <ul>\n' +
' <slot name="todo-classes"></slot>\n' +
' </ul>\n' +
' </div>'
});
Vue.component("todo-title", {
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-classes", {
props: ['classes'],
template: '<li>{{classes}}</li>'
});
var app = new Vue({
el: '#app',
data: {
title: '秦老师系列课程',
classes: ['JAVA', 'LIUNX', 'MYSQL']
}
});
</script>
</body>
</html>
三、自定义事件
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-classes slot="todo-classes" v-for="(item,index) in classes"
:classes="item" :index="index" v-on:remove="removeItems(index)" :key="index">
</todo-classes>
</todo>
</div>
<script>
// 插槽
Vue.component("todo", {
template: '<div>\n' +
' <slot name="todo-title"></slot>\n' +
' <ul>\n' +
' <slot name="todo-classes"></slot>\n' +
' </ul>\n' +
' </div>'
});
Vue.component("todo-title", {
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-classes", {
props: ['classes','index'],
template: '<li>{{index}}========={{classes}} <button @click="remove">删除</button></li>',
methods: {
remove: function (index) {
// this.$emit 自定义事件分发
this.$emit('remove',index);
}
}
});
var app = new Vue({
el: '#app',
data: {
title: '秦老师系列课程',
classes: ['JAVA', 'LIUNX', 'MYSQL']
},
methods: {
removeItems: function (index) {
console.log("删除了" + this.classes[index] + "ok了");
// 一次删除一个元素
this.classes.splice(index, '1');
}
}
});
</script>
</body>
</html>
说明:
- Vue.Compent():注册组件
- todo-classes():自定义组件的名字
- template:组件的模板
- props:可以传递属性参数
Vue入门小结
核心:数据驱动、组件化
优点:借鉴了AngulaJs的模块开发和React的虚拟Dom,虚拟Dom就是把Dom操作放在内存中执行:
常用的属性:
- v-if
- v-else-if
- v-else
- v-for
- v-on 绑定事件,简写**@**
- v-model数据的双向绑定
- v-bind给组件绑定参数,简写 :
组件化:
- 组合组件slot插槽
- 组件内部绑定事件需要使用到this.$emit(“事件名”,参数)
- 计算属性的特色,缓存计算数据