vue相关的2个综合案例，网页打字练习

于 2024-06-12 21:29:48 发布
阅读量320 收藏 1
点赞数 5
分类专栏： vue 文章标签： vue.js 前端 javascript 学习 大数据 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79810514/article/details/139637081
版权

for循环的应用

/* 1. 用for循环控制台打印0到100 */
for (var i = 0; i <= 100; i++) {
    console.log(i)
}
/* 2. 用for循环控制台打印100到0 */
for (var i = 100; i >= 0; i--) {
    console.log(i)
}

网页打字练习案例练习

<template>
    <div class="main">
    <div class="outer">
    <div class="score">当前分数: {{ score }}</div>
    <div class="timer">剩余时间: {{ time }}秒</div>
    </div>
    <div>
        <kbd v-for="(key, index) in currentKeys" :key="index">{{ key.toUpperCase() }}</kbd>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const score = ref(0);
const time = ref(60);
const gameOver = ref(false);
const currentKeys = ref([]);
const words = ['hello', 'world', 'vue', 'js', 'java', 'python', 'javascript',
    'function', 'const', 'var', 'let', 'ref', 'computed', 'watch', 'v-for', 'v-if', 'v-on',
    'react', 'style', 'html', 'npm', 'run', 'dev', 'vim', 'C++', 'C#', '@',
    'template', 'script', 'event', 'reactive', '114514', '520', 'bigdata', 'hadoop', 'linux',
    'network', 'computer', 'class', 'dom', 'yarn', 'spark', 'scala', 'rust', 'golang', 'value',
    'expression', 'statement', 'boolean', 'string', 'nan', 'undefined', 'number', 'object', 'arrary', 'typeof', 'Math', 'english', 'random', 'push', 'pop', 'map', 'filter', 'foreach',
    'while', 'return', 'framework', 'vonneuman', 'turing', 'backend', 'frontend', 'web', '&',
    '~', '!', '(', ')', '{', '}', '/', '?','<','>',
    'console','log','timeout','window','document','css','vite','install','mustache','button','div',
    'v-bind','v-show','v-else','import','mounted','export','from','node'
];

const getRandomKey = () => {
    const randomWord = words[Math.floor(Math.random() * words.length)];
    currentKeys.value = randomWord.split('');
};

const handleKeyPress = (event) => {
    if (gameOver.value) {
        return;
    }

    if (event.key.toLowerCase() === currentKeys.value[0].toLowerCase()) {
        currentKeys.value.shift();

        if (currentKeys.value.length === 0) {
            score.value++;
            getRandomKey();
        }
    }
};

const startTimer = () => {
    const timer = setInterval(() => {
        time.value--;
        if (time.value === 0) {
            clearInterval(timer);
            gameOver.value = true;
        }
    }, 1000);
};

onMounted(() => {
    getRandomKey();
    startTimer();
    window.addEventListener('keydown', handleKeyPress);
});
</script>


<style scoped>
.main {
    width: 1000px;
    height: 800px;
}

.outer {
    display: flex;

    justify-content: space-between;
    align-items: center;
    height: 300px;
    font-size: 48px;
    margin-bottom: 60px;
    color: #000;
    /* Default text color for light mode */
}


kbd {
    display: inline-block;
    padding: 0.8em 1.6em;
    margin-bottom: 30px;
    margin-left: 15px;
    font-size: 2em;
    font-family: Arial Black, sans-serif;
    font-weight: bold;
    line-height: 1.4;
    color: #242729;
    text-shadow: 0 1px white;
    background: linear-gradient(to top, #ddd, #eee 8%, #fff 18%, #e3e3e3);
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow:
        0 0 0 1px #fff inset,
        0 1px 0 #ddd,
        0 2px 0 #bbb,
        0 2px 10px rgba(0, 0, 0, 0.2),
        0 10px 20px rgba(0, 0, 0, 0.2);
    /* Add a larger shadow to make it look more 3D */
}

/* Styles for dark mode */
@media (prefers-color-scheme: dark) {
    .outer {
        color: #fff;
    }

    kbd {
        background-color: #555;
        border-color: #888;
    }
}
</style>

效果如下：

当敲对一个单词后就会消失一个，直到屏幕的单词都打完，会加一分，然后更新单词，再次练习。倒计时60秒，快去挑战自己的手速吧。

在这里插入图片描述

网页修饰

代码如下：

<template>
<div id="firstTop"><div id="piao"><img src="src\components\text.html\yh.png" class="moveRight"></div></div>
<body>   
<div class="background">
 
    <!-- 左侧侧边栏内容 -->
    <div id="b1">
        <div class="topLeftAndRight"></div>
    </div>
     <!-- 中间内容填充部分  -->
    <div id="b2">
       <div id="hang1">
         <iframe :src="externalHtmlUrl"></iframe>
       </div>
     
        <div id="hang15"></div>
            <div class="hang2">
                
                <div id="contain">
                    <div id="leftDoor"></div>
                    <div id="rightDoor"></div>
                </div> 
                <div id="left"></div>
                <div id="right"></div>
            </div>
        <div id="hang3">
            <div id="jieguo">
                <div class="outer">当前分数：{{ score }}</div>
                <div class="timer">剩余时间: {{ time }}秒</div> 
            </div>
            <div :class="{'time': atime}">
                <img src="src\components\text.html\time.png" >
            </div>
            <div class="neirong">
                <div :class="{'color1': aColor1}">
                    <span v-for="(key, index) in currentKeys" :key="index">{{ key.toUpperCase() }}</span>
                </div>
                
                <div :class="{'color2': aColor2}">
                    <span v-for="(key, index) in currentKeys2" :key="index">{{ key.toUpperCase() }}</span>
                </div>
                
                <div :class="{'color3': aColor3}">
                    <span v-for="(key, index) in currentKeys3" :key="index">{{ key.toUpperCase() }}</span>
                </div>
                <div :class="{'color4': aColor4}">
                    <span v-for="(key, index) in currentKeys4" :key="index">{{ key.toUpperCase() }}</span>
                </div>
            </div>
            <div class="overAgainGame"><button @click="overAgin">{{ start }}</button></div>
        </div>
    </div>
    <!-- 右边栏的内容 -->
    <div id="b3">
        <div class="topLeftAndRight"></div>
    </div>
</div>
</body>
</template>

<script>

export default {
    
    data () {
      return {
        externalHtmlUrl: './src/components/text.html/cs.html' // 外部HTML文件的链接地址
      }
    }
  }
</script>
<script setup>
import { ref, onMounted } from 'vue';
   
    const score = ref(0);
    const time = ref(60);
    const gameOver = ref(false);
    const start = ref("开始游戏")
    
    const currentKeys = ref([]);
    const currentKeys2 = ref([]);
    const currentKeys3 = ref([]);
    const currentKeys4 = ref([]);
    const words = ['hello', 'world', 'vue', 'js', 'java', 'python', 'javascript',
        'function', 'const', 'var', 'let', 'ref', 'computed', 'watch', 'v-for', 'v-if', 'v-on',
        'react', 'style', 'html', 'npm', 'run', 'dev', 'vim', 'C++', 'C#', '@',
    ];
    
    
    const getRandomKey = () => {
        const randomWord = words[Math.floor(Math.random() * words.length)];
        currentKeys.value = randomWord.split(',');
        
    };
    const getRandomKey2 = () => {
        const randomWord = words[Math.floor(Math.random() * words.length)];
        currentKeys2.value = randomWord.split(',');
        
    };const getRandomKey3 = () => {
        const randomWord = words[Math.floor(Math.random() * words.length)];
        currentKeys3.value = randomWord.split(',');
        
    };const getRandomKey4 = () => {
        const randomWord = words[Math.floor(Math.random() * words.length)];
        currentKeys4.value = randomWord.split(',');
        
    };
    const handleKeyPress = (event) => {
      const key = event.key;
      const wordPress = ref([])
      wordPress.value = key
      console.log(key)

     
      // 如果是删除键，则删除词汇的最后一个字符
      if (key === 'Backspace') {
        inputWord = inputWord.slice(0, -1);
      } else if (key === ' ') { // 如果是空格，则输出整个词汇并清空

        inputWord = '';
      } else if (key === 'Shift'){
        inputWord.replace('Shift', '')
    
      }else {
        inputWord += key; // 否则，将按键字符添加到词汇中
        if (inputWord.length > 0) {
          console.log('Input word:', inputWord);
          
          if (gameOver.value) {
            return;
        }
          if (inputWord.toLowerCase() === currentKeys.value[0].toLowerCase() || inputWord.toLowerCase() === currentKeys2.value[0].toLowerCase() || inputWord.toLowerCase() === currentKeys3.value[0].toLowerCase()|| inputWord.toLowerCase() === currentKeys4.value[0].toLowerCase()) {
            currentKeys.value.pop();
            if (currentKeys.value.length === 0) {
                score.value++;
                inputWord = '';
                getRandomKey();
                getRandomKey2();
                getRandomKey3();
                getRandomKey4();
            }
          }
        }
        aColor1.value = ref(false);
        aColor2.value = ref(false);
        aColor3.value = ref(false);
        aColor4.value = ref(false);
    
      }
    }
     

    const aColor1 = ref(false);
    const aColor2 = ref(false);
    const aColor3 = ref(false);
    const aColor4 = ref(false);
    const sumList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
    function toChangeColor() {
        const items = ref([]);
        let loopIndex = 0;
        const intervalDuration = 3000; // 每次循环的间隔时间（毫秒）
        const maxItems = 19; // 循环的最大次数
        for (let i = 0; i <= maxItems; i++) {
    
        setTimeout(() => {
        var chooseSum = sumList[Math.floor(Math.random() * maxItems)]
        
        console.log(chooseSum)
        if (chooseSum >= 0 && chooseSum <=4) {
            aColor1.value = !aColor1.value
            aColor2.value = ref(true);
            aColor3.value = ref(true);
            aColor4.value = ref(true);
        }else if (chooseSum >= 5 && chooseSum <=9){
            aColor2.value = !aColor2.value
            aColor1.value = ref(true);
            aColor3.value = ref(true);
            aColor4.value = ref(true);
        }else if (chooseSum >= 10 && chooseSum <=14){
            aColor3.value = !aColor3.value
            aColor2.value = ref(true);
            aColor1.value = ref(true);
            aColor4.value = ref(true);
        }else if (chooseSum >= 15 && chooseSum <=20){
            aColor4.value = !aColor4.value
            aColor2.value = ref(true);
            aColor3.value = ref(true);
            aColor1.value = ref(true);
        }else {
            aColor1.value = ref(true);
            aColor2.value = ref(true);
            aColor3.value = ref(true);
            aColor4.value = ref(true);
        }
      
          items.value.push(`Item ${loopIndex++}`);
        }, i * intervalDuration);
      }
    
    }
    const atime = ref(false)
    const startTimer = () => {
        const timer = setInterval(() => {
     
            time.value--;
            start.value = '重新开始'
            if (time.value === 0) {
                atime.value = false
                clearInterval(timer);
                gameOver.value = true;
                clearInterval(toChangeColor)
                aColor1.value = ref(false);
                aColor2.value = ref(false);
                aColor3.value = ref(false);
                aColor4.value = ref(false);
                start.value = '开始游戏'
            }else{
                atime.value = true
            }
        }, 1000);
    };
    
    
    let inputWord = '';
 

    function overAgin(){
        
        window.location.reload();
        timePass ()
        
        if (time === 0) {
            aColor1.value = ref(false);
            aColor2.value = ref(false);
            aColor3.value = ref(false);
            aColor4.value = ref(false);
 
        }
    
        
    }

    onMounted(() => {
        
        getRandomKey();
        getRandomKey2();
        getRandomKey3();
        getRandomKey4();
        startTimer();
        toChangeColor();
       
        window.addEventListener('keydown', handleKeyPress);

    });
      
</script>

<style scoped>
body{
    margin: 0;
    padding: 0;
}
.background{
    display: flex;

}
#firstTop{
    width: 1420px;
    height: 100px;
    background-color: aqua;
    background-image: url("https://img.pptjia.com/image/20181121/9e19f6fef989b1db9c1aa40417860c49.png");
    background-size: cover;
    background-repeat: no-repeat;
    
}
#moveRight{
    width: 150px; /* 设置图片宽度 */
    height: 80px;
    animation: moveRight 2s infinite; /* 应用动画 */
}
#piao{
    margin-left: 0px;
    animation: moveRight 2s infinite; /* 应用动画 */
}
@keyframes moveRight {
  0% {
    margin-left: -1200px; /* 动画开始时位置 */
  }
  100% {
    margin-left: 1300px; /* 动画结束时位置，这里是向右移动100px */
  }
}
/* 写左侧栏的样式 */
#b1{

    width: 300px;
    height: 1600px;
    border: 1px black;
    background-color: aqua;
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201505%2F15%2F20150515203203_AihvS.thumb.400_0.gif&amp;refer=http%3A%2F%2Fc-ssl.duitang.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1719239956&amp;t=5afb6cc097c9e071ca893956158847b6");
}
.topLeftAndRight{
    background-image: url("https://img.pptjia.com/image/20181121/9e19f6fef989b1db9c1aa40417860c49.png");
    width: 300px;
    height: 100px;
    background-size: cover;
    float: left;
}
#b2{

width: 820px;
height: 1600px;
border: 1px black;
background-color: white;

}


/* 中间上边栏 */
#top{
    background-image: url("./src/assets/yun1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 820px;
    height: 400px;
   
}
#logo{

    width: 500px;
    height: 240px;
    padding-top: 120px;
    margin-left: 160px;
    background-image: url("./src/assets/logo.png");
    background-repeat: no-repeat;
    background-position: center;
    
}

#hang1{
    width: 800px;
    height: 500px;
    border: 0px;
}
iframe {
  
  border: 0;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
  height: 100%;
}
   

#hang15{
    width: 820px;
    height: 160px;
    background-color: blue;
    margin-top: 30px;
    
    background-image: url("./src/assets/tou1.png");
    background-size: 820px 160px;
  

    
}
#contain {
            width: 410px;
            height: 310px;
            position: absolute;
            background-image: url("./src/assets/gz1.png");
            background-size: 410px 310px;
            perspective: 800px;
            transform-style: preserve-3d;
            margin-left: 410px;
            margin-top: 155px;
            transform: translateY(-50%) translateX(-50%);
            cursor: pointer;
            
        }
    
    
        #leftDoor {
            position: absolute;
            width: 50%;
            height: 100%;
            top: 0;
            left: 0;
            transition: .5s;
            background-image: url("./src/assets/hqq2.png");
            background-size: cover;
            backface-visibility: visible;
            transform-origin: left;
            /* 需要注意3D动画的 transform-orign 的改变 */
        }
        
    
        #rightDoor {
            position: absolute;
            width: 50%;
            height: 100%;
            right: 0;
            top: 0;
            transition: .5s;
            background-image: url("./src/assets/hqq3.png");
            background-size: cover;
            backface-visibility: visible;
            transform-origin: right;
        }
    
        #contain:hover #leftDoor {
            transform: rotateY(-120deg);
        }
    
        #contain:hover #rightDoor {
            transform: rotateY(120deg);
        }
    
        #leftDoor::before,
        #rightDoor::after {
            content: '';
            display: block;
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px slategrey solid;
            top: 50%;
            transform: translateY(-50%);
            /* 当内部无元素时，两个伪元素指的是同一个 */
        }
    
        #leftDoor::before {
            right: 20px;
        }
    
        #rightDoor::after {
            left: 20px;
        }
#left{
    width: 212px;
    height: 310px;
    background-color: aqua;
    background-image: url("./src/assets/hqq1.png");
    background-size: 210px 310px;
    background-repeat: no-repeat;
}
#right{
 
    width: 210px;
    height: 310px;
    background-color: aqua;
    margin-left: 610px;
    margin-top: -312px;
    background-image: url("./src/assets/hqq4.png");
    background-size: 212px 310px;
    background-repeat: no-repeat;
}
#hang3{
    width: 820px;
    height: 600px;
    background-color: bisque;
}
#jieguo{
    width: 820px;
    height: 60px;
    background-color: aqua;
    
}
.time{
    width: 80px;
    height: 80px;

    animation: moveRight2 60s infinite; /* 应用动画 */
}

@keyframes moveRight2 {
  0% {
    margin-left: 790px; /* 动画开始时位置 */
  }
  100% {
    margin-left: -60px; /* 动画结束时位置，这里是向右移动100px */
  }
}
 /* 单词的样式 */
 span {
        display: inline-block;
        padding: 1.8em 2.6em;
        margin-bottom: 30px;
        margin-left: 15px;
        font-size: 15px;
        font-family: Arial Black, sans-serif;
        font-weight: 0px;
        line-height: 1.2;
        color: rgb(36, 41, 39);
    
        /* background: linear-gradient(to top, #ddd, #eee 8%, #fff 18%, #e3e3e3); */
        border-radius: 3px;
        box-shadow:
            0 2px 10px rgba(0, 0, 0, 0.2),
            0 10px 20px rgba(0, 0, 0, 0.2);
           
        /* Add a larger shadow to make it look more 3D */
    }

.neirong{
    display: flex;
    margin-left: -6px;
    margin-top: 100px;
    height: 500px;
}



/* 开始游戏按钮的样式 */
.overAgainGame{
    margin-top: -200px;
}
 button {
     
     --bg: #e74c3c;
     --text-color: #fff;
     position: relative;
     width: 200px;
     height: 80px;
     border: none;
     background: var(--bg);
     color: var(--text-color);
     padding: 1em;
     font-size: 30px;
     font-weight: bold;
     text-transform: uppercase;
     transition: 0.2s;
     border-radius: 5px;
     opacity: 0.8;
     letter-spacing: 1px;
     box-shadow: #c0392b 0px 7px 2px, #000 0px 8px 5px;
     padding-top: 20px;
     margin-top: -220px;
   }
    
   button:hover {
     opacity: 1;
   }
    
   button:active {
     top: 4px;
     box-shadow: #c0392b 0px 3px 2px,#000 0px 3px 5px;
   } 

   /* 覆盖物 */
   .color1{
      
      width: 500px;
      float: left;
      margin-left: 10px;
      background-image:url("https://gd-hbimg.huaban.com/f7edc6d1befd31a5ff3facac33fda064c710b73342fff-V45epE_fw658"); /* 红色背景 */
    transition: background-color 0s ease; /* 背景色变化的过渡效果 */
    background-repeat: no-repeat;
    background-size: 100%;
  }  
    .color2 {
        width: 500px;
        float: left;
        margin-left: 10px;
      background-image:url("https://gd-hbimg.huaban.com/f7edc6d1befd31a5ff3facac33fda064c710b73342fff-V45epE_fw658"); /* 红色背景 */
      transition: background-color 0s ease; /* 背景色变化的过渡效果 */
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .bg-blink-enter-from,
    .bg-blink-leave-to {
      background-color: transparent; /* 初始/结束时的背景色 */
    }
    .bg-blink-enter-active,
    .bg-blink-leave-active {
      transition: background-color 0s ease; /* 过渡效果 */
    }
    .color3{
    
        width: 500px;
        float: left;
        margin-left: 10px;
        background-image:url("https://gd-hbimg.huaban.com/f7edc6d1befd31a5ff3facac33fda064c710b73342fff-V45epE_fw658"); /* 红色背景 */
      transition: background-color 0s ease; /* 背景色变化的过渡效果 */
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .color4{
        width: 500px;
        float: left;
        margin-left: 10px;
        background-image:url("https://gd-hbimg.huaban.com/f7edc6d1befd31a5ff3facac33fda064c710b73342fff-V45epE_fw658"); /* 红色背景 */
      transition: background-color 0s ease; /* 背景色变化的过渡效果 */
      background-repeat: no-repeat;
      background-size: 100%;
    }

   /* 右边栏 */
#b3{

width: 300px;
height: 1600px;
border: 1px black;
background-color: red;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201505%2F15%2F20150515203203_AihvS.thumb.400_0.gif&amp;refer=http%3A%2F%2Fc-ssl.duitang.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1719239956&amp;t=5afb6cc097c9e071ca893956158847b6");
}


</style>

修饰后网页效果如下

在这里插入图片描述
在这里插入图片描述

皆过客，揽星河
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现最简单的打字小游戏
A081127的博客
03-09 5021
就想做点小游戏，都是自己想的自己一步步做出来的，做完好有成就感，虽然好简单。 做出点小东西能让自己更有信心去学习 用了less,vue2 页面用flex布局的 用了watch属性监视文本输入的内容 先用if判断输入的与页面上的单词是否一样，一样就给当前的单词背景变色 判断有没有输入过，没输入过再就放到一个新的数组上 判断新数组里有没有这个单词如果没有才进入判断，再给新数组增加单词 给输入框设置为空，numder减一剩余数量 设置good标志显示隐藏，先设置显示，再设置个定时器隐藏 就..
Vue实现的打字通
lxyoucan的博客
10-04 943
web版在线打字程序 演示地址： http://itkey.fun/index.jsp 代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>旭哥的五笔3-计时可暂停版本</title> <script src="/js/vue.js"></script> &l..
vue + element UI【实战】打字闯关（含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧）
朝阳39的博客
07-27 519
点我在线预览 监听键盘事件 根据按键值判断输入是否正确，若正确则添加属性 type 为 success ，字符变绿 ；输入错误则添加属性 type 为 danger，字符变红 （type 值来自 el-tag 对应的效果） 当前关的字符输入完后，按任意键都会判定通关结果，输入全部正确才能通关 判定结果后，按回车键/空格键，若通关则开始下一关，若失败则重新挑战 为提升用户体验，每一次输入都会配音效，并统计输入正确和错误的次数 element UI 需升级到 2.15
一款基于Vue3+TypeScript+Kotlin开发的WebApp移动端打字练习软件，为五笔、音形文字录入爱好者.zip
02-18
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
代码打字速度_使用VueJS创建打字速度效果
culiu9261的博客
07-20 399
代码打字速度VueJS is commonly being adopted as a Javascript framework, and many developers are trying it out to see what it can actually do. VueJS通常被用作Javascript框架，许多开发人员正在尝试使用它来查看其实际功能。 In this article, ...
vue综合小练习-todolist案例
05-29
vue技术todolist小案例，实现代办事项的增删改查。包含了vuex状态管理等技术，功能齐全，适合新手小白使用。推荐下载！！！！！！！！！！！！！！！！！！！！！！！！ 阅读建议：不仅是代码编写实现也更注重内容上...
VUE&Element&综合案例1
08-03
VUE&Element 综合案例1 本文档将详细介绍 VUE 框架的基础知识，包括 VUE 概述、快速入门、条件判断指令等内容。同时，文章还将介绍 VUE 中的双向绑定思想、MVVM 模式、插值表达式、指令作用等重要概念。 VUE 概述 ...
vue案例练习
08-10
在“vue案例练习”这个主题中，我们主要会探讨如何使用Vue.js进行实际项目开发和练习。 1. **基础概念** - **Vue实例**：Vue应用的核心就是Vue实例，它包含了数据、方法、生命周期钩子等属性和方法。 - **模板...
vue2笔记和案例 vue2 笔记和案例
04-17
Vue 2是其第二个主要版本，它在Vue 1的基础上进行了优化和改进，提高了性能和开发者体验。本笔记和案例将深入探讨Vue 2的核心概念和实践应用。 1. **Vue实例**： - Vue实例是Vue应用的基础，它包含数据、方法、...
Vue学习笔记_综合案例.zip
06-19
文件里包含综合案例代码和数据库文件、学习笔记、vuejs2中文手册，W3School全套教程。 配套博客 https://blog.csdn.net/H200102/article/details/106535213
vue 打字效果_打字稿装饰器，使Vue更具打字稿感
cuk5340的博客
07-21 1015
vue 打字效果 Vue打字稿 (vue-typescript) Typescript decorators to make vue play nice with typescript. 打字机装饰器，以使vue与打字机配合使用。 安装 (Install) This package has one single peer-dependancy: Vue (obviously) 该程序包具有...
探索`qwerty-learner`: 打字速成的神器
gitblog_00014的博客
03-20 391
探索qwerty-learner: 打字速成的神器 项目地址:https://gitcode.com/Kaiyiwing/qwerty-learner 在数字化的世界中，打字技巧无疑是每个人必备的基本技能之一。今天，我们要向大家推荐一个名为qwerty-learner的开源项目，它是一个在线打字训练平台，专为提升你的QWERTY键盘打字速度和准确性而设计。通过科学的学习方法与实时反馈，无论你是初学...
Vue的模仿用户输入文字的组件
weixin_34279246的博客
07-24 556
vue-typer是一个很好玩的模仿用户输入效果的vue组件。它可以支持输入再擦除的动画。支持多种文字输入模式，可自定义组件的样式。 安装 通过NPM安装$ npm install --save vue-typer 插件应用 将vue-typer注册到组件使用的例子 // ES6 import { VueTyper } from '...
Vue 实现打字机效果--ityped.js
tjzc1352640的博客
06-22 3968
// html template <p class="desc" v-show="showDesc"><span>I'm </span><span ref="descStr"></span></p> // import import {init} from 'ityped'; // usage const descS...
键盘(vue练习例子)
Lucky Star的博客
02-23 755
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt;
在线网页版的打字练习
weixin_34355559的博客
02-08 1784
学习打字一定要多练习才能打得快，通常的练打字都要安装软件，很麻烦。 这里介绍一个方便实用的在线学打字系统。可以很方便进行打字练习，如果你想在线打字，请你进入： http://www.dnzs123.com/dazi/ 这是一个简单易用的在线网页版的打字练习和测试系统，不用下载，不用安装，只要打开网页就能开始使用。通过对照打字，是练习中文打字的一个很...
vue动态网页项目案例
最新发布
06-02
这里给你介绍一个Vue动态网页项目案例：Vue.js的官方文档。 Vue.js的官方文档是由Vue.js核心团队维护的Vue.js文档网站，它是使用Vue.js构建的一个单页应用程序。该网站提供了完整的Vue.js API文档、指南和实例代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值