1. 创建项目骨架
1-1) 新建项目
vue create demo1_1 --default
1-2) 安装依赖
cd demo1_1
npm install bootstrap@4.0.0
1-3) main.js中引入css
import Vue from 'vue'
import App from './App.vue'
...
import "bootstrap/dist/css/bootstrap.min.css";
new Vue({
render: h => h(App)
}).$mount('#app')
1-4) 准备模拟数据
App.vue
<template>
...
</template>
<script>
export default {
data: function () {
return {
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
}
}
}
</script>
2. 利用bootstrap基本样式构建一个任务列表页
2-1) 页面标题
<h4 class="bg-primary text-white text-center p-2">
Adam's To Do List
</h4>
代码解释:
| 关键字 | 解释 |
|---|---|
| bg-primary | 用于主要内容区域 |
| text-white | 白色字体 |
| text-center | 字体在元素内横向居中 |
| p-2 | 在各个方向上增加padding为2 |
| m-2 | 在各个方向上增加margin为2 |
2-2) 基于DIV和循环构建列表界面
...
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in tasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">{{t.done}}</div>
</div>
</div>
...
代码解释:
| 关键字 | 解释 |
|---|---|
| container-fluid | 流式布局容器 |
| col-2 | 布局占2列(每一行由12列组成) |
| v-for | for循环带标签的元素 |
2-3) 基于表格和循环构建列表界面
<div>
<h4 class="bg-primary text-white text-center p-2">
Adam's To Do List
</h4>
<table class="table table-striped table-bordered table-sm">
<thead>
<tr>
<th>Task</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr v-for="t in tasks" v-bind:key="t.action">
<td>{{t.action}}</td>
<td>{{t.done}}</td>
</tr>
</tbody>
</table>
</div>
代码解释:
| 关键字 | 解释 |
|---|---|
| table-striped | 表格体背景间隔色 |
| table-bordered | 表格带边框 |
| table-sm | 表格间隙小尺寸 |
效果图如下:
image.png
2-4) 增加底部操作表单
<template>
<div>
...
<div class="form-group m-2">
<label>New Item:</label>
<input v-model="newItemText" class="form-control" />
</div>
<div class="text-center">
<button class="btn btn-primary" v-on:click="addNewTodo">
Add
</button>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
...
newItemText: ""
}
},
methods: {
addNewTodo() {
this.tasks.push({
action: this.newItemText,
done: false
});
this.newItemText = "";
}
}
}
</script>
效果图如下:
image.png
3. 一些内置数组方法
| 方法名 | 详细描述 |
|---|---|
| concat(otherArray) | 连接两个数组，返回一个新数组 |
| join(separator) | 把数组中所有的元素通过分隔符参数连接成一个字符串 |
| pop() | 数组中最后一个元素出栈并返回 |
| shift() | 数组中第一个元素出队列并返回 |
| push(item) | 把参数压栈入数组最后一个元素 |
| unshift(item) | 把参数插入数组第一个元素 |
| reverse() | 返回一个元素反置的新的数组 |
| slice(start,end) | 返回一个由参数决定起始位置的数组的切片部分 |
| sort() | 数组元素排序 |
| splice(index, count) | 把指定开始位置和个数的数组的部分去除并返回 |
| every(test) | 数组的每个元素调用测试方法，有一个为false则为false，否则为true |
| some(test) | 数组的每个元素调用测试方法，有一个为true则为true，否则为false |
| filter(test) | 数组调用过滤函数 |
| find(test) | 寻找符合条件的第一个元素 |
| findIndex(test) | 寻找符合条件的第一个元素的下标 |
| forEach(callback) | 数组的每一个元素调用某个回调函数 |
| includes(value) | 数组是否包含指定元素，返回布尔 |
| map(callback) | 数组中的每个元素调用回调函数返回新的数组 |
| reduce(callback) | 数组中每个元素调用回调函数形成一个累计汇总值(多用于求和) |
程序示例:
(返回存在库存的产品总价)
let products = [
{ name: "Hat", price: 24.5, stock: 10 },
{ name: "Kayak", price: 289.99, stock: 1 },
{ name: "Soccer Ball", price: 10, stock: 0 },
{ name: "Running Shoes", price: 116.50, stock: 20 }
];
let totalValue = products
.filter(item => item.stock > 0)
.reduce((prev, item) => prev + (item.price * item.stock), 0);
console.log(`Total value: $${totalValue.toFixed(2)}`);
运行结果:
Total value: $2864.99
4. 对象间的属性拷贝
- 利用Object.assign方法
let myData = {
name: "Adam",
weather: "sunny",
printMessages() {
console.log(`Hello ${myData.name}.`);
console.log(`Today is ${myData.weather}.`);
}
};
let secondObject = {};
Object.assign(secondObject, myData);
secondObject.printMessages();
运行结果:
Hello Adam.
Today is sunny.
5. 理解ES6中的模块(Modules)
- 模块(Modules)是什么
模块其实是可被依赖的代码段。
ES6中模块不是对象，而是通过export命令显式指定输出的代码。
这些代码可以通过import命令输入。
-
export default命令
为模块指定默认输出。
默认为js文件名。
-
import命令
引入指定模块。
可以在import时候为模块指定任意别名。
-
实例
场景:
我们在src/maths文件夹下定义一个js文件名叫sum.js。
里面放置了一个求和函数。
然后我们需要在另一个js文件中引用该函数。
sum.js
export default function(values) {
return values.reduce((total, val) => total + val, 0);
}
另一个js文件(main.js)
import additionFunction from "./maths/sum";
let values = [10, 20, 30, 40, 50];
let total = additionFunction(values);
console.log(`Total: ${total}`);
- 模块的多功能引入
operations.js
export function multiply(values) {
return values.reduce((total, val) => total * val, 1);
}
export function subtract(amount, values) {
return values.reduce((total, val) => total - val, amount);
}
export function divide(first, second) {
return first / second;
}
另一个js文件(main.js)
import additionFunction from "./maths/sum";
import { multiply, subtract } from "./maths/operations";
let values = [10, 20, 30, 40, 50];
console.log(`Sum: ${additionFunction(values)}`);
console.log(`Multiply: ${multiply(values)}`);
console.log(`Subtract: ${subtract(1000, values)}`);
也可以引入整个模块
import * as ops from "./maths/operations";
6. Promise异步编程
- 什么是Promise
A promise is a background activity that will be completed at some point in the future.
Promise简单来说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
- 基本语法
var promise = new Promise(function(resolve, reject) {
// some code
if (...) {
// 异步操作成功
resolve(value);
} else {
reject(error);
}
});
// 使用then方法指定 resolved和rejected状态的回调函数
promise.then(function(value) {
// success
}, function(error) {
// failure
});
- 实例
demo1
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('Resolved');
});
console.log('Hi');
运行结果:
Promise
Hi
Resolved
demo2
Promise的声明方代码:
export function asyncAdd(values) {
return new Promise((callback) => {
setTimeout(() => {
let total = addition(values);
console.log(`Async Total: ${total}`);
// 调用回调函数
callback(total);
}, 500);
});
}
Promise的调用方代码:
import { asyncAdd } from "./maths";
let values = [10, 20, 30, 40, 50];
asyncAdd(values).then(total => console.log(`Main Total: ${total}`));
运行结果:
Async Total: 150
Main Total: 150
网友评论