vue
tall羊
这个作者很懒,什么都没留下…
展开
-
vue px单位转vw单位 记录
本文记录一下px自动转换vw适配的方法:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --savecnpm i cssnano-preset-advanced --save-dev配置postcss.config.js文件module.exports = { "plugins": { "po原创 2020-05-19 11:40:23 · 607 阅读 · 1 评论 -
vue-seamless-scroll实现列表无缝滚动
一个简单的无缝滚动,最近折磨了我好久,记录一下。先上一下最终实现效果:最开始html标签用的table、thead、tbody然后结合animate和settimeout实现的,但是实现之后每次滚动都抖一下,也找不到原因;后来寻思是不是table的原因,于是换成div试了一下,原来的问题解决了但是出现了新问题:滚动不流畅,就像网速不好似的。。。于是,我又换成了现在的vue-seamless-...原创 2020-02-19 10:31:29 · 3856 阅读 · 2 评论 -
文章分享——Vue的slot-scope的场景的个人理解
分享一篇文章——Vue的slot-scope的场景的个人理解,对于我个人理解作用域插槽很有帮助Vue的slot-scope的场景的个人理解原创 2019-12-03 16:56:09 · 187 阅读 · 0 评论 -
vue实现列表无缝滚动
vue实现列表无缝滚动HTML部分代码css部分代码js部分代码HTML部分代码<template> <div id="box" class="wrapper"> <div class="contain" id="con1" ref="con1" :class="{anim:animate==true}"> <List ...原创 2019-10-21 14:17:43 · 2640 阅读 · 0 评论 -
vue小练习之todolist
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小目标列表</title> <link href="https://cdn.bootcss.co原创 2019-02-19 17:27:33 · 215 阅读 · 0 评论 -
vue之自定义指令
这篇文章以聚焦输入框为例简单总结一下vue中自定义指令的内容。当页面加载时,该元素将自动获得焦点 ,也就是当你打开页面时还没有点击任何内容,该输入框就已经处于聚焦状态。下面用指令实现这个功能: // 注册一个全局自定义指令 `v-focus` Vue.directive('focus',{ // 当被绑定的元素插入到 DOM 中时…… inserted:fun...原创 2018-12-12 11:33:53 · 124 阅读 · 0 评论 -
vue练习之品牌列表案例
今天做了一个品牌列表案例,一个动图展示今天的学习成果:这次页面用了bootstrap框架上代码:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &am原创 2018-12-11 17:44:55 · 907 阅读 · 2 评论 -
vue中计算属性与方法的不同之缓存
今天没太多进展,只是看了一点vue.js官网的一些东西。说实话,看的很吃力。今天总结一下vue中计算属性computed和方法methods在缓存上的区别。以上两幅图中,实现的功能是相同的:将message的值反转。图一是像绑定普通属性一样在模板中绑定计算属性,reversedMessage依赖于message,当 message 发生改变时,所有依赖 reversedMessage 的绑定也...原创 2018-12-03 18:10:49 · 397 阅读 · 0 评论 -
vue小练习之添加、删除信息行
做了一个添加、删除信息行的小练习,比较简单,上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id=原创 2018-12-05 16:27:44 · 246 阅读 · 0 评论 -
vue.js条件渲染中v-if 对比v-show
这篇记录一下vue的条件渲染:v-if:<h1 v-if="ok">Yes</h1>也可以用 v-else 添加一个“else 块”:<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>在 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令,所以原创 2018-12-05 13:32:57 · 419 阅读 · 0 评论 -
vue小练习之购物车实现
今天从网上找了一个购物车的小例子,照着敲了一下,收获不少。下面的用一个小动图展示一下成果:接下来上代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link href="css/shoppingcart.css" rel="stylesheet"原创 2018-12-07 17:57:00 · 493 阅读 · 0 评论 -
vue小练习——选项卡切换
上午做了个选项卡的小练习,很简单,可以熟悉语法吧。上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="原创 2018-11-30 11:20:06 · 294 阅读 · 0 评论 -
vue小项目练习——输入标题并将输入的标题添加到标题列表
第一次写博客,先自我介绍一下吧,我是18届中国石油大学(华东)计算机科学与技术专业的本科毕业生[有没有学长或者学姐,吱吱吱],现从事前端工作。希望通过这个博客记录自己的学习之路,加油!今天没有开发任务,自学了一下vue,做了个小练习。之前只是简单看了一下vue的模板语法,今天的小实例让我学习不少。上代码。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head...原创 2018-11-29 17:30:56 · 544 阅读 · 0 评论