vue
关注
分享
扫一扫
文章平均质量分 83
一口木桶饭
意气风发，挥斥方遒！
展开
-
考研为了背单词，我手写了一个背单词小 app
1. 背景2022年考研的考研狗，寒假一个人孤苦伶仃背单词，想检查却无人提问，于是萌生了手写一个体温单词的小应用。最初只是想做一个web端的网页，用浏览器来使用，但总感觉差点意思，就封装了一下，封装成了apk形式，最终可以在手机上有模有样展示，如下图：目前只是实现了展示单词，每次进入app, 就会随机出现一个单词(单词在数据库中)， 点击认识，就会切换到下一个随机的单词， 点击提示， 机会出现单词的词根等帮助自己记忆的提示，点击翻译则是改单词对应的中文意思。2. 技术实现该应用是基于spring原创 2021-02-15 10:56:26 · 2766 阅读 · 5 评论 -
elementui的form表单元素默认居中的问题得解决
在利用elementui写表单的时候， 由于表单中涉及多种form元素，刚开始是用的纯html利用cdn的方式引入的elementui页面整体观感如下：后来由于路由跳转的原因， 还是选择了vue-cli 来构建项目， 当把之前写好的代码复原到vue-li项目中的时候，出现了错位情况，如下：估计是因为elementui的版本不一致， 可能是vue-cli中elementui版本默认表单元素是居中的。对比发现vue-cli版本中的elementui默认是有text-align="center"的，原创 2020-12-03 16:23:24 · 22914 阅读 · 3 评论 -
vue快速入门(十) 之 v-model双向数据绑定
v-model可以把表单数据传过来的值与代码中的值进行交互<body> <div id="app"> <h1>{{message}}</h1> <input type="text" v-model="message"> </div> <script src="h...原创 2020-03-16 19:23:02 · 164 阅读 · 0 评论 -
vue快速入门(九) 之 v-for用法
v-for是一个十分常用的遍历方法,他可以把他本身所在的标签复制很多份,具体份数看for循环多少次,如下例子<body> <div id="app"> <ul> <li v-for="item in language">我会使用</li> </ul> ...原创 2020-03-16 18:40:45 · 367 阅读 · 0 评论 -
vue快速入门(八) 之轮播图的切换
还是利用之前的方法,设置左右两个按钮,点击它们,分别让图片列表的下表变化就可以<body> <div id="app"> <img src="./zuo.jpg" alt="" height="100px" width="100px" v-show="index > 0" @click="left"> <i...原创 2020-03-16 18:09:00 · 822 阅读 · 0 评论 -
vue快速入门(七) 之 v-bind属性绑定
利用v-bind的话vue可以进行标签的属性绑定,如下:<body> <div id="app"> <img v-bind:src="imgSrc" alt=""> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">...原创 2020-03-16 15:59:11 · 445 阅读 · 0 评论 -
vue快速入门(六) 之 v-show 和 v-if 用法
在纯前端的页面中,我们可以设置一个标签的隐藏与否,而v-show则是vue中来实现该功能的<body> <div id="app"> <h1 v-show="isSHow">this is a test lebel</h1> <button @click="hide">点击隐藏或展开</b...原创 2020-03-16 13:18:45 · 583 阅读 · 0 评论 -
vue快速入门(五) 之 简单的计数器
一个超级简单的计数器设置,如下<body> <div id="app"> <span @click='sub'>-</span> <span v-text="num"></span> <span @click="add">+</span> ...原创 2020-03-16 12:45:12 · 291 阅读 · 0 评论 -
vue快速入门(四) 之 v-on:事件绑定 以及 @keyup事件触发
在JavaScript中有点击,鼠标移动等事件,vue中自然也有对应的方法,如下这一次我们使用了method而不是data,在method里边定义各种方法,比如这个弹出警告的方法,在div里边呢,我们使用v-on 后边接动作类型,比如点击,鼠标移动等,后边就是触发的方法名点击弹出警告就会弹出代码如下<body> <div id="app"> ...原创 2020-03-16 12:27:22 · 6732 阅读 · 0 评论 -
vue快速入门(三) 之 v-text v-html
1.v-text可以看出来v-text的作用就是把后边的变量message的值添加到div的文本内容部分,功能类似于在div文本处写{{message}}我们发现v-text是吧标签里边的所有文本全都替换,而{{}}则不会,这是区别另外这两个都支持字符串的拼接2.v-html注意到这次我们在message里边加上了h1标签,分别用v-text和v-html来做测试发现v...原创 2020-03-16 12:06:37 · 408 阅读 · 0 评论 -
vue快速入门(二) 之data数据对象
前边我们的data只是传递了message: "hello vue"这么一个简单的键值对数据,data还支持很多复杂的类型可以看到不管是json还是列表形式都是可以读取出来,方法也是很简单的,代码如下<body id="b"> {{message}} <div id="app"> {{message}} <spa...原创 2020-03-16 11:46:41 · 334 阅读 · 0 评论 -
vue快速入门(一) 之 第一个vue程序
vue官网传送门vue官网下面是第一个vue程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-03-16 11:31:57 · 215 阅读 · 2 评论