Vue 项目 毒鸡汤 壮士可要来一碗！
项目灵感来自“聆听远方”的毒鸡汤 非常简单 适合 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 项目 毒鸡汤 壮士可要来一碗！的更多相关文章
- 如何快速把 Vue 项目升级到 webpack3
由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...
- vue-cli快速构建Vue项目
vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...
- requirejs + vue 项目搭建2
上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...
- vue项目目录介绍
Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build ...
- Vue 项目实战系列 （一）
最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...
- 简单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 ...
- vue项目构建与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...
- Vue项目搭建完整剖析全过程
Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~! 项目技术栈:vue+webpack+bower+sass+axios ...
- 利用webpack构建vue项目
快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...
- vue-修改vue项目运行端口号
一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...
随机推荐
- 高通驱动树中的GPIO详解
高通驱动树中的GPIO详解 reference:https://blog.csdn.net/baidu_37503452/article/details/80257441 Drive Strength ...
- 基于RK3588的8K视频解码显示案例分享！引领超高清工业视频时代
8K.4K.2K显示对比 2K分辨率:也称为全高清(FULL HD),它具有1920 x 1080像素的分辨率.这是目前大多数消费者电视和电脑显示器的标准分辨率,可以提供良好的图像质量. 4K分辨率: ...
- Codeforces Global Round 26 A~C2
惹啊啊啊啊,这场做得我发昏,最近总感觉不在状态,但还是再在冲击1600-1800的题目. A. Strange Splitting ---------------------------------题 ...
- 谈谈你对 Vue 生命周期的理解？
生命周期是什么? Vue 实例有一个完整的生命周期,也就是从 开始创建.初始化数据.编译模版.挂载 Dom -> 渲染.更新 -> 渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. ...
- yb课堂之自定义异常和配置 《五》
开发自定义异常和配置 自定义异常 继承RuntimeException 开发异常处理器ExceptionHandle YBException.java package net.ybclass.onli ...
- Java21的虚拟线程Virtual Thread初体验
我们之前使用的是操作系统平台的线程,就称之为"系统线程"吧.虚拟线程是JDK维护的,原理跟WebFlux的底层实现差不多,都是工作线程分离. 要使用虚拟线程,需要使用JDK21以上 ...
- oeasy教您玩转python - 001 - # 换行插入
先跑起来 Python 什么是 Python? Python 很好用 适合初学者 而且在各个领域都很强大 后来居上 上图可以点开 python3 早已有之 最终逆风翻盘 当然 java 也 ...
- 「比赛记录」CF Round 954 (Div. 3)
Codeforces Round 954 (Div. 3) 题目列表: A. X Axis B. Matrix Stabilization C. Update Queries D. Mathemati ...
- midjourney 入门操作
midjourney 入门操作 settings面板 选择模型 当从 V6 切换到 Niji模型时,Current suffix会添加参数 default V6面板功能介绍 RAW Mode功能 -- ...
- 对比python学julia（第三章：游戏编程）--（第一节）初识游戏库（3）
1.1. 键盘和鼠标控制 在游戏应用程序中,通常使用键盘和鼠标作为游戏的操作设备.游戏的窗口都能接收来自键盘和鼠标设备的输人.当用户在键盘上按下按建或释放按键时,会产生相应的键盘事件:当用户移动 ...