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项目运行端口号
一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...
随机推荐
- 使用bootchart 对 高通Android 进行性能分析
使用bootchart 对 高通Android 进行性能分析 Android版本:7.0 适用平台:高通和MTK 参考: https://blog.csdn.net/qq_19923217/artic ...
- 修改Git Commit提交记录的用户名Name和邮箱Email
修改Git 本次Commit提交记录的用户名Name和邮箱Email git commit --amend --author="new-name <xxx@new.com>&qu ...
- .net入行三年的感想回顾
从21年毕业到现在,还差几天就三年了 工作后才知道,工作年限分为1年以下 .3~5年.5~10年.晋升老板,每段都有每段的故事和总结 回顾下我的前三年工作心路,思考下未来发展之路(emmm,我是觉得我 ...
- 全国产！全志A40i＋Logos FPGA核心板（4核ARM Cortex-A7）硬件说明
硬件资源 SOM-TLA40iF核心板板载ARM.FPGA.ROM.RAM.晶振.电源.LED等硬件资源,并通过B2B连接方式引出IO.核心板所有器件(包括B2B连接器)均采用国产工业级方案,国产化率 ...
- 【workerman】uniapp+thinkPHP5使用GatewayWorker实现实时通讯
前言 之前公司需要一个内部的通讯软件,就叫我做一个.通讯软件嘛,就离不开通讯了,然后我就想到了长连接.这里本人用的是GatewayWorker框架. 什么是GatewayWorker框架? Gatew ...
- 拟合算法与matlab工具包实现
与插值问题不同,在拟合问题中不需要曲线一定经过给定的点.拟合问题的目标是寻求一个函数(曲线),使得该曲线在某种准则下与所有的数据点最为接近,即曲线拟合的最好(最小化损失函数) 目录 一.插值和拟合的区 ...
- P2P应用
对等连接(peer to peer)文件分发的分析: 传统客户-服务器模式:用时与文件量成正比 P2P模式:随文件量增大而用时趋于一个极限. P2P工作方式有三: 集中式索引:客户访问服务器所需数据在 ...
- 解决php提示Maximum execution time of 30 seconds exceeded错误
如何解决错误? 基本上,有3种方法可以处理此错误: 修改php配置文件php.ini文件 使用 ini_set() 函数 使用set_time_limit()函数 1)修改php配置文件php.ini ...
- DUILib的代码分析
1.思路上用的是mfc的Message_MAP,而Control只是一个gdi render. 控件间使用的Message Map. 也就是说每个控件可以作为一个独立的个体
- springboot 3.x MultipartFile 参数总是为空 参数传递不进来
场景: 在写一个统一文件上传的时候,MultipartFile参数一直传递不进来,一直为空. 排错方法: 我先是将业务简化,使用api文档进行测试,测试是前端问题还是后端问题. 简化后业务: 用api ...