vue
关注
分享
扫一扫
鹿鸣_呦呦
这个作者很懒，什么都没留下…
展开
-
函数调用vue中的方法
mounted(){window.clearSelected = this.clearSelected;},外部函数中直接调用 clearSelected()即可原创 2020-04-28 10:01:57 · 1224 阅读 · 0 评论 -
js数组随即取值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body></body><script> window.onload = function() { var arr = ["009", "0...原创 2020-01-09 09:59:58 · 284 阅读 · 0 评论 -
vue 星星组件
{seller.score: 4.2}import star from ‘components/star/star’;components: {star}//组件页面<template> <div class="star" :class="starType"> <span v-for="(itemClass,index) in itemC...原创 2019-12-17 16:21:04 · 203 阅读 · 0 评论 -
vue 背景图片
bg-image($url) background-image: url($url + "@2x.png") @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) background-image: url($url + "@3x.png")原创 2019-12-16 16:48:31 · 322 阅读 · 0 评论 -
vue 1px边框
border-1px($color) position: relative &:afterdisplay: blockposition: absoluteleft: 0;bottom: 0;width: 100%;border-top: 1px solid $color;content: ’ ’border-none() &:afterdisplay...原创 2019-12-16 16:46:51 · 3350 阅读 · 0 评论 -
Vue css各种居中显示、固定在屏幕某个位置
一、居中显示备注：其中的parent为上一层或者父布局；child为当前div1.1 水平居中已知宽度块元素宽度 :.child{width:1000px;margin:0 auto;}1文本内容居中:.parent{text-align:center;}1通过表格:.child{display:table;margin:0 auto;}1已知宽度,通过设置position...转载 2019-11-28 10:01:58 · 5687 阅读 · 0 评论 -
使用vue router 的过程中报错Error in render: "TypeError: Cannot read property 'matched' of undefined"
最近在使用vue router的过程中遇到了一个"TypeError: Cannot read property ‘matched’ of undefined" 这样的错误，也是找了很久，其实这是因为创建的router实例是有命名规范的import Vue from 'vue'import App from './App.vue'import rou from "./router/index...原创 2019-11-19 16:04:55 · 1321 阅读 · 0 评论 -
vue 简易购物车
简易购物车，增加减少删除，算商品总价<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>简易购...原创 2019-11-06 16:09:14 · 197 阅读 · 0 评论 -
vue模板中对图片src的动态引入（路径）问题
pay attention: 书写本文时vue的版本还是2.X。在做移动端项目时，底部导航的名称和图片习惯于用json文件中引入数据。而在vue项目中，当要在中动态引入图片时，若直接从json文件中导入item.src字段为’assets/image/XX.png’的值到:src="XXX"中时，会出现图片404的情况。如:这么循环引入img图片，页面会报404，表明从指定的路径上去找...转载 2019-10-22 17:42:06 · 2211 阅读 · 0 评论 -
vue项目中碰到的问题汇总（持续更新）
创建项目时提示权限不够，保存文件时一直提示输入密码，ERROR: “Failed to save. Insufficient permissions.”，使用如下方法解决，看评论有说不要轻易使用777，但是此方法是目前尝试的最有用的办法sudo chmod -R 777 filename...原创 2019-10-18 15:28:54 · 934 阅读 · 0 评论 -
vue3秒后显示隐藏显示其他元素
<template> <div id="halloween2019"> <!-- loading --> <div class="loading-page page-item" v-if="!show"> <v-loading>v-loading</v-loading> </div...原创 2019-10-17 10:45:39 · 2976 阅读 · 0 评论 -
vue中使用stylus
安装步骤基于使用vue-cli创建的项目。npm install stylus -D命令，在项目内安装stylus。（注意：命令结尾 -D 即是 --save-dev 的简写形式）需要安装loader，通过 npm install stylus-loader css-loader style-loader --save-dev修改webpack.base.conf.js 文件，在rules...原创 2019-10-15 14:52:15 · 165 阅读 · 0 评论 -
五、vue基本指令（二）— 事件绑定
1. 事件监听可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter ...原创 2019-10-12 18:32:22 · 208 阅读 · 0 评论 -
四、vue基本指令(一)
1. v-text更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span>2. v-once通过使用 v-once 指令，你也能执行一...原创 2019-10-12 17:50:34 · 190 阅读 · 0 评论 -
vue仿饿了么实例问题汇总1
backdrop-filter: blur(10px);这个属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。filter这其实是一种“假”模糊，需要一层做背景并使用filter属性达到模糊效果，另一层（在背景层之上）设置一个半透明的背景色。如下：...原创 2019-09-18 17:16:04 · 134 阅读 · 0 评论 -
Flexbox解决sticky footer问题
html标签元素为：<header> <h1>Site name</h1> </header> <main> <p>Bacon Ipsum dolor sit amet... <!-- Filler text from baconipsum.com --></p> </main&g...转载 2019-09-18 17:41:36 · 140 阅读 · 0 评论 -
vue中事件绑定函数加括号和不加括号的区别
html代码<div id="example-2"> <button @click="test">测试</button></div>js代码new Vue({ el: '#example-2', data(){ return { } }, methods: { test(id){ cons...原创 2019-09-19 16:23:54 · 6256 阅读 · 1 评论 -
vue 星星组件
整个流程是:绑定星星类型的class(48,36,24尺寸),使用starTypehtml部分<div class="star star-48"><span class="star-item on"></span><span class="star-item on"></span><span class="star-it...原创 2019-09-20 17:44:54 · 534 阅读 · 0 评论 -
一、vue创建项目
1.vue-cli脚手架安装1）检查node版本，4+； node -v2) 安装vue-cli sudo npm install -g vue-cli vue命令可确认是否安装成功3) 创建项目 vue init webpack 项目名 此处如有以下报错提示，可尝试添加sudorror: EACCES: permission denied, unlink '/User...原创 2019-09-30 16:14:42 · 136 阅读 · 0 评论 -
二、vue项目webpack打包
1.入口(entry) :使用哪个模块来构建内部依赖图的开始我们可以新建webpack.config.js来制定以上概念。接下来一项一项来解释。1entry（如下图所示，分为单入口、多入口、混合入口）2.输出(output) :在哪里输出它所创建的bundles及命名规则【tips】这里需要注意的用__dirname需要引用node自带的path【tips】filename中的[n...转载 2019-09-30 16:35:16 · 203 阅读 · 0 评论 -
三、vue-router
1. 介绍Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定...原创 2019-10-11 18:40:59 · 196 阅读 · 0 评论 -
vue仿饿了么项目--vue实现1像素边框问题
1像素边框问题其实就是Dpr的比例问题,例如 Retina屏设置1px边框，实际显示2px,因为Dpr是2,所以会显示为2px网上有很多方法:7 种方法解决移动端 Retina 屏幕 1px 边框问题目前这里用的是伪元素 + transform 实现:伪元素:总结伪类与伪元素::after 在某元素之后插入某些内容::before 在某元素之前插入某些内容原理是利用 :befor...转载 2019-09-16 20:30:16 · 519 阅读 · 0 评论