Vue（第三天）
Vue（第三天）
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- Vue（第三天）
- 前言
- 一、什么是计算属性（computed）？
-
- 1、使用步骤
-
- 结论
- 二、内容分发
- 三、自定义事件
- Vue入门小结
前言
提示：以下是本篇文章正文内容，下面案例可供参考
一、什么是计算属性（computed）？
计算属性是重点突出在属性两个字上，首先它是个属性其次这个属性有计算的能力，这里计算就是个函数。简单说，它就是一个能够将结果换成起来的属性，仅此而已：可以想象为缓存。
1、使用步骤
代码如下（示例）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；
代码如下（示例）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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: '\n' +
' \n'
+
' {
{classes}} '
});
var app = new Vue({
el: '#app',
data: {
title: '秦老师系列课程',
classes: ['JAVA', 'LIUNX', 'MYSQL']
}
});
script>
body>
html>
三、自定义事件
代码如下（示例）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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: '\n' +
' \n'
+
' {
{index}}========={
{classes}} ',
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操作放在内存中执行：