项目灵感来自“聆听远方”的毒鸡汤 非常简单 适合 Vue 新童鞋

按国际惯例 先上图

来不及解释了 快把代码复制走

poison-soup.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>毒鸡汤 - 壮士可要来一碗！</title>

</head>

<body>

  <div id="app">

    <h1>毒鸡汤</h1>

    <p>{{sentence}}</p>

    <button v-on:click="showAnotherSentence">再来一碗</button>

  </div>

  <script src="https://unpkg.com/vue@3.4.37/dist/vue.global.js"></script>

  <script src="/poison-soup.js"></script>

</body>

</html>

poison-soup.js

let sentences = [

  "你连世界都没观过，哪来的世界观？",

  "学习使人快乐，不学习使人，更快乐。",

  "好想把房子卖了，去环游世界，可惜房东不同意！",

  "厉害的不是你有多少后台，而是你能成为多少人的后台！",

  "你怎么长得跟个二维码似的，不扫一下，都不知道你是什么东西！",

  "不笑运气差，一笑脸就大！",

  "少年加油吧！只要你努力工作，你的老板一定会成功的。",

  "要相信自己，别人能做到的，你也做不到。",

  "你从来不孤独，因为，孤独都不想跟你交朋友。",

  "不要担心，一切都是最烂的安排。"

]

function getRandomIndex() {

  return Math.floor(Math.random() * sentences.length)

}

Vue.createApp({

  data() {

    return {

      sentence: sentences[getRandomIndex()]

    }

  },

  methods: {

    showAnotherSentence() {

      this.sentence = sentences[getRandomIndex()]

    }

  }

}).mount("#app")

壮士 来完一碗“文章” 再来一碗“视频”

Vue 项目 毒鸡汤 壮士可要来一碗！的更多相关文章

  1. 如何快速把 Vue 项目升级到 webpack3

    由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...

  2. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  3. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  4. vue项目目录介绍

    Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build ...

  5. Vue 项目实战系列 （一）

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

  6. 简单vue项目脚手架（vue+webpack2.0+vuex+vue-router）

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

  7. vue项目构建与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...

  8. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  9. 利用webpack构建vue项目

    快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...

  10. vue-修改vue项目运行端口号

    一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...

随机推荐

  1. IgH EtherCAT主站开发案例分享——基于NXP i.MX 8M Mini

    前  言 本文档主要演示NXP i.MX 8M Mini工业开发板基于IgH EtherCAT控制伺服电机.   演示板卡是创龙科技的TLIMX8-EVM工业开发板,它是基于NXP i.MX 8M M ...

  2. 树莓派4B-PCA9685驱动舵机

    前言 不知道你们有没有遇到过这么一种情况,直接用树莓派的引脚输出PWM控制舵机,舵机是会出现抖动的.就算代码进行一定的时延迟优化还是会有影响的. 现在我们可以使用PCA9685这个模块去驱动舵机. P ...

  3. css3 html5

    vscode的使用 什么是HTML5? HTML5新增语义化标签 多媒体标签 <audio>音频标签 谷歌浏览器 把autoplay属性给我们禁用. 两种音频格式的播放 视频标签<v ...

  4. Spring Boot集成Mybatis分页插件pagehelper

    引入依赖 <!--分页插件开始--> <dependency> <groupId>com.github.pagehelper</groupId> < ...

  5. Python爬取小说+Servlet+C3P0+MVC构建小说api

    一.摘要: 使用python爬取网络小说数据存入数据库,利用C3P0数据库连接池获取数据库数据,采用MVC三层架构对数据库数据进行操作,输出JSON格式数据到前端页面 二.内容: 1.gitee外链消 ...

  6. 玄机-第二章日志分析-apache日志分析

    前言 出息了,这回0元玩玄机了,因为只是日志分析,赶紧导出来就关掉(五分钟内不扣金币) 日志分析只要会点正则然后配合Linux的命令很快就完成这题目了,非应急响应. 简介 账号密码 root apac ...

  7. 搭建lnmp环境-mysql（第五步）

    版本mysql 5.7 先删除系统自带的db 新建文件夹/data/download 进入后下载 wget http://repo.mysql.com/mysql57-community-releas ...

  8. 《Programming from the Ground Up》阅读笔记：p88-p94

    <Programming from the Ground Up>学习第5天,p88-p94总结,总计7页. 一.技术总结 1.touppercase.s #PURPOSE: This pr ...

  9. ArcGIS for Android入门（Java）：初体验

    准备工作 开发工具:Android Studio 环境:jdk 11 (首次接触安卓开发,可能有的地方不太对,还请给位大佬多多指点) 项目搭建 打开Android Studio,点击New Proje ...

  10. 【MySQL】 批量更改库，表，字段的字符集

    库一级的更改: -- 单个库字符集更改 ALTER DATABASE `ymcd_aisw` CHARACTER SET 'utf8' COLLATE 'utf8_general_ci'; ALTER ...