前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue 项目 毒鸡汤 壮士可要来一碗!

Vue 项目 毒鸡汤 壮士可要来一碗!

原创
作者头像
华健课堂
发布于 2024-08-20 02:25:05
发布于 2024-08-20 02:25:05
10000
代码可运行
举报
运行总次数:0
代码可运行

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

按国际惯例 先上图

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

poison-soup.html

代码语言:html
AI代码解释
复制
<!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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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")

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
创建你的第一个Vue项目(小白专享版本)
Node.js是一个基于Chrome V8引擎的JavaScript运行环境,由Ryan Dahl开发并于2009年5月发布。以下是关于Node.js的详细介绍:
小馒头学Python
2024/05/01
1790
创建你的第一个Vue项目(小白专享版本)
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》003-走进 Vue 3的新世界:Vue 框架初体验
随着前端技术的不断发展,各种框架应运而生,而 Vue.js 凭借其简洁、灵活的特性,成为了许多开发者的首选。如今,Vue 3 的推出为这个流行框架注入了更多活力与创新。在这个全新的版本中,不仅引入了组合式 API、改进的性能,还为开发体验带来了更多可能性。
愚公搬代码
2025/05/16
830
从0到1,带你尝鲜Vue3.0
做一个简单的Helloworld测试 我们就先试试原有的vue2 的Api还可不可以使用。
前端达人
2020/04/27
1.2K0
SpringBoot_Vue3 《Hello World 》项目入门教程
前后端分离模式,可以让后端和前端开发人员致力于自己擅长的领域,且可以让前端和后端业务逻辑高度解耦合。本文从一个简单的案例入手,讲解使用 spring boot和vue3如何实现前后端的分离。
一枚大果壳
2023/08/18
7860
SpringBoot_Vue3 《Hello World 》项目入门教程
CodeBuddy做公众号速读助手开发
Visual Studio Code - Code Editing. Redefined
相柳
2025/05/13
1250
CodeBuddy做公众号速读助手开发
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
写这篇文章的初衷并不是要大家真的不用node和vscode,说实话前端发展成今天这样,在实际开发中确实离不开node和vscode这类工具了,但往往工具用多了我们自己也成了一个工具人!
人人都是码农
2025/01/20
740
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
Vue3(三)CND + ES6的import + 工程化的目录结构 = 啥? 入口页面 index.htmlmain.jsApp.jshome加载组件的方法组件路由状态管理缺点优点
这几天整理了一下vue的几种使用方式,对比之后发现有很多相似之处,那么是不是可以混合使用呢?比如这样:
用户1174620
2021/02/04
7170
1小时构建Vu3知识体系-之工程化构建&响应式数据
要开启你的 Vue 之旅,最重要的是少走弯路,用最快的方式掌握从Node.js环境安装、基于Vite创建项目,再到单文件组件的定义和推荐项目结构。和方才兄一起来搞定这些基础吧,让你的 Vue 开发之路不再迷茫!
方才编程_公众号同名
2024/11/13
1480
1小时构建Vu3知识体系-之工程化构建&响应式数据
青山不遮,毕竟东流,集成Web3.0身份钱包MetaMask以太坊一键登录(Tornado6+Vue.js3)
    上世纪九十年代,海湾战争的时候,一位美军军官担心他们的五角大楼会被敌人的一枚导弹干掉,从而导致在全球的美军基地处于瘫痪状态。这时候,有一位天才的科学家说,最好的中心就是没有中心。是的,这就是最朴素的去中心化思想,于是互联网出现了。一个没有互联网的时代是无法想象的,互联网的核心就是把一个信息分成若干的小件,用不同的途径传播出去,怎么方便怎么走。
用户9127725
2022/08/08
8060
青山不遮,毕竟东流,集成Web3.0身份钱包MetaMask以太坊一键登录(Tornado6+Vue.js3)
Vue常用特性
a)、Input单行文本。   b)、textarea多行文本。   c)、select下拉多选。   d)、radio单选框。   e)、checkbox多选框。
别先生
2020/04/24
2.2K0
Vue常用特性
【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)
H5 项目基于 Web 技术,可以在智能手机、平板电脑等移动设备上的浏览器中运行,无需下载和安装任何应用程序,且H5 项目的代码和资源可以集中在服务器端进行管理,只需更新服务器上的代码,即可让所有顾客访问到最新的系统版本。
中杯可乐多加冰
2024/09/15
5230
Python爬虫之BeautifulSoup
Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据。官方解释如下: Beautiful Soup提供一些简单的、python式的函数用来处理导航、搜索、修改分析树等功能。它是一个工具箱,通过解析文档为用户提供需要抓取的数据,因为简单,所以不需要多少代码就可以写出一个完整的应用程序。Beautiful Soup自动将输入文档转换为Unicode编码,输出文档转换为utf-8编码。你不需要考虑编码方式,除非文档没有指定一个编码方式,这时,Beautiful Soup就不能自动识别编码方式了。
全栈程序员站长
2022/09/01
1.8K0
Python100Days
这可能是我目前发现最好最好的Python教程了,故整理至我的博客。 原项目GitHub地址https://github.com/jackfrued/Python-100-Days
一点儿也不潇洒
2018/08/07
10K0
脑语言v0.5.8 2500令【单字编程】
注:这是脑语言v0.5.8版的2500个单字(也称为“令”与“一令”),通过【单字编程】(并不仅是中文编程,而是混合英文关键字,但以单字为主的命名)也许是英文不太好时又希望能写代码的其中一种方式。
脑语言
2022/07/11
3.8K0
脑语言v0.5.8 2500令【单字编程】
JavaSE 编写第一个程序
介绍 JavaSE 基础的基本语法知识,不会包含特别难以理解或更深层次的内容,通俗易懂。本人是实战派,看着大幅篇章晦涩的理论,但是没有多少实践证明的书籍就头疼;同时如果知识东一点、西一点,跳跃性太大,不成体系,也比较麻烦。
全栈程序员站长
2022/09/14
6.7K0
JavaSE 编写第一个程序
推荐阅读
相关推荐
创建你的第一个Vue项目(小白专享版本)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验