![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
ColourfulTiger
这个作者很懒,什么都没留下…
展开
-
vue中v-for循环时只处理事件触发项的内容(仅一项)
关于怎样处理vue中v-for循环时对循环内容中单独的一项的事件处理有如下方案:(1)获取v-for循环内容中的下标值(val为navContent中的内容,index为下标) <p v-for="(val,index) in navContent" class="nav"> {{val}} --{{index}} <i ...原创 2018-06-05 10:52:01 · 9678 阅读 · 0 评论 -
vue开发购物车,解决全选单选问题
实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购物车全选,单选的效果。大体内容如下:主要是通过checkbox以及v-if v-else实现内容的隐藏与显示当全选对应的checkbox为选中状态,在这里指的是:<th>全选<inp...原创 2018-07-03 16:26:53 · 7391 阅读 · 0 评论 -
vue v-for循环嵌套的探索(二)
使用v-for循环的目的就是为了处理大量类型重复的数据,归根结底是一种有规律的数据,但是有些规律却不是那么容易的,很多时候,我们会使用到循环,甚至多重循环的嵌套,不同的循环嵌套对应着不同的json数据的结构,本篇主要讲述的是使用v-for循环解决部分同,部分不同的情况,主要是针对表格table来使用的。模拟的json数据如下:{ "name":"小王", "age":20, "ph...原创 2018-08-05 21:11:22 · 16780 阅读 · 1 评论 -
vue中使用自己定义的js,并注册为全局的
在使用vue的时候少不了要写自己的js,但是自己的js怎样才能被定义为全局的,供众多的文件使用呢?方法如下:第一种情况:在main.js中引入,并在其中使用。1、写好自己的js文件,并放置在src文件下用一个目录api来封装。2、在main.js文件中引入这个js的路径,然后在将其设置成一个单独的变量,用的时候通过变量来调用。import { x1,x2,x3} from 'j...原创 2018-08-11 22:57:42 · 3361 阅读 · 1 评论 -
vue 组件通信 props的使用方式
props的使用方式如下:一、组件自身的属性对象 --嵌套内外层组件中 负责传递数据 (主要是父级---子级)。parent----pass props---childchild ---- emit events ---- parent二、props:["xx1"]1、xx1 来自父组件中的类型,已在父组件声明的类型2、整体的引用位置为子组件3、使用该内容的位置:子...原创 2018-08-11 23:33:53 · 370 阅读 · 0 评论 -
vue 使用模拟的json数据查看效果
在数据交互这一块,很多时候是要和后台进行沟通配合的,作为初学者或者纯前端的学习者,我们不可能经常有后台配合自己来展示,那么怎样才能模拟类似的效果呢?后台传来的值其实也是一种json格式的数据,我们只需要模拟json形式的内容即可。具体方法如下:1)封装一个json的文件,里面存放需要的数据,在webpack环境下放置在common文件夹中。数据如下:{ "name":"...原创 2018-08-02 23:20:17 · 1859 阅读 · 0 评论 -
vue 自定义css样式覆盖elementUI的样式
在开发中,我们大多要结合自己实际情况,去做符合本项目要求的样式,那么自定义css样式怎样覆盖原来已经写好的样式呢?今天主要讲的就是结合vue与elementui来写自己的自定义样式。引入自己写的css位置如下:1、局部引入:在各自vue文件中使用,互不干扰 style标签里面的 关键字scoped【限位标记】 添加这个关键字的作用:将这个style里面的样式都限制在...原创 2018-08-12 23:31:20 · 12991 阅读 · 0 评论 -
element使用自定义的loading加载效果
在使用loading加载的过程中,elementui提供了两种样式,但是针对不同的项目,也是有着不同的需求,需要不同的或者特制的loading加载效果。解决思路如下:结合elementui本身的标签(某种意义上来说该框架的标签即为class),从浏览器最终的渲染效果出发,查看最终渲染成的元素。可以看到带el的标签最终在浏览器中以class的形式展示。如果我们没有svg图标,却又想要...原创 2018-08-23 18:03:59 · 12784 阅读 · 0 评论 -
vue + elementui实现dialog自适应窗口的效果
在使用dialog的时候,或多或少会遇到一个问题:当浏览器被缩放到最小的时候,dialog被挤变形啦,里面的内容如果是固定宽高的话,会变得额外的丑陋。怎样结合vue来改变这一现象呢?思路如下:浏览器的缩放,我们是无法控制的,但是我们可以改变的是我们的网页内容。1、给定一个最小宽度,当浏览器缩放到某一程度的时候,我们的内容就不在支持缩放的效果了。 即:min-width 设置成...原创 2018-08-21 10:30:53 · 25222 阅读 · 0 评论 -
vue环境下一个主页面引入多个子组件的方法
通常我们使用的是单个文件引入,但是这样就会有很多代码是重复的,怎样才能实现“按需“引入呢?1、常见的引入单个vue文件的写法:import Header from '@/view/layout/Header'; 2、实现”按需“引入的写法:”按需“引入多个vue文件的写法:import {Header,Footer,Content} from '@/view/layout';...原创 2018-09-06 12:37:24 · 18267 阅读 · 1 评论 -
vue环境使用scss来写css样式
1、在本建立vue项目的文件下打开命令窗口2、输入: cnpm install sass-loader node-sass vue-style-loader --D 下载3、打开项目文件下的build文件,找到webpack-base-conf.js文件,配置以下内容即可module: { rules: [ { test: /\.vue$/, ...原创 2018-09-06 17:39:47 · 3012 阅读 · 0 评论 -
父组件操作子组件的方式
1、子组件<template> <div class=""> {{form}} </div></template><script>export default { props:['form'], data () { return { msg: 'layout' } }}<..原创 2018-09-23 22:23:59 · 525 阅读 · 0 评论 -
vue+定时器 自动变化的进度条
一、定时器的写法:(本例运用的是setInterval)(1)对定时器使用的基本理解 定时器名 = setInterval(“要执行的函数名”,定时时间毫秒); //定时器clearInterval(“定时器名”); //取消定时器(2)本例中应用的模式var id=setInterval(()=>...原创 2018-10-01 19:36:22 · 4033 阅读 · 0 评论 -
vuex环境搭建及小案例
1、在项目下安装vuex:npm install vuex --save-dev2、在main.js中注册vuex:import Vuex from 'vuex' //注册vueximport store from './vuex/store' //某一值的初始状态及改变方法new Vue({ el: '#app', router, store...原创 2018-10-14 17:31:59 · 494 阅读 · 0 评论 -
vue 中引用字体图标的方式
1、全局安装font-awesomecnpm install font-awesome --save-dev2、main.js中引入 import 'font-awesome/css/font-awesome.min.css'3、在相关文件中使用<i class="fa fa-motorcycle" aria-hidden="true"></i>...原创 2018-09-30 16:18:17 · 1156 阅读 · 0 评论 -
vue 解决input内值的双向绑定问题
在使用vue进行双向绑定的时候,第一想到的肯定是官方语法{{msg}},但是在input中如果这样想,那就错啦。错误的写法如下:<input type="text" value="{{item.age}}" />既然这种写法是错误的,那么怎样才能实现在input中的数据双向绑定呢?方法如下:用v-model进行绑定<input type="text" v-model="item....原创 2018-07-03 08:43:30 · 41640 阅读 · 0 评论 -
vue 组件通信(子组件传值作用于父组件)
之前的学习之中一直没有涉及到组件通信的问题,今天做了一个登录然后要结合跳转其他页面,但是结合vue单页面应用开发的设计,子组件在父组件上的显示与否是需要一个开关的,我将这个开关安装在父组件上,由子组件自己控制是否显示自己。而这就设计到组件之间的通信问题。本篇重点就落在通信问题上。父组件:<template> <div class="titlehead"> <el...原创 2018-06-19 17:26:44 · 223 阅读 · 0 评论 -
vue v-for遍历对象中的某一项的内容
在vue中使用对象的情况有很多,怎样实现遍历对象中一组重复的内容,并显示出来呢?左侧导航的一种做法(1)原始数据构成,在data中的return函数内部 navTo:{ "operate":[ {"name":"衣服","path":'/one'}, {"name":"文具","path&q原创 2018-06-05 13:08:12 · 7382 阅读 · 0 评论 -
vue 多层路由的实现
在vue webpack中实现多层路由的步骤归纳如下:(1)在利用webpack生成的文件中找到components文件夹,在里面生成自己想要的vue文件; engine.vue iexhuast.vue(2)找到router文件下的index.js,引入你生成的vue文件 import Vue from 'vue' import Router fr...原创 2018-06-05 13:24:46 · 2289 阅读 · 0 评论 -
vue webpack 组件基础(一)
谈及组件,最开始,自己也不是很明白,但是在学习的过程中,逐渐明白了这个东西,它是一种可以重复使用的东西,可以减少很多无用功的东西,今天从组件的入门基础说起。1、基本环境的搭建问题 在webpack中,搭建的方式如下: 1)、首先有一个vue文件,如hello.vue文件 2)、其次,在对应的文件中引用这个文件 3)、在引用的文件中,加入com...原创 2018-06-12 18:24:02 · 348 阅读 · 0 评论 -
vue v-for循环生成router-link,含可用路由
接着上一篇的内容,使用循环来完成router-link的生成,并可以实现界面的路由(1)html部分实现循环对路由的配置核心:对路径的配置,红色部分。<p v-for="(operate,path,index) in navTo.operate" class="nav" @click="change(index)"> <router-link :to="{ path: opera...原创 2018-06-05 21:18:26 · 12614 阅读 · 1 评论 -
vue v-for循环解决img标签的src动态绑定问题
在解决这个问题上,遇到了很多错误的方案,一直没有跑通,有些是图片标记出现了,但是图片内容没有出现,这就很让人头疼了,下面,我讲解我操作成功的案例吧。1、目录结构如下图片放置在与src同级的static文件夹下,在这里,我放置在slider中2、数据配置如下: 注意引入的路径,直接从static文件中对应的地方引入。data () { return { product:[ ...原创 2018-06-13 10:49:04 · 36246 阅读 · 3 评论 -
vue v-for 循环嵌套的探索(一)
举一个简单的例子:1、结构部分内容(1)html 、css部分<div class="Classfily" v-for="(subtitle) in pdata.subtitle"> <el-row> <!--分类--> <el-col :span="24"> <div class="g原创 2018-06-06 11:14:57 · 6065 阅读 · 0 评论 -
vue webpack中使用ajax传输数据给后台
在使用数据传输中,大多数采用的都是ajax技术,那么在vue中怎样使用ajax技术呢?本篇将带你入门vue axios中ajax技术。1、基本配置 (1)首先在你的vue项目下配置对应的文件axios 下载axios组件,最终放置在node_modules\axios\dist中 npm install axios -S (2)配置main.js中的内容 ...原创 2018-06-14 18:01:30 · 4433 阅读 · 1 评论 -
vue 纯js监听滚动条到底部
在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议。1、怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3...原创 2018-06-15 19:04:03 · 23792 阅读 · 4 评论 -
vue 获取路由的参数,并判断是否为某一特定值
前提环境:webpack (1)路由的配置在router下的index.js文件中配置路由及参数 本例以子路由为主:path:'/HelloWorld/engine/:id',name: 'engine',component:engine 此处的id为路由参数,前面的内容为路径。export default new Router({ routes: [ { p...原创 2018-06-09 09:40:43 · 7791 阅读 · 0 评论 -
vue vue-router传参,v-for与v-if结合遍历显示该参数对应的内容
问题描述:接着上一篇的router-view来讲,本次主要解决的是获取地址栏的http://localhost:8081/#/HelloWorld/engine/2中的参数id的值:2,怎样通过2来使用v-for遍历数组中对应的id为2的那一栏数据,注:仅显示id为2的这一项内容。即通过参数传递过来的值决定最终要显示的数组中的那一项内容。环境:webpack v-cli1、基本配置操作(1)rou...原创 2018-06-09 11:57:14 · 7006 阅读 · 0 评论 -
vue axios解决后台没法收到数据的问题
之前有一篇文章中由于没有测试后台数据这一块,现在这篇为前一篇的补充,主要是解决数据通过ajax的传输问题,以及后台怎样获取到前端通过data传过去的值的问题。 首先用axios来写ajax形式的传输代码 (1)使用input中的v-model来赋值 var username = this.user; var password = this.pass; t...原创 2018-06-18 19:28:32 · 1369 阅读 · 0 评论 -
vue axios前后端数据交互问题(2)
前一篇的介绍中遗留了几个问题,而且部分内容即success、error那部分有误,具体内容以本篇的为主。本篇解决的问题如下:问题:1、后台获取前端数据的值; 2、前端渲染接收到的后台的值; 3、在axios中this的指向问题。1、后台获取到前台的值,首先在main.js中配置以下文件import axios from 'axios'import qs from '...原创 2018-06-18 21:26:04 · 1932 阅读 · 1 评论 -
vue自定义进度条的制作方法(含css属性值的两种动态改变方式)
雏形部分接上一篇文章:https://blog.csdn.net/ColourfulTiger/article/details/82910505结合vue制作自定义的进度条,优势在于采用了vue特有的样式绑定,与双向绑定的方法,达到数据与进度条的进度一致。突破点:通过变量来动态改变属性对应的属性值。知识点补充: (1)看了一些文章采用动态的改变值的...原创 2018-09-30 17:47:27 · 6443 阅读 · 1 评论