我们现在在使用v-for的时候、都必须会加上一个必要的key值,并且很多人会使用index来作为key，其实这样是不太妥当的一种做法。那么v-for中的键值key到底有什么作用呢。请看：
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
-
<div v-for="item in items" v-bind:key="item.id">
-
<!-- 内容 -->
-
</div>
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
-
<div v-for="(item,index) in list" :key="index"> {{item.name}}</div>
-
list: [
-
{
-
id: 1,
-
name: "name1",
-
},
-
{
-
id: 2,
-
name: "name2",
-
},
-
{
-
id: 3,
-
name: "name3",
-
}
-
]
这个场景如何我们不佳key vue 回直接报错，所以大部分人都会使用index作为key的值
如果我们在添加一个数据
-
-
list: [
-
{
-
id: 1,
-
name: "name1",
-
},
-
{
-
id: 2,
-
name: "name2",
-
},
-
{
-
id: 3,
-
name: "name3",
-
},
-
{
-
id: 4,
-
name: "last",
-
},
-
]
此时前面3条数据直接服用之前的，新渲染最后一条数据，此时index作为key没有任何问题
如何我们在中间添加一条
-
list: [
-
{
-
id: 1,
-
name: "name1",
-
},
-
{
-
id: 2,
-
name: "name2",
-
}, {
-
id: 4,
-
name: "last",
-
},
-
{
-
id: 3,
-
name: "name3",
-
}
-
]
此时我们更新渲染的数据 通过index 定义key 进行数据对比一下
之前的数据：
中间插入之后的数据 ：
由此可以发现除了第一条数据可以复用以为其余的3条数据都是需要重新渲染，因为key的值发生了变化。
这个时候就可以体现出一个效率的问题，只插入一条数据，却要从新渲染3条数据
所以我们需要可以想办法让数组中不会变化的数据的key值也不变，所以不能通过index来设置key值，应该设置一个唯一的id来标识数据的唯一性；我们修改之后再来对比一下渲染的效率：
之前的数据：
<div v-for="(item,index) in list" :key="item.id"> {{item.name}}</div>
中间插入之后的数据：
对此对比发现，只有一条数据发生改变，因为其他数据的id 都没有变、所以对应的key也没有发生改变。我们只需要渲染这一条新的数据就可以。 所以一般推荐使用id作为key值配合v-for使用
Vue很大的一个特点就是双向数据绑定，数据一旦改变，那么页面就渲染新的数据呈现在页面上。但是对于用v-for渲染的列表数据来说，数据量可能一般很庞大，而且我们经常还要对这个数据进行一些增删改操作，而key的出现就是尽可能的回避这个问题，提高效率，如果我们给列表增加了一条数据，页面只渲染了这数据。
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
var arr = [2,3,4,2,34,21,1,12,3,4,1] for(var i =0;i<arr.length;i++){ //第一层：每次循环拿到arr中一个元素 for(var j=i+1;j<arr.length;j++){ //第二层：每次拿到的元素再和每次拿到的元素后边的元素依次进行比对（因为第一个要从第二个开始比，第二个要从第三个比以此类推，所以这里的j应比i大1为j=i+1） if(arr[i] === arr[j]){ //如果相同就删除后边的元素 arr.splice(j,1) } } } //arr:[1, 2, 3, 4, 12, 21, 34]
创建新数组，循环旧数组，看每次循环的元素是否存在于新数组中没有就把当前元素添加到新数组中
//indexof var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = [] arr.forEach((e)=>{ if(arr2.indexOf(e)==-1){ arr2.push(e) } }) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34]
//includes var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = [] arr.forEach((e)=>{ if(!arr2.includes(e)){ arr2.push(e) } }) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34]
var arr = [2,3,4,2,34,21,1,12,3,4,1] var obj = {}; arr.forEach((e,i)=>{ obj[arr[i]] = "abc"; }); var arr2=Object.keys(obj) console.log(arr2) //arr2:["1", "2", "3", "4", "12", "21", "34"] var arr3 = arr2.map(e => ~~e ) //arr3:[1, 2, 3, 4, 12, 21, 34] //注意这种方法不仅给数组重新排列而且还改变了数组中元素的类型
~是js里的按位取反操作符，~~就是执行两次按位取反，其实就是保持原值，但是注意虽然是原值，但是对布尔型变量执行这个操作，会转化成相应的数值型变量，也就是 ~~true === 1，~~false === 0。
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr1 = [...new Set(arr)] console.log(arr1) //arr1:[1, 2, 3, 4, 12, 21, 34]
注：indexOf在数组中找元素的时候，碰到符合条件的第一个就会把它的下标返回
var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = arr.filter((e,i)=>{ //看每次循环的元素在数组中出现的第一个下标位置（indexOf返回的位置），和每次循环的元素的下标（filter循环每次的i）是否一致，一致就说明他就是第一个符合条件，不会被过滤掉。 return arr.indexOf(e)==i; }) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34]
var arr = [2,3,4,2,34,21,1,12,3,4,1] var arr2 = arr.reduce((pre,e)=>{ //这里当然也可以用indexOf来判断是否存在 pre.includes(e)?pre:pre.push(e); return pre },[]) console.log(arr2) //arr2:[1, 2, 3, 4, 12, 21, 34]
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本节课程教大家如何讲智能合约部署到conflux公链上，首先大家可以看到下面的这个智能合约是不是很简单。我们将会以这个合约演示部署到conflux公链的过程。
pragma solidity ^0.5.0;
contract Counter {
uint public count=0;
event SelfEvent(address indexed sender, uint current);
constructor() public {
} function inc(uint num) public returns (uint){ return count += num;
} function self() public {
emit SelfEvent(msg.sender, count);
}
} 复制代码我们使用js-conflux-sdk作为本教程的web教程，交互首先我们需要进行安装nodejs作为我们的运行环境。飞机票一张收下吧，我们安装好nodejs后，就可以来玩我们的sdk了。废话不多说，直接开始撸。
我们使用WIN + R键打开命令行，然后创建一个文件夹（温馨提示切换到非系统盘玩切换方式“D:”就切换到D盘了）使用“mkdir my-project && cd my-project” 创建好项目后自动进入文件夹，然后我们运行“npm init” 进行初始化node项目，这一步会让你确认一些东西，如果你是小白一路回车（Enter键）就好。如果你是前端大神，我也没啥好教的我也不太懂。为了稳定我们使用固定版本号方式安装依赖，我们运行 “npm install js-conflux-sdk@0.9.2” 命令进行安装js-conflux-sdk的0.9.2版本依赖（可以使用“npm uninstall package-name” 命令删除对应依赖）。前置准备到这里基本已经完成。
下面请看我的目录结构跟随我一起来学习，下面的目录结构请不要直接看到了就创建，因为你不知道都是什么意思，看玩我的解释在回头创建。
![image](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="193" height="228"></svg>)
小伙伴应该已经发现了 node_modules、package-lock.json、package.json 这些文件是我们在进行安装 sdk依赖时自动生成的。其他文件目前都没有，我们来按顺序生成他们。
先创建sol这个文件夹，然后创建这三个文件。test.sol就是上面我们的合约代码直接拷入文件中。abi.json和code.json两个文件是通过这个工具 remix 在线生成的。我来说下生成过程。 首先我们将里面的文件全部删除，然后点击这里找到我们的项目目录下的test.sol 文件
我们应该看到下方我框出来的两个按钮了吧，那两个按钮就是abi.json和code.json文件的来源。abi.json我们可以直接复制过去，code.json文件我们要改点东西。
首先我们看到的code文件应该是这样的
{ "linkReferences": {}, "object": "608060405260...c63430005110032", "opcodes": "PUSH1 0x80 PUSH1 ... 1100 ORIGIN ", "sourceMap": "27:337:0 ... 37;;;;;;" } 复制代码代码有省略，太长不好看，我们看到object这个key值了吧，我们把它的值考出来然后在头部加0x 就好了放在code.json文件中。code.js文件中只存放object的内容前面加0x，也就是下面的代码，其他信息都不要，千万记住了。这点很重要！！！！
"0x608060405260...c63430005110032" 复制代码就是这样的。然后我们在写另外两个call和deploy两个文件
先写deploy文件
// 私钥地址
const PRIVATE_KEY = '0x20f9169d40801955faada641cdb029f8e42c581c0c991a62753c736a0a168e5e';
// 合约地址
const CONTRACT = '';
const { Conflux } = require('js-conflux-sdk');
async function main() {
const cfx = new Conflux({
url: 'http://mainnet-jsonrpc.conflux-chain.org:12537',
defaultGasPrice: 100,
defaultGas: 1000000,
});
const account = cfx.Account(PRIVATE_KEY); // create account instance
console.log(account.address);
// create contract instance
const contract = cfx.Contract({
abi: require('./sol/RC20.abi.json'),
bytecode: require('./sol/RC20.code.json'),
});
const receipt = await contract.constructor()
.sendTransaction({ from: account })
.confirmed();
console.log(receipt.contractCreated);
}
main().catch(e => console.error(e)); 复制代码打开项目cmd窗口在上面的目录下 运行命令 “node deploy.js”就将合约部署上去了
receipt.contractCreated 这个会打印出合约地址。
作者：悠悠_15832013094
链接：https://juejin.im/post/5ef563f75188252e99702335
来源：掘金
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
对本教程有任何疑问或建议可以在 GitHub 给我们留言。
Conflux DApp 开发教程将使用 Conflux Studio 在 Oceanus 网络下开发一个简单的代币应用 Coin。
通过这个开发教程，你将会学习到如何进行 Conflux 智能合约的编写、调用，配置智能合约的代付以及如何使用 Web 前端项目与智能合约进行交互，从而实现一个包含前端和智能合约的完整的 DApp。
在阅读教程中遇到任何问题，欢迎在 Issues 中向我们反馈。
请在 GitHub 下载页面下载 Conflux Studio。目前 Conflux Studio 支持 macOS 和 Linux 系统，请根据系统下载对应的版本。
正确安装 Conflux Studio 并初次启动后，Conflux Studio 将显示欢迎页面，根据提示完成 Docker, Conflux Node 以及 Conflux Truffle 的下载、安装及启动。
完成所有的安装步骤后，首先需要创建钥匙对来完成后续的合约部署以及调用。
在 Conflux Studio 的任意界面，点击应用左下⻆的钥匙图标，打开密钥管理器。点击 Create 按钮打开新钥匙对弹窗，输入钥匙对的名字并点击 Save 按钮。完成后将在密钥管理器中看到刚刚生成的钥匙对的地址。钥匙对由私钥和公钥组成，公钥在智能合约中也常被称作地址。
导出私钥可以通过点击每个地址后面的眼睛按钮打开查看私钥弹窗，弹窗显示地址以及私钥。后续教程中会需要通过管理器导出私钥。
为了顺利完成教程，首先需要创建三个钥匙对：
minter_key 用于 Coin 合约部署时的签名，是这个教程中最常使用的钥匙对
receiver_key 用于 Coin 合约接收转账，将在后文中介绍转账时用到
sponsor_key 用于 Coin 合约代付功能，将在后文中介绍代付功能时用到
教程将在 Oceanus 网络进行合约的部署以及合约的调用。点击顶部 Network 标签的倒三角打开下拉菜单，点击选择 Oceanus 网络进行切换。
切换完成后，可以在主页面中看到当前网络为 oceanus。页面左边包括了当前网络的节点 URL，Chain ID，TPS 信息，页面右边包含了当前网络区块的信息。
点击顶部 Explorer 标签打开区块浏览器，并在地址栏粘贴钥匙对地址，可以在左边看到当前地址的 CFX 余额信息。
在区块链的世界中，大家通常将申请测试 Token 的方式称为 faucet，目前在 Oceanus 网络下每次 faucet 申请到的 Token 为 100 CFX。
获取 CFX 的方式有两种方式：
https://wallet.confluxscan.io/faucet/dev/ask?address={address} 来申请 CFX
使用上述方法在 Conflux Studio 中为 minter_key 和 sponsor_key 申请 CFX Token。完成申请后，这两个账户上的余额将会从 0 CFX 更新为 100 CFX。
目前余额信息为：
minter_key 余额 100 CFX
receiver_key 余额 0 CFX
sponsor_key 余额 100 CFX
点击顶部左边的 Project 标签切换至项目列表页面，点击页面中的 New 按钮打开项目创建窗口，输入项目的名称并选择 coin 模版，点击 Create Project 完成项目的创建。
Coin 合约是一个简单的代币合约，其中：
Conflux 智能合约使用 Solidity 语言进行开发，打开目录下的 contracts/Coin.sol 文件，这个是本项目的核心代码：
// 指定了 Solidity 的版本，通过 Pragmas(https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragmas) 告诉编译器本代码可以兼容的版本为 0.5.0 到 0.7.0
pragma solidity >=0.5.0 <0.7.0;
// 导入 SponsorWhitelistControl 合约
import "./SponsorWhitelistControl.sol";
// 定义 Coin 的合约
contract Coin {
// 定义了两个 State Variables(https://solidity.readthedocs.io/en/latest/structure-of-a-contract.html#state-variables)
address public minter;
mapping (address => uint) private balances;
// 使用 SponsorWhitelistControl 合约连接系统合约
SponsorWhitelistControl constant private SPONSOR = SponsorWhitelistControl(address(0x0888000000000000000000000000000000000001));
// 定义了 `Sent` 的事件，定义了 from / to / amount 列
event Sent(address from, address to, uint amount);
// Coin 合约的 constructor ，在 constructor 中指定了 minter 的地址
constructor() public {
// msg.sender 为部署合约时签名的账户地址，将这个地址赋值给 minter
minter = msg.sender;
}
// 定义 mint 方法，通过此方法来增发代币
function mint(address receiver, uint amount) public {
require(msg.sender == minter);
require(amount < 1e60);
balances[receiver] += amount;
}
// 定义 send 方法，通过此方法可以给别的账户转账代币
function send(address receiver, uint amount) public {
require(amount <= balances[msg.sender], "Insufficient balance.");
balances[msg.sender] -= amount;
balances[receiver] += amount;
// 通过 emit 触发 Sent 事件，记录这笔转账的信息
emit Sent(msg.sender, receiver, amount);
}
// 定义 balanceOf 方法，这是个 view 类型的方法，用于查询账户余额
function balanceOf(address tokenOwner) public view returns(uint balance){
return balances[tokenOwner];
}
// 定义了 add_privilege 方法，调用系统合约 add_privilege 方法添加地址到代付白名单
function add_privilege(address account) public payable {
address[] memory a = new address[](1);
a[0] = account;
SPONSOR.add_privilege(a);
}
// 定义了 remove_privilege 方法，调用系统合约 remove_privilege 从合约代付白名单中移除地址
function remove_privilege(address account) public payable {
address[] memory a = new address[](1);
a[0] = account;
SPONSOR.remove_privilege(a);
}
}
点击工具栏的 Build 按钮进行合约的编译，编译的结果将会保存在 build/Coin.json 文件中。
在部署合约前，首先需要确认在 Explorer 中选择合约部署所使用的地址，Conflux Studio 会使用这个地址将部署合约这笔交易进行签名（选择的方法为在 Explorer 的地址栏中输入地址）。在合约代码的 constructor 中，minter 被赋值为 msg.sender，这个 msg.sender 就是 Explorer 所选择的地址。
在此我们选择 minter_key 作为部署合约的签名者。
点击工具栏的部署按钮进行部署，部署完成后，部署结果会在 deploys 的 JSON 文件中，在这个文件中可以在 contractCreated 中找到当前合约部署的地址，后文中使用 contract_addr 来代表这个合约地址。
点击顶部的 Contract 标签切换至合约页面，在地址栏输入 contract_addr 地址并加载合约。
合约页面由三个部分组成：
点击合约调用的下拉菜单中选择 mint 方法，在下方的参数区域分别填入以下信息：
minter_key 地址
msg.sender 获取到这个地址。填入 minter_key 地址
填写完成后点击执行按钮，Conflux Studio 将自动构造交易并推送到网络中。成功执行后可以在下方 Result 中看到这笔成功的交易。
点击查询区域的下拉菜单并且选择 balanceOf 方法，这是在代码中定义的查询方法。在下方的 tokenOwner 填入 minter_key 地址并点击执行，就可以在下方的 Result 中看到 minter_key 账户的 Coin 代币的余额信息为 1000。使用同样方法可以查询到 receiver_key 账户的代币余额为 0。
在合约调用区域选择 send 方法，在 Parameters 中分别填入：
receiver_key 地址
minter_key 地址，
点击执行完成转账，再次查询代币余额可以看到 minter_key 账户只剩下 800 代币，而 receiver_key 账户则从 0 变成了 200 代币。
Conflux 智能合约的每个调用的方法都可以带上 Value 参数，这是一个可选的参数。如果带上了这个值，智能合约出了在执行这个方法的逻辑外，还会额外转 Value 中指定数量的 CFX token 到 receiver 账户，转账金额为 Value 中所填的值。有些智能合约的方法需要这个参数才可以完成调用，但是在 Coin 合约不需要这个参数。
后文中的代付功能将会使用到 Value 参数。
在事件区域选择 Sent 并点击执行，下方的 Event Logs 可以看到转账的记录。Sent 事件的列都是由代码中的 Sent 事件的参数来定义的（其中 epoch 为事件发生的时间，这个为系统默认列）。在代码中定义了 Sent 方法的参数为 from， to 和 amount，分别对应了这笔转账的发起者地址，接受者地址以及转账的数量。
Conflux Studio 支持 Conflux 系统合约提供的代付功能。
通过系统合约可以为别的合约设置代付功能，系统合约提供给了四个方法：
add_privilege 添加合约代付白名单，在代付白名单中的地址调用该合约的方法时不需要付手续费，费用由代付账户支付。其中添加特殊地址 0x0000000000000000000000000000000000000000 代表为所有调用该合约的地址代付费用
remove_privilege 移除合约代付白名单
set_sponsor_for_collateral 设置合约储存费 (collateral for storage) 的代付账户及代付金额
set_sponsor_for_gas 设置合约手续费 (gas fee) 的代付账户、代付金额及每笔交易代付金额上限
启用一个合约的代付需要设置代付的账户、代付金额的及代付白名单。教程将会使用 Conflux Studio 通过系统合约设置代付账户及代付金额，通过 Coin 合约添加代付白名单。设置完成后，minter_key 账户调用 Coin 合约的方法时将不会被扣除手续费，手续费由 sponsor_key 账户代付。
在 Conflux Studio 中访问系统合约地址 0x0888000000000000000000000000000000000001，在合约调用区域能看到前文中提及的四个设置代付的方法。
选择 set_sponsor_for_collateral 方法，该方法有三个参数：
contract_addr
sponsor_key 地址
sponsor_key 账户将会被扣除 40 CFX。
选择 set_sponsor_for_gas 方法，该方法有四个参数：
contract_addr
sponsor_key 地址
sponsor_key 账户将会再次被扣除 40 CFX。
完成这两个方法的调用后 Coin 合约代付账户便设置好了，sponsor_key 账户将为 Coin 合约的手续费和储存费各提供为 40 CFX Token 的代付服务。由于目前代付白名单中并没有账户地址，因此还需要添加白名单地址才能完成代付设置。
在 Coin 合约中集成了设置代付白名单的方法，通过调用此方法可以添加或删除代付白名单。
在 Conflux Studio 中访问 contract_addr 合约，选择 add_privilege 方法：
minter_key 地址
minter_key 地址
运行后就成功设置了代付白名单了，至此 Coin 合约的代付功能设置好了。
在进行代付测试前，先查询并记录下 minter_key 账户的 CFX 余额。例如本教程中，minter_key 的初始余额为 97.6210937497093952 CFX。
回到 Coin 合约调用页面，再次调用 mint 方法并使用 minter_key 地址增发代币 1000，完成代币增发后再次查询 minter_key 的余额，仍然为 97.6210937497093952 CFX。
可以看到增发代币的这笔交易，原本应该由 minter_key 账户支付的手续费，变成了由 sponsor_key 账户支付。
前端项目源码可以前往 Conflux 前端。
git clone https://github.com/ObsidianLabs/conflux-frontend-react
npm install 或者 yarn 进行项目依赖安装
Conflux Portal 是由 Conflux 提供的浏览器插件，目前提供了 Chrome 及 Firefox 的支持，用户可以使用 Conflux Portal 进行私钥的管理以及交易签名。
前往 Conflux Portal GitHub 下载安装。项目的源代码在 GitHub 中可以找到。
在这里需要将 Conflux Studio 中生成的地址导入到 Conflux Portal 中。完成插件安装后，在 Conflux Portal 的页面中选择 Import，将 Conflux Studio 中的 minter_key 的私钥（在创建钱包章节中介绍了如何将私钥导出）粘贴到输入框中，点击 Import 按钮完成私钥导入。
在运行项目之前，需要修改一些默认的环境变量。
在前面的教程中部署合约后会生成一个 contractCreated，这个值便是部署在网络中智能合约的地址。打开项目根目录并找到 .env 文件，这个文件提供了项目的环境变量，将 REACT_APP_CONFLUX_COIN_ADDRESS 的值修改为 contract_addr。
使用 yarn start 启动前端项目，开发服务器运行起来后会在浏览器中打开前端页面（如果没有打开，请在浏览器中访问 http://localhost:3000）。
项目运行起来后，页面将显示四个卡片信息，分别为
点击右上角组件中的 Connect to Conflux Portal 按钮，Conflux Portal 页面将被打开，输入密码和选择账户后完成连接。连接成功后，将会在按钮下看到当前连接的账户地址以及账户中的 CFX 余额。
左下角的组件为 Coin 合约组件，可以通过这个组件调用代币增发和代币转账功能。
代币增发：选择 mint 方法并在 receiver 中填入增发地址 minter_key 地址和在 amount 中填入增发代币的数量 100，点击 Push Transaction，在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。
代币转账：选择 send 方法并在 receiver 中填入收款人地址 receiver_key 地址和在 amount 中转账代币的数量 20，点击 Push Transaction，在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。
选择 balanceOf 方法并在 tokenOwner 输入框中填入查询的地址，点击 Query Data 按钮可以查询到账户的余额。
选择 Sent 事件并点击 Query Data 可以查询到转账操作所触发的转账事件的记录。
项目使用 React 进行开发。主要由三大部分组成：视图组件、js-conflux-sdk 以及 Conflux Portal。
项目根目录下的 .env 环境变量，在这里定义了两个环境变量，分别为
REACT_APP_CONFLUX_NODE_RPC：Conflux 的网络节点地址，目前默认为 Oceanus 网络的地址
REACT_APP_CONFLUX_COIN_ADDRESS：已部署的 Coin 智能合约地址
视图组件在项目的 src/components 中，其中 App.js 为页面的主入口，负责页面的排列及合约信息的读取。
负责渲染 Conflux 网络信息，Node URL 的值为 .env 环境变量文件下的 REACT_APP_CONFLUX_NODE_RPC 设置的值（默认为 Oceanus 网络）。
负责渲染 Conflux Portal 的连接信息，并提供了连接 Conflux Portal 的交互按钮。
connectConfluxPortal 调用 Conflux Portal 的 enable 方法启用 conflux （conflux portal 实例由浏览器插件注入到 windows.portal 中），完成 enable 后调用 getAccount 方法获取到 Portal 中的账户。
refreshBalance 调用 Conflux SDK 的 getBalance 方法来更新账户余额信息
renderPortalButton 根据当前不同的状态，渲染连接 Portal 的按钮
负责渲染 Conflux 合约信息，本项目中提供了 Coin 和 SponsorWhitelistControl 两个合约。
ConfluxContract.js 由三个组件组成，分别为：
ConfluxContract 负责根据传入的合约 abi 来渲染合约的信息，包括合约地址、合约方法和事件，合约提交的交互逻辑及显示执行后的结果
ContractMethods 负责渲染合约 abi 中的方法和事件的表单及相对应的按钮
ConfluxForm 负责根据方法或事件的 abi 来渲染输入表单
lib 在项目的 src/lib 中，这里的文件主要是为视图提供包括连接网络、构造交易、获取账户、读取合约等服务。
conflux.js 是 js-conflux-sdk 的封装。js-conflux-sdk 是由 Conflux 提供的 JavaScript SDK，本前端项目使用 SDK 来连接 Conflux 网络，和合约进行交互以及构造合约中的实例。
conflux-portal.js 是 Conflux Portal 的封装，本前端项目通过调用浏览器插件来完成交易的签名。调用 Conflux Portal 提供的 enable 方法可以启动项目和 Conflux Portal 的连接（需要提前检查浏览器是否正确安装插件，在 constructor 中通过检查 window.conflux 是否为空来判断）。conflux-portal.js 提供了获取账户 getAccount 和发送交易 sendTransaction 两个主要的方法。
lib/abi 文件夹下提供了两个 json 文件，分别为 Coin.json 和 SponsorWhitelistControl.json，这两个文件是构造合约所需要使用的 abi 文件。
在本开发教程中，我们学习了如何使用 Conflux Studio 来完成一个完整的 Coin DApp 开发，其中包括了：
Conflux 基金会为了鼓励用户参与生态建设，提供了 Conflux Bounty 赏金平台。通过完成 Bounty 赏金平台发布的各项任务，参与者可以获得 FC (Fans Token) 作为奖励。
FC，全称 Fans Coin，是由 Conflux 基金会与社区成员共同研发的生态代币，用于记录和感谢对 Conflux 生态建设做出贡献的社区成员。FC 目前在 Oceanus 上运行，Conflux 基金会承诺，在主网上线后，锁定和未锁定的 FC 都可以与主网 CFX 进行 1:1 承兑，以此保障所有社区成员的劳动成果都可以获得奖励。
FC 赏金分配方案会展示在赏金任务详情页中，包括最高奖金数量、奖金分配人数、奖金数量分布、排行名次确定方式等信息。账号余额中的赏金奖励可以随时申请提现至 Conflux 钱包。Conflux 团队会对所有的提现申请进行审核。
对于已经通过的提现申请，Conflux 团队会在每周二中午 12 点（如遇节假日，往后顺延至下一个工作日）进行提币操作。完成提币操作后，您的 Conflux 钱包将会收到您提现的赏金奖励。
Conflux Bounty (https://bounty.conflux-chain.org) 的宗旨是为每一个通证找到价值。Bounty 分为几个板块：技术、品牌、社群、资源、其他等。
黑曜石实验室（Obsidian Labs) 是全球最大的区块链开发工具（IDE）提供商，也是 Conflux Studio 的开发团队，致力于为区块链开发者提供必备的工具及服务，帮助链上应用生态快速发展。目前，除了 Conflux Studio 外，Obsidian Labs 还为 EOS、Nervos、Substrate、Alogorand 等明星项目提供了专属的 IDE 和框架工具。
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
原文链接：https://blog.csdn.net/weixin_45029854/article/details/107638406
作者：Sam @黑曜石实验室
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
web3.js是以太坊提供的一个Javascript库，它封装了以太坊的JSON RPC API，提供了一系列与区块链交互的Javascript对象和函数，包括查看网络状态，查看本地账户、查看交易和区块、发送交易、编译/部署智能合约、调用智能合约等，其中最重要的就是与智能合约交互的API。
下面就介绍如何使用web3.js提供的接口调用智能合约。
系统和软件
-
Ubuntu 16.04 64位
-
nodejs 6.10.0
-
npm 3.10.10
示例合约
本文以下面的MetaCoin合约为例，说明在应用中使用web3.js操作智能合约的方法。
-
// 本文中用到的MetaCoin合约
-
pragma solidity ^0.4.2;
-
-
contract MetaCoin {
-
mapping (address => uint) balances;
-
-
event Transfer(address indexed _from, address indexed _to, uint256 _value);
-
-
function MetaCoin() {
-
balances[tx.origin] = 10000;
-
}
-
-
function sendCoin(address receiver, uint amount) returns(bool sufficient) {
-
if (balances[msg.sender] < amount) return false;
-
balances[msg.sender] -= amount;
-
balances[receiver] += amount;
-
Transfer(msg.sender, receiver, amount);
-
return true;
-
}
-
-
function getBalance(address addr) returns(uint) {
-
return balances[addr];
-
}
-
}
这个合约有三个函数：
MetaCoin：构造函数，在合约被部署到区块链时执行
getBalance：返回某账户的余额，它只读数据，不会修改数据
sendCoin：向另一个账户发送指定数量的MetaCoin，它会改变状态变量balances
启动一个以太坊节点，将上面的合约部署到区块链中，并记录下合约的地址，可以通过truffle部署，具体参考这篇文章。 接下来就可以按照下面的步骤在项目中通过web3.js来使用这个合约。
添加web3到项目中
首先新建一个Nodejs项目并初始化：
-
$ mkdir web3test && cd web3test
-
$ npm init
会提示输入项目信息，全部默认即可。
接下来下载web3.js到项目中：
$ npm install web3 --save 以上命令会将web3.js下载到web3test/node_modules目录下，其中–save参数会web3.js添加到package.json配置文件中。
创建web3对象
要使用web3.js与区块链交互，需要先创建web3对象，然后连接到以太坊节点。 在web3test目录下新建index.js文件，在其中输入以下代码：
-
var Web3 = require("web3");
-
// 创建web3对象
-
var web3 = new Web3();
-
// 连接到以太坊节点
-
web3.setProvider(new Web3.providers.HttpProvider("http://localhost:8545"));
获取已部署的合约实例
要使用智能合约，必须先从区块链中获取到合约实例，获取合约实例需要合约的ABI和合约的地址：
-
// 合约ABI
-
var abi = [{"constant":false,"inputs":[{"name":"receiver","type":"address"},{"name":"amount","type":"uint256"}],"name":"sendCoin","outputs":[{"name":"sufficient","type":"bool"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"addr","type":"address"}],"name":"getBalance","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"inputs":[],"payable":false,"type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_from","type":"address"},{"indexed":true,"name":"_to","type":"address"},{"indexed":false,"name":"_value","type":"uint256"}],"name":"Transfer","type":"event"}];
-
// 合约地址
-
var address = "0xb2cdd356e58280906ce53e1665697b50f88aac56";
-
// 通过ABI和地址获取已部署的合约对象
-
var metacoin = web3.eth.contract(abi).at(address);
metacoin就是获取到的合约对象实例，此时metacoin对象中就包含了与合约函数同名的Javascript函数，之后就可以通过metacoin对象来调用合约中的函数了。
调用合约函数
MetaCoin合约中有两个函数：getBalance和sendCoin，可以通过metacoin对象直接调用这两个函数。
首先来看getBalance，由于getBalance函数只是从区块链中读数据，而不修改数据，因此我们通过在getBalance后面加上.call()的方式调用：
-
var account_one = web3.eth.accounts[0];
-
var account_one_balance = metacoin.getBalance.call(account_one);
-
console.log("account one balance: ", account_one_balance.toNumber());
这里：
在getBalance后加上.call()来显式指明用call的方式调用
通过call的方式调用可以得到getBalance函数的返回值
通过call的方式调用的函数只在节点本地虚拟机中执行，不会产生交易，不会花费费用，不会修改数据
下面来看sendCoin函数，由于sendCoin要修改合约内部的数据，所以要使sendCoin生效，必须要向区块链发送交易，可以在sendCoin后面加上.sendTransaction()来指明这是一笔交易：
-
var account_one = web3.eth.accounts[0];
-
var account_two = web3.eth.accounts[1];
-
// 提交交易到区块链，会立即返回交易hash，但是交易要等到被矿工收录到区块中后才生效
-
var txhash = metacoin.sendCoin.sendTransaction(account_two, 100, {from:account_one});
-
console.log(txhash);
这里：
在sendCoin函数后加上.sendTransaction()指明要向区块链发送交易
合约代码中sendCoin函数只有两个参数，而在web3中通过.sendTransaction()调用合约函数的时候需要增加最后一个参数，它是一个javascript对象，里面可以指定from/value/gas等属性，上面的例子用from来指定交易的发送者
上面的调用语句执行后，会向区块链提交一笔交易，这笔交易的发送者是account_one，接收者是metacoin的地址，交易的作用是以account_two和100作为参数执行合约的sendCoin函数
函数会立即返回交易的hash，表明交易已经提交到区块链，但是并不知道交易何时处理完成，交易要等到被旷工收录到区块中后才会生效
监听合约事件
当通过.sendTransaction()调用合约的时候，交易会被提交到区块链进行处理，这个处理需要一定的时间，如果需要等交易完成之后再执行其他操作，就必须要知道交易何时完成，那么如何知道交易何时完成呢？可以通过监听合约事件来实现。
在合约中可以定义事件，事件可以带有参数，在合约函数内部完成某些操作时，可以触发事件，向外界传达一些信息。例如，在MetaCoin合约中定义了一个事件叫做Transfer，表示一个转账的事件，它带有三个参数：交易的发送者、接受者、转账数量。在sendCoin函数中，转账成功后就会触发Transfer事件，将对应的参数传给该事件，这样外部监听到事件后，可以取出事件的参数来获得交易发送者、接收者、数量。同时事件中还带有其他信息，比如交易hash等。
在web3中使用事件，要首先获取事件对象，然后监听事件，如果事件发生，就会在回调函数中获取到事件信息：
-
// 获取事件对象
-
var myEvent = metacoin.Transfer();
-
// 监听事件，监听到事件后会执行回调函数
-
myEvent.watch(function(err, result) {
-
if (!err) {
-
console.log(result);
-
} else {
-
console.log(err);
-
}
-
myEvent.stopWatching();
-
});
-
-
// 输出：
-
{ address: '0xb2cdd356e58280906ce53e1665697b50f88aac56',
-
blockNumber: 651,
-
transactionIndex: 0,
-
transactionHash: '0xcc71bc2824cc84d1ee831c46189e3a80cf0af05697ba0370693aa97390c8067b',
-
blockHash: '0x1d53f04206f3926d0f311b1230a9dd0b0c5aadac35b169a6a609e384ab130c6f',
-
logIndex: 0,
-
removed: false,
-
event: 'Transfer',
-
args:
-
{ _from: '0x68b73956d704007514e9257813bdc58cdf3c969a',
-
_to: '0x9c3c1a2f5ef913fac44f0348a78f68d835f3f26e',
-
_value: { [String: '100'] s: 1, e: 2, c: [Object] } } }
从输出可以看出，获取到的事件信息包括事件的参数、事件名、区块号、交易hash等。
通过检测事件中的transactionHash与调用合约函数返回的交易hash是否一致，可以判定某一笔交易是否已完成：
-
var account_one = web3.eth.accounts[0];
-
var account_two = web3.eth.accounts[1];
-
-
var account_one_balance = metacoin.getBalance.call(account_one);
-
console.log("account one balance:", account_one_balance.toNumber());
-
-
var txhash = metacoin.sendCoin.sendTransaction(account_two, 100, { from: account_one });
-
-
var myEvent = metacoin.Transfer();
-
myEvent.watch(function (err, result) {
-
if (!err) {
-
if (result.transactionHash == txhash) {
-
var account_one_balance = metacoin.getBalance.call(account_one);
-
console.log("account one balance after sendCoin:", account_one_balance.toNumber());
-
}
-
} else {
-
console.log(err);
-
}
-
myEvent.stopWatching();
-
});
-
-
// 输出：
-
account one balance: 7000
-
account one balance after sendCoin: 6900
watch中的回调函数如果被执行，说明事件已被触发，也就是说某笔交易已经处理完，检查交易hash是否一致，可以判定产生这个事件的交易是否是自己发送的交易，如果是，就可以进行其他操作，比如查询最新的余额
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这篇文章多看几遍加深理解
async function 声明定义了一个异步函数，它返回一个AsyncFunction对象。异步函数 是指通过 事件循环（event loop） 异步执行的函数，通过返回一个隐式的 Promise 作为其结果。使用异步函数的代码的语法和结构更像使用标准同步功能。（The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.
）
async function name([param[, param[, ... param]]]) { statements }
参数：
返回值：返回一个promise对象，将返回异步函数返回的值（如果异步函数是resolved则返回resolved的值；如果抛出异常，则rejected从异步函数中抛出的异常）。（A Promise which will be resolved with the value returned by the async function, or rejected with an uncaught exception thrown from within the async function.）
异步函数可以包含await表达式，该表达式暂停异步函数的执行 并等待 Promise的执行结果返回，结果返回后就恢复异步函数的执行。
await 关键字只在异步函数（async functions）内有效。如果在异步函数外使用它，会抛出语法错误。
当异步函数暂停时，它调用的函数仍会继续执行。
举例一：
function resolveAfter5Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 5000); }); } async function asyncCall() { console.log('calling'); let result = await resolveAfter5Seconds(); console.log(result); // 5s之后输出结果 } asyncCall(); //返回的是一个promise对象 // console.log(asyncCall()); // Promise { <pending> }
运行效果：
举例二：
let resolveAfter6Second = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Second = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let sequentialStart = async function () { console.log('sequential start'); const slow = await resolveAfter6Second(); console.log(slow); const fast = await resolveAfter4Second(); console.log(fast); } sequentialStart() //立即输出 // sequential start // start slow promise //再过6秒后输出 // slow promise is done // slow // start fast promise //再过4秒后输出 // fast promise is done // fast
运行效果：
换一种await的写法，结果完全不同：两个计时器被同时创建
let resolveAfter6Seconds = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Seconds = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let concurrentStart = async function () { console.log('concurrent start'); let slow = resolveAfter6Seconds(); let fast = resolveAfter4Seconds(); console.log(await slow); console.log(await fast); } setTimeout(() => { concurrentStart(); }, 2000); //2秒后执行 // concurrent start // start slow promise // start fast promise //再过4秒后执行 // fast promise is done //再过2秒后执行 // slow promise is done // slow // fast
运行效果：
在 concurrentStart 中，两个计时器被同时创建，接着执行await。等待的是 promise的resolve回调，resolve后面的代码（ console.log(‘fast promise is done’);）会继续执行。
这两个计时器同时运行。但是 await 仍旧是顺序执行的，第二个 await 还是得等待第一个执行完。在这个例子中，这使得先运行结束的输出出现在最慢的输出之后。
也可以把 concurrentStart 改写成如下，运行效果一样：
let resolveAfter6Seconds = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Seconds = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let concurrentPromise = async function () { console.log('concurrent start'); return Promise.all([resolveAfter6Seconds(), resolveAfter4Seconds()]).then((messages) => { console.log(messages[0]); // slow console.log(messages[1]); // fast }); } setTimeout(() => { concurrentPromise(); }, 2000); //2秒后输出 // concurrent start // start slow promise // start fast promise //再过6秒后输出 // fast promise is done //再过2秒后输出 // slow promise is done // slow // fast
并行执行两个或更多的任务，如下例所示：
let resolveAfter6Seconds = function () { console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }) } let resolveAfter4Seconds = function () { console.log('start fast promise'); return new Promise(resolve => { setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let parallel = async function () { console.log('start paralel'); await Promise.all([ (async () => console.log(await resolveAfter6Seconds()))(), (async () => console.log(await resolveAfter4Seconds()))() ]); } setTimeout(parallel, 2000); //2秒后输出 // start paralel // start slow promise // start fast promise //再过4秒后输出 // fast promise is done // fast //再过2秒后输出 // slow promise is done // slow
运行效果：
如果希望并行执行两个或更多的任务，你必须像在parallel中一样使用await Promise.all([job1(), job2()])
也可以把parallel改写成如下，运行效果一样：
let resolveAfter6Seconds = function(){ console.log('start slow promise'); return new Promise(resolve => { setTimeout(() => { resolve('slow'); console.log('slow promise is done'); }, 6000); }); } let resolveAfter4Seconds = function(){ console.log('start fast promise'); return new Promise(resolve =>{ setTimeout(() => { resolve('fast'); console.log('fast promise is done'); }, 4000); }) } let parallelPromise = function(){ console.log('parallelPromise start'); resolveAfter6Seconds().then(msg => console.log(msg)); resolveAfter4Seconds().then(msg => console.log(msg)); } setTimeout(() => { parallelPromise(); }, 2000); //2秒后输出 // parallelPromise start // start slow promise // start fast promise //再过4秒后输出 // fast promise is done // fast //再过2秒后输出 // slow promise is done // slow
async/await和Promise#then对比以及错误处理：
大多数异步函数（async functions ）也可以使用 Promises函数 编写。然而，当涉及到错误处理时，异步函数不太容易出错。
上面例子中的concurrentStart函数和concurrentPromise函数在功能上都是等效的。在concurrentStart函数中，如果任一awaited调用失败，它将自动捕获异常，异步函数执行中断，并通过隐式返回Promise将错误传递给调用者。
在Promise例子中这种情况同样会发生，函数必须负责返回一个捕获函数完成的Promise。在concurrentPromise函数中，这意味着它从Promise.all([]).then()中返回一个Promise。事实上，在此示例的先前版本忘记了这样做！
但是，async函数仍有可能然可能错误地忽略错误。
以parallel异步函数为例。 如果它没有等待await（或 return）Promise.all([])调用的结果，则不会传播任何错误。
虽然parallelPromise函数示例看起来很简单，但它根本不会处理错误！ 这样做需要一个类似于return Promise.all([])处理方式。（详见）
返回 Promise的 API 将会产生一个 promise 链，它将函数分解成许多部分。例如下面的代码：
function getProcessedData(url) { return downloadData(url)// returns a promise .catch(e => { return downloadFallbackData(url);// returns a promise }) .then(v => { return processDataInWorker(v);// returns a promise }) }
可以重写为单个async函数：
async function getProcessedData(url) { let v; try { v = await downloadData(url); } catch (e) { v = await downloadFallbackData(); } return processDataInWorker(v); }
在上述示例中，return 语句中没有 await 操作符，因为 async function 的返回值将被隐式地传递给 Promise.resolve。
return await promiseValue; 与 return promiseValue;的比较
返回值隐式的传递给Promise.resolve，并不意味着return await promiseValue;，只是在功能上等同于返回return promiseValue;。
重写的上面代码，在processDataInWorker抛出异常时返回null：
async function getProcessedData(url) { let v; try { v = await downloadData(url); } catch(e) { v = await downloadFallbackData(url); } try { return await processDataInWorker(v); // 注意 `return await` 和单独 `return` 的比较 } catch (e) { return null; } }
简单地写上return processDataInworker(v);将导致在processDataInWorker(v)出错时function返回值为Promise而不是返回null。
return foo;和return await foo;有一些细微的差异：
return foo;不管foo是promise还是rejects都将会直接返回foo。相反地，如果foo是一个Promise，return await foo;将等待foo执行(resolve)或拒绝(reject)，如果是拒绝，将会在返回前抛出异常。
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一般情况下，this 指向调用他们的那个对象 ,也就是说谁调用就指向谁。
console.log(this);
-
function fn() {
-
console.log(this);
-
};
-
fn();
-
window.setTimeout(function() {
-
console.log(this);
-
-
}, 3000);
-
var idol = {
-
myname: '某某某',
-
age: '18岁',
-
sex: '女',
-
skill: function() {
-
console.log(this);
-
}
-
};
-
idol.skill()
-
var btn = document.querySelector('button');
-
// btn.addEventListener('click', function() {
-
// console.log(this);
-
-
// });
-
btn.onclick = function() {
-
console.log(this);
-
-
};
-
function Fun() {
-
console.log(this);
-
-
}
-
var fun = new Fun();
-
fun.uname = 'Jack';
-
fun.age = '18岁';
-
fun.sex = '男';
-
console.log(fun)
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更改之前的效果图:
更改之前浏览器窗口放大缩小图表都不会进行动态的缩放，
更改之后的效果图：
更改之后图表就会根据浏览器窗口大小实时监听进行缩放
代码：
topChart.setOption({ series: [ {name: '最大值',type: 'line',stack: '最大值',data: dataMax}, {name: '最小值',type: 'line',stack: '最小值',data: dataMin}, {name: '平均值',type: 'line',stack: '平均值',data: dataAvg}, ] }); window.addEventListener("resize",()=> {//监听浏览器窗口大小 topChart.resize(); });
如果有多个图表同时渲染，给个定时器就可以了，ss[0]，ss[1]，ss[2]，ss[3]分别表示四个图表的class
var resizeTimer = null; window.addEventListener("resize", () => { if (resizeTimer) { clearTimeout(resizeTimer) } resizeTimer = setTimeout(function(){ ss[0].resize(); ss[1].resize(); ss[2].resize(); ss[3].resize(); }, 10); });
没了，结束了，是不是很简单呐，如有问题，欢迎留言。
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
vue文件最后要空一行，不然会报错，真的奇葩…
这里要清楚哦！
通过Element-UI组件实现布局
在vscode打开终端ctrl+~
git status 查看当前git状态
git checkout -b login 创建一个新的分支叫login
git branch 切换分支
在vue ui中启动！
终端指令npm run serve也可以运行！
import Vue from 'vue' import VueRouter from 'vue-router' import login from './components/login.vue' Vue.use(VueRouter) const routes = [ {path:'/login',component:login} ] const router = new VueRouter({ routes }) export default router
const router = new VueRouter({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: login } ] })
一定要注意空格，不然会报错，可恶啊！
先给一个全局样式表
/* 全局样式表 */ html, body, #app{ height: 100%; margin: 0; padding: 0; }
并在main.js中导入
import './assets/css/global.css'
注意：translate 进行移动，完成真正的居中
.login_box{ width: 450px; height: 300px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.avatar_box{ height: 130px; width: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0px 0px 10px #ddd; position: absolute; left: 50%; transform: translate(-50%,-50%); background-color: #fff;
img{ width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } }
通过Element-UI组件实现布局
elements组件库网页
在网站里面可以找到一些可以使用的基础模板代码
导入组件
import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'//分开import会报错
Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input)
中间form和button都是直接到上面的组件库里面去找的
中间一些代码不贴了，比较枯燥呀
特别地，我们的小图标是从阿里的icon库里面下载的
具体用法见以前写得一篇博客
阿里巴巴icon图标尽在掌握(前端如何引入icon库,美丽图标随你处置T.T)
// 这是表单的验证规则对象 loginFormRules: { // 验证用户名是否合法 username: [ { required: true, message: '请输入登录名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], // 验证密码是否合法 password: [ { required: true, message: '请输入登录密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' } ] }
this.$refs.loginFormRef.resetFields()来重置表单，注意表单的值会变为data里面设置的初值
this.$refs.loginFormRef.validate()
import axios from 'axios' // 配置请求的根路径 axios.defaults.baseURL = 'https://127.0.0.1:8888/api/private/v1/' Vue.prototype.$http = axios
this.$refs.loginFormRef.validate(async valid => { if (!valid) return const { data: res } = await this.$http.post('login', this.loginForm) console.log(res) if (res.meta.status !== 200) return console.log('登录失败') console.log('登录成功') })
Vue.prototype.$message = Message // 挂载到了Vue上
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com