AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

使用 Solidity、Web3 和 Vue.js 创建区块链游戏

2022-07-01 656
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 使用以太坊区块链构建去中心化游戏，游戏主题为三英占吕布，选择其中的角色铸造 NFT 与吕布进行战斗，通过简单的游戏规则逐步了解使用以太坊公共区块链创建去中心化游戏的方法

使用以太坊区块链构建去中心化游戏，游戏主题为三英占吕布，选择其中的角色铸造 NFT 与吕布进行战斗，通过简单的游戏规则逐步了解使用以太坊公共区块链创建去中心化游戏的方法：

  • 编写智能合约语言：Solidity，一种用于实现智能合约的面向对象的高级语言。
  • Hardhat：
  • Vue.js
  • Ethers.js：凭借其易用性和丰富的功能， Ethers.js 甚至超越了之前被称为 ETH 第一库的 web3.js。这个通用的以太坊库与 Parity、Geth、Crowdsale 等流行的钱包完美配合。

文章涉及的代码地址：github.com/QuintionTan…

Solidity

对于 Solidity 的初学者，可以关注 buildspace 上的教程。

这里智能合约需要完成用户角色创建，铸造选择的角色，然后用它来对抗 BOSS。

开始构建

打开一个终端并使用以下命令在项目文件夹中创建一个文件夹：

mkdir vue-game-dapp

进入创建的项目文件夹：

cd vue-game-dapp

运行以下命令来初始化项目信息：

npm init

填写项目信息，并安装相关依赖：

npm install @openzeppelin/contracts --save
npm install hardhat chai @nomiclabs/hardhat-waffle @nomiclabs/hardhat-ethers ethers ethereum-waffle --save-dev

现在编写智能合约，在项目根目录下创建智能合约文件夹 contracts ：

mkdir contracts

在 contracts 文件夹中创建一个新文件并将其命名为 EpicGame.sol，并在其中写入以下代码：

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

这始终是智能合约文件中的第一行，用来指定 solidity 的版本。现在来编写代码制作完整的游戏智能合约 EpicGame ：

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/utils/Strings.sol";
import "./libraries/Base64.sol";
import "hardhat/console.sol";
contract EpicGame is ERC721 {
    struct CharacterAttributes {
        uint256 characterIndex;
        string name;
        string imageURI;
        uint256 hp;
        uint256 maxHp;
        uint256 attackDamage;
    }
    struct BigBoss {
        string name;
        string imageURI;
        uint256 hp;
        uint256 maxHp;
        uint256 attackDamage;
    }
    BigBoss public bigBoss;
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;
    CharacterAttributes[] defaultCharacters;
    mapping(uint256 => CharacterAttributes) public nftHolderAttributes;
    mapping(address => uint256) public nftHolders;
    event CharacterNFTMinted(
        address sender,
        uint256 tokenId,
        uint256 characterIndex
    );
    event AttackComplete(uint256 newBossHp, uint256 newPlayerHp);
    constructor(
        string[] memory characterNames,
        string[] memory characterImageURIs,
        uint256[] memory characterHp,
        uint256[] memory characterAttackDmg,
        string memory bossName,
        string memory bossImageURI,
        uint256 bossHp,
        uint256 bossAttackDamage
    ) ERC721("Heroes", "HERO") {
        for (uint256 i = 0; i < characterNames.length; i += 1) {
            defaultCharacters.push(
                CharacterAttributes({
                    characterIndex: i,
                    name: characterNames[i],
                    imageURI: characterImageURIs[i],
                    hp: characterHp[i],
                    maxHp: characterHp[i],
                    attackDamage: characterAttackDmg[i]
                })
            );
            CharacterAttributes memory c = defaultCharacters[i];
            console.log(
                "Done initializing %s w/ HP %s, img %s",
                c.name,
                c.hp,
                c.imageURI
            );
        }
        bigBoss = BigBoss({
            name: bossName,
            imageURI: bossImageURI,
            hp: bossHp,
            maxHp: bossHp,
            attackDamage: bossAttackDamage
        });
        console.log(
            "Done initializing boss %s w/ HP %s, img %s",
            bigBoss.name,
            bigBoss.hp,
            bigBoss.imageURI
        );
        _tokenIds.increment();
    }
    function mintCharacterNFT(uint256 _characterIndex) external {
        uint256 newItemId = _tokenIds.current();
        _safeMint(msg.sender, newItemId);
        nftHolderAttributes[newItemId] = CharacterAttributes({
            characterIndex: _characterIndex,
            name: defaultCharacters[_characterIndex].name,
            imageURI: defaultCharacters[_characterIndex].imageURI,
            hp: defaultCharacters[_characterIndex].hp,
            maxHp: defaultCharacters[_characterIndex].hp,
            attackDamage: defaultCharacters[_characterIndex].attackDamage
        });
        console.log(
            "Minted NFT w/ tokenId %s and characterIndex %s",
            newItemId,
            _characterIndex
        );
        nftHolders[msg.sender] = newItemId;
        _tokenIds.increment();
        emit CharacterNFTMinted(msg.sender, newItemId, _characterIndex);
    }
    function attackBoss() public {
        uint256 nftTokenIdOfPlayer = nftHolders[msg.sender];
        CharacterAttributes storage player = nftHolderAttributes[
            nftTokenIdOfPlayer
        ];
        console.log(
            "\nPlayer w/ character %s about to attack. Has %s HP and %s AD",
            player.name,
            player.hp,
            player.attackDamage
        );
        console.log(
            "Boss %s has %s HP and %s AD",
            bigBoss.name,
            bigBoss.hp,
            bigBoss.attackDamage
        );
        require(player.hp > 0, "Error: character must have HP to attack boss.");
        require(bigBoss.hp > 0, "Error: boss must have HP to attack boss.");
        if (bigBoss.hp < player.attackDamage) {
            bigBoss.hp = 0;
        } else {
            bigBoss.hp = bigBoss.hp - player.attackDamage;
        }
        if (player.hp < bigBoss.attackDamage) {
            player.hp = 0;
        } else {
            player.hp = player.hp - bigBoss.attackDamage;
        }
        console.log("Boss attacked player. New player hp: %s\n", player.hp);
        emit AttackComplete(bigBoss.hp, player.hp);
    }
    function checkIfUserHasNFT()
        public
        view
        returns (CharacterAttributes memory)
    {
        uint256 userNftTokenId = nftHolders[msg.sender];
        if (userNftTokenId > 0) {
            return nftHolderAttributes[userNftTokenId];
        } else {
            CharacterAttributes memory emptyStruct;
            return emptyStruct;
        }
    }
    function getAllDefaultCharacters()
        public
        view
        returns (CharacterAttributes[] memory)
    {
        return defaultCharacters;
    }
    function getBigBoss() public view returns (BigBoss memory) {
        return bigBoss;
    }
    function tokenURI(uint256 _tokenId)
        public
        view
        override
        returns (string memory)
    {
        CharacterAttributes memory charAttributes = nftHolderAttributes[
            _tokenId
        ];
        string memory strHp = Strings.toString(charAttributes.hp);
        string memory strMaxHp = Strings.toString(charAttributes.maxHp);
        string memory strAttackDamage = Strings.toString(
            charAttributes.attackDamage
        );
        string memory json = Base64.encode(
            bytes(
                string(
                    abi.encodePacked(
                        '{"name": "',
                        charAttributes.name,
                        " -- NFT #: ",
                        Strings.toString(_tokenId),
                        '", "description": "This is an NFT that lets people play in the game", "image": "',
                        charAttributes.imageURI,
                        '", "attributes": [ { "trait_type": "Health Points", "value": ',
                        strHp,
                        ', "max_value":',
                        strMaxHp,
                        '}, { "trait_type": "Attack Damage", "value": ',
                        strAttackDamage,
                        "} ]}"
                    )
                )
            )
        );
        string memory output = string(
            abi.encodePacked("data:application/json;base64,", json)
        );
        return output;
    }
}

合约引用了 Base64.sol ，用于将数据编码为 Base64 字符串。

测试

在部署之前，先来测试合约以确保可以逻辑都是正确的。在项目根目录中创建文件夹 test ,此文件夹可以包含客户端测试和以太坊测试。

在 test 文件夹中添加 test.js 文件，该文件将在一个文件中包含合约测试。

const { expect } = require("chai");
const { ethers } = require("hardhat");
describe("EpicGame", function () {
    let gameContract;
    before(async () => {
        const gameContractFactory = await ethers.getContractFactory("EpicGame");
        gameContract = await gameContractFactory.deploy(
            ["刘备", "关羽", "张飞"],
            [
                "https://resources.crayon.dev/suangguosha/liubei.png",
                "https://resources.crayon.dev/suangguosha/guanyu.png",
                "https://resources.crayon.dev/suangguosha/zhangfei.png",
            ],
            [100, 200, 300],
            [100, 50, 25],
            "吕布",
            "https://resources.crayon.dev/suangguosha/lvbu.png", // boss
            1000,
            50
        );
        await gameContract.deployed();
    });
    it("Should have 3 default characters", async () => {
        let characters = await gameContract.getAllDefaultCharacters();
        expect(characters.length).to.equal(3);
    });
    it("Should have a boss", async () => {
        let boss = await gameContract.getBigBoss();
        expect(boss.name).to.equal("吕布");
    });
});

然后在项目根目录下执行脚本：

npx hardhat test

选择创建 Create an empty hardhat.config.js：

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
require("@nomiclabs/hardhat-waffle");
const config = {
    alchemy: "9aa3d95b3bc440fa88ea12eaa4456161", // 测试网络token
    privateKey: "", // 钱包私钥
};
module.exports = {
    solidity: "0.8.4",
    networks: {
        ropsten: {
            url: `https://ropsten.infura.io/v3/${config.alchemy}`,
            accounts: [config.privateKey],
            chainId: 3,
        },
    },
};

再次执行：

npx hardhat test

部署（到 Ropsten 测试网络）

在项目根目录下创建文件夹 scripts，然后在文件夹中创建文件 deploy.js 将从合约的构造函数中创建 3 个默认角色和一个 Boss 。

const main = async () => {
    const gameContractFactory = await hre.ethers.getContractFactory("EpicGame");
    const gameContract = await gameContractFactory.deploy(
        ["刘备", "关羽", "张飞"],
        [
            "https://resources.crayon.dev/suangguosha/liubei.png",
            "https://resources.crayon.dev/suangguosha/guanyu.png",
            "https://resources.crayon.dev/suangguosha/zhangfei.png",
        ],
        [100, 200, 300],
        [100, 50, 25],
        "吕布",
        "https://resources.crayon.dev/suangguosha/lvbu.png", // boss
        1000,
        50
    );
    const [deployer] = await ethers.getSigners();
    console.log("Deploying contracts with the account: ", deployer.address);
    console.log("Account balance: ", (await deployer.getBalance()).toString());
    await gameContract.deployed();
    console.log("Contract deployed to: ", gameContract.address);
};
const runMain = async () => {
    try {
        await main();
        process.exit(0);
    } catch (error) {
        console.log(error);
        process.exit(1);
    }
};
runMain();

要部署合约，请在项目根目录下运行命令：

npx hardhat run scripts/deploy.js --network ropsten

执行完成之后可以看到结果：

Deploying contracts with the account:  0xDC13b48Cf2a42160f820A255Ad79B39E695C0c84
Account balance:  4807257090844068484
Contract deployed to:  0x0006544b9c915Ab3cb0e8aC5d21000E4a4ABE746

到此完成了智能合约部分，下面开始使用 VUE 创建前端交互界面。

VUE 部分

从创建项目开始：

vue create game

选择 vue2 ，前端部分还将使用 ethers 进行 Web3 交互，使用 Vuex 进行状态管理，安装相关依赖：

npm install --save vuex ethers

好了，现在项目准备开始了，前端应用程序 VUE 部分需要完成以下功能：

  • 连接用户的钱包
  • 选择一个角色
  • 角色和吕布较量

连接钱包

为了让用户与应用程序交互，必须安装 Metamask 并选择 Ropsten 网络。

打开 App.vue  文件，创建一个带链接的按钮，它将在 Metamask 中打开一个提示，以允许应用程序选择用户钱包：

<template>
    <div class="app" id="app">
        <div class="container mx-auto">
            <div class="header-container">
                <p class="header gradient-text">
                    ⚔️ Metaverse Slayer 元宇宙杀手 ⚔️
                </p>
                <p class="sub-text">
                    Team up to protect the Metaverse! 齐心协力保护元宇宙
                </p>
                <div class="connect-wallet-container">
                    <img
                        src="<https://64.media.tumblr.com/tumblr_mbia5vdmRd1r1mkubo1_500.gifv>"
                        alt="Monty Python Gif"
                    />
                    <button
                        class="cta-button connect-wallet-button"
                        @click="connect"
                    >
                        连接钱包
                    </button>
                </div>
            </div>
            <div class="footer-container">
                <img
                    alt="Twitter Logo"
                    class="twitter-logo"
                    src="./assets/twitter-logo.svg"
                />
                <a
                    class="footer-text"
                    :href="twitter_link"
                    target="_blank"
                    rel="noreferrer"
                    >built by @{{ twitter_handle }}</a
                >
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "App",
    data() {
        return {
            twitter_handle: "DevPointCn",
            twitter_link: "<https://twitter.com/DevPointCn>",
        };
    },
    methods: {
        async connect() {
            await this.$store.dispatch("connect", true);
        },
    },
    async mounted() {
        await this.$store.dispatch("connect", false);
    },
};
</script>

连接按钮有一个点击事件，它将向 Vuex Store 发送一个事件，下面是 Store 的结构：

import Vue from "vue";
import Vuex from "vuex";
import { ethers } from "ethers";
import MyEpicGame from "../utils/MyEpicGame.json";
Vue.use(Vuex);
const transformCharacterData = (characterData) => {
    return {
        name: characterData.name,
        imageURI: characterData.imageURI,
        hp: characterData.hp.toNumber(),
        maxHp: characterData.maxHp.toNumber(),
        attackDamage: characterData.attackDamage.toNumber(),
    };
};
export default new Vuex.Store({
    state: {
        account: null,
        error: null,
        mining: false,
        characterNFT: null,
        characters: [],
        boss: null,
        attackState: null,
        contract_address: "0x0006544b9c915Ab3cb0e8aC5d21000E4a4ABE746", // 合约地址
    },
    getters: {
        account: (state) => state.account,
        error: (state) => state.error,
        mining: (state) => state.mining,
        characterNFT: (state) => state.characterNFT
        characters: (state) => state.characters,
        boss: (state) => state.boss,
        attackState: (state) => state.attackState,
    },
    mutations: {
        setAccount(state, account) {
            state.account = account;
        },
        setError(state, error) {
            state.error = error;
        },
        setMining(state, mining) {
            state.mining = mining;
        },
        setCharacterNFT(state, characterNFT) {
            state.characterNFT = characterNFT;
        },
        setCharacters(state, characters) {
            state.characters = characters;
        },
        setBoss(state, boss) {
            state.boss = boss;
        },
        setAttackState(state, attackState) {
            state.attackState = attackState;
        },
    },
    actions: {},
});

数据结构说明：

  • account：存储连接的帐户信息
  • error：异常信息
  • mining：用于检查是否正在挖掘交易的布尔值
  • characterNFT：存储选择的角色信息
  • characters：将保存默认字符的位置
  • boss：与角色战斗的BOSS
  • attackState：攻击 boss 时，交易被挖掘时状态发生变化
  • contract_address：合约地址，当将合约部署到 Ropsten 网络时返回的地址。

并且不要忘记在部署合约后从构建中导入 EpicGame.json，将需要它来使用区块链中的合约进行 web3 调用。

为状态创建了 getter 和 setter。首先，来实现连接操作：

actions: {  
    async connect({ commit, dispatch }, connect) {
        try {
          const { ethereum } = window;
          if (!ethereum) {
            commit("setError", "Metamask not installed!");
            return;
          }
          if (!(await dispatch("checkIfConnected")) && connect) {
            await dispatch("requestAccess");
          }
          await dispatch("checkNetwork");
        } catch (error) {
          console.log(error);
          commit("setError", "Account request refused.");
        }
      },
      async checkNetwork({ commit, dispatch }) {
        let chainId = await ethereum.request({ method: "eth_chainId" });
        const rinkebyChainId = "0x4";
        if (chainId !== rinkebyChainId) {
          if (!(await dispatch("switchNetwork"))) {
            commit(
              "setError",
              "You are not connected to the Rinkeby Test Network!"
            );
          }
        }
      },
      async switchNetwork() {
        try {
          await ethereum.request({
            method: "wallet_switchEthereumChain",
            params: [{ chainId: "0x4" }],
          });
          return 1;
        } catch (switchError) {
          return 0;
        }
      },
      async checkIfConnected({ commit }) {
        const { ethereum } = window;
        const accounts = await ethereum.request({ method: "eth_accounts" });
        if (accounts.length !== 0) {
          commit("setAccount", accounts[0]);
          return 1;
        } else {
          return 0;
        }
      },
      async requestAccess({ commit }) {
        const { ethereum } = window;
        const accounts = await ethereum.request({
          method: "eth_requestAccounts",
        });
        commit("setAccount", accounts[0]);
      },
  }

首先，检查是否安装了 Metamask：

const { ethereum } = window;
if (!ethereum) {
    commit("setError", "Metamask not installed!");
    return;
}

如果一切正常，检查用户是否已经授予应用访问 Metamask 的权限，然后只需要连接帐户，如果没有，则返回 0，即找到的帐户数。这意味着必须向用户请求访问权限：

if (!(await dispatch("checkIfConnected")) && connect) {
    await dispatch("requestAccess");
}

注意：connect 变量知道它是单击按钮还是实际调用它的挂载函数。

在检查了选择的网络之后，如果它不是 Ropsten 网络，发送一个请求来改变它：

await dispatch("checkNetwork");

找到帐户后，将帐户提交给 mutation 以将其保存在状态中：

// in checkIfConnected action
commit("setAccount", accounts[0]);

到此连接相关的操作已完成。

现在将创建一个操作来获取默认字符供用户从智能合约中选择：

async getCharacters({ state, commit, dispatch }) {
    try {
        const connectedContract = await dispatch("getContract");
        const charactersTxn =
            await connectedContract.getAllDefaultCharacters();
        const characters = charactersTxn.map((characterData) =>
            transformCharacterData(characterData)
        );
        commit("setCharacters", characters);
    } catch (error) {
        console.log(error);
    }
}

为了从合约中调用一个函数，需要通过为它创建一个动作来获取合约，然后返回它。提供提供者、合约 abi 和签名者：

async getContract({ state }) {
    try {
        const { ethereum } = window;
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const connectedContract = new ethers.Contract(
            state.contract_address,
            EpicGame.abi,
            signer
        );
        return connectedContract;
    } catch (error) {
        console.log(error);
        console.log("connected contract not found");
        return null;
    }
}

然后可以在智能合约中调用返回默认字符的函数，并在函数的帮助下映射每个字符数据，该函数将字符数据转换为 JavaScript 可用的对象：

const charactersTxn = await connectedContract.getAllDefaultCharacters();
const characters = charactersTxn.map((characterData) =>
    transformCharacterData(characterData)
);

transformCharacterData 函数添加在 Vuex.Store 初始化之上。它将 hp、attackDamage 从 bigNumber 转换为可读数字：

const transformCharacterData = (characterData) => {
    return {
        name: characterData.name,
        imageURI: characterData.imageURI,
        hp: characterData.hp.toNumber(),
        maxHp: characterData.maxHp.toNumber(),
        attackDamage: characterData.attackDamage.toNumber(),
    };
};

前端部分的代码主要是实现游戏的逻辑，选择一个角色铸造英雄NFT，这里不继续对代码进行解读，详见代码仓库：

github.com/QuintionTan…


文章标签：
JavaScript
前端开发
区块链
存储
关键词：
区块链web3
JavaScript游戏
web js
web VUE.js
web游戏
天行无忌
目录
相关文章
代码bug生产队
|
2月前
|
开发框架 JavaScript 前端开发
使用 Node.js 和 Express 构建 Web 应用
【10月更文挑战第2天】使用 Node.js 和 Express 构建 Web 应用
代码bug生产队
100 0
chnjames
|
2月前
|
移动开发 JavaScript 前端开发
💻揭秘！如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心，通过随机生成的颜色矩阵和一个变化点，玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能，包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外，作者展示了使用Vue 3和TypeScript开发的代码实现，带领读者一步步深入了解游戏的逻辑与细节。
chnjames
143 69
我是快乐的嘟嘟
|
29天前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
我是快乐的嘟嘟
29 1
龙大吉
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用：Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展，Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新，为Web应用的构建提供了更多可能。在本篇文章中，我们将探讨Vue.js和Node.js这两大热门技术如何完美结合，构建现代Web应用。
龙大吉
41 4
程序员成长之路
|
1月前
|
人工智能 安全 物联网
区块链技术的未来展望：去中心化金融（DeFi）与Web 3.0的融合
区块链技术的未来展望：去中心化金融（DeFi）与Web 3.0的融合
程序员成长之路
46 0
G0518
|
2月前
|
存储 JavaScript 前端开发
深入探索 Vue.js：构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js：构建现代 Web 应用的利器
G0518
42 1
有路有乔-六月
|
2月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
有路有乔-六月
47 2
奔跑的数据
|
3月前
|
数据采集 存储 JavaScript
Puppeteer的高级用法：如何在Node.js中实现复杂的Web Scraping
在现代Web开发中，数据采集尤为重要，尤其在财经领域。本文以“东财股吧”为例，介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库，支持无头浏览器操作，适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies，可显著提升抓取成功率与效率，并以示例代码展示具体实现过程，为数据分析提供有力支持。
奔跑的数据
146 2
Puppeteer的高级用法：如何在Node.js中实现复杂的Web Scraping
有路有乔-六月
|
2月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
有路有乔-六月
26 1
代码bug生产队
|
2月前
|
JavaScript 前端开发 开发者
前端开发趋势：从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势：从Web Components到Vue.js
代码bug生产队
26 1

热门文章

最新文章

  • 1
    Node.js 的事件驱动机制
  • 2
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 3
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 4
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 5
    js+jquery实现贪吃蛇经典小游戏
  • 6
    在 golang 中执行 javascript 代码的方案详解
  • 7
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 8
    Node.js 的性能
  • 9
    基于SVG的js圆形菜单插件
  • 10
    如何使用内存快照分析工具来分析Node.js应用的内存问题？
  • 1
    vue3使用pinia中的actions，需要调用接口的话
    21
  • 2
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
    66
  • 3
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
    30
  • 4
    Vue3中使用provide/inject来避免v-model的循环引用
    38
  • 5
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
    33
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
    129
  • 7
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
    51
  • 8
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
    110
  • 9
    Vue.js 框架下的性能优化策略与实践
    50
  • 10
    Vue.js 3：深入探索组合式API的实践与应用
    41

    • 相关课程

    更多
  • Java Web开发系列课程 - Spring框架入门
  • Vue.js完全自学手册图文教程
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来

    • 相关实验场景

    更多
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)