vue
文章平均质量分 64
落花见流水
女孩子们一定要多搞钱
展开
-
vue 输入框获取焦点
<input @keyup="searchGame" ref="searchInput" v-focus class="game__search-input" type="text" placeholder="搜索" v-model="searchGameName"> <div @click="handleKey" class="game__pop-key-search"></div>&原创 2020-06-11 12:04:10 · 7105 阅读 · 0 评论 -
vue 按A-Z字母排序数据
<template> <!-- 选择游戏 --> <div class="game" :class="{'game__spacing': selectedGame.length > 0}"> <!-- 搜索 --> <div @click="searchGame" class="game__search"> <div class="game_原创 2020-06-11 14:18:57 · 2590 阅读 · 0 评论 -
vue Method 事件
简介vue事件监听通过v-on指令配置在HTML中,相当于原生的addEventListener。所有的vue事件处理方法和表达式都严格绑定在当前视图的ViewModel上,采v-on指令有如下好处:1)通过查看HTML模板便能轻松定位对应的方法2)ViewModell和DOM完全解耦,易于测试3)当一个ViewModel被销毁,所有的事件处理器都会自动删除如何绑定内联方式://绑定单击事件处理器click<div v-on:click="greet">点击问候</div&原创 2020-06-02 22:53:54 · 6588 阅读 · 0 评论 -
vue class与style绑定
介绍vue中的css和style各种添加方式原创 2020-05-25 23:02:00 · 320 阅读 · 1 评论 -
vue3.x全局toast、message、loading组件
vue3.x全局toast、message、loading组件Toast组件loadingToast组件在 src/components下创建toast文件夹,并依此创建index.vue和index.js1、index.vue一般toast会有如下功能:背景色、字体颜色、文本、停留时间<template><div class="toast-box" > <p class="toast-value" :style="{background: backgr原创 2022-03-14 11:56:21 · 3886 阅读 · 0 评论 -
Vue组件强制刷新(重新渲染)的四种方案对比
文章目录前言一、刷新整个页面二、使用v-if标记三、forceUpdate四、key-changing五、应用场景vue具有缓存的页面的强制刷新进入页面输入框自动聚焦前言Vue的双向绑定属于自动档;在特定的情况下,需要手动触发“刷新”操作,目前有四种方案可以选择:刷新整个页面(最low的,可以借助route机制)使用v-if标记(比较low的)使用内置的forceUpdate方法(较好的)使用key-changing优化组件(最好的)一、刷新整个页面router.go(0)二、使原创 2021-02-22 15:17:11 · 29273 阅读 · 1 评论 -
评论 展开|收起
1)根据判断字符串长度区分是否做收缩处理特点:简单,有空行隐患<template> <!-- 话题 简介 组件 --> <div class="intro"> <div ref="introContent" class="intro__content" :class="{'intro__content-close': this.intro.length > 100 && !isOpen}">原创 2020-08-03 18:27:28 · 1634 阅读 · 1 评论 -
Vue项目搭建流程
基础流程1.安装node主要用于使用npm包管理器,配置npm的环境变量安装包下载官网地址:https://nodejs.org/zh-cn/(推荐使用长期LTS版,长期支持,稳定)注意下载的位数,默认是win10的64位,下载mac,win7,32位等可点击官网顶部的下载。直接一直下一步安装即可,可以更改安装路径,但还是建议默认路径安装。2.全局安装脚手架只需安装一次即可,两者都安装执行安装3.X版本安装npm install -g @vue/cli低版本安装npm in原创 2020-08-14 11:13:45 · 244 阅读 · 1 评论 -
小程序、vue 新闻上下轮播
小程序、vue 新闻上下轮播vue小程序红色部分:相当于放映机,也就是容器,overflow:hidden绿色内容:相当于胶片,也就是domvuevue的核心之一,数据驱动模版,循环播放映射的数据上就是 [1,2,3,4,5,6] —》[2,3,4,5,6,1] —》 [3,4,5,6,1,2]动画是数据调整一次就执行一次<ul :class="{'comm__qa-transitoin':animate}"> <li v-for="item in list" :key="原创 2020-12-07 18:16:30 · 547 阅读 · 1 评论 -
Vue模板语法详解
双大括号(Mustache语法,又叫胡子语法)动态赋值语法<div id="app"> <h2>{{message}}</h2> <h2>{{message+message}}</h2> <h2>{{m*2}}</h2> <h2>{{m > 100 ? '大于100' : '小于100' }}</h2></div><script src原创 2020-08-17 17:34:17 · 1803 阅读 · 2 评论 -
Vue开发规范
规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档命名规范为了让大家书写可维护的代码,而不是一次性的代码让团队当中其他人看你的代码能一目了然甚至一段时间时候后你再看你某个时候写的代码也能看css命名规范遵循bem命名规范(bem命名规范官方文档)1)块:具有独立意义的实体(eg: header、container、menu、form、input)2) 元素:块的一部分,没有独立意义,与块语义相关3)修饰符:块、元素的修饰标志,使用修饰符更改某些外观、行为原创 2020-08-07 16:25:03 · 448 阅读 · 1 评论 -
vue开发问题积累
mounted钩子中使用$refs出现undefined原因:如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for(即根据获得的后台数据来动态操作DOM,即响应式),那么这些DOM是不会再mounted阶段找到的。**解决方法:**如果说mounted阶段是加载阶段,那么updated阶段则是完成了数据更新到DOM的阶段。在update阶段使用this.$refs.xxx,就100%能找到该DOM节点。...原创 2020-07-28 09:19:09 · 245 阅读 · 0 评论