ColourfulTiger的博客

关于怎样处理vue中v-for循环时对循环内容中单独的一项的事件处理有如下方案：（1）获取v-for循环内容中的下标值（val为navContent中的内容，index为下标）        <p v-for="(val,index) in navContent" class="nav">            {{val}} --{{index}}     <i ...

实现全选单选，在vue中无法通过this获取input中的checkbox的checked属性，但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定，同样也可以通过这种方式实现购物车全选，单选的效果。大体内容如下：主要是通过checkbox以及v-if v-else实现内容的隐藏与显示当全选对应的checkbox为选中状态，在这里指的是：<th>全选<inp...

使用v-for循环的目的就是为了处理大量类型重复的数据，归根结底是一种有规律的数据，但是有些规律却不是那么容易的，很多时候，我们会使用到循环，甚至多重循环的嵌套，不同的循环嵌套对应着不同的json数据的结构，本篇主要讲述的是使用v-for循环解决部分同，部分不同的情况，主要是针对表格table来使用的。模拟的json数据如下：{ "name":"小王", "age":20, "ph...

在使用vue的时候少不了要写自己的js，但是自己的js怎样才能被定义为全局的，供众多的文件使用呢？方法如下：第一种情况：在main.js中引入，并在其中使用。1、写好自己的js文件，并放置在src文件下用一个目录api来封装。2、在main.js文件中引入这个js的路径，然后在将其设置成一个单独的变量，用的时候通过变量来调用。import { x1,x2,x3}  from  'j...

props的使用方式如下：一、组件自身的属性对象 --嵌套内外层组件中  负责传递数据 （主要是父级---子级）。parent----pass props---childchild ---- emit  events ---- parent二、props:["xx1"]1、xx1 来自父组件中的类型，已在父组件声明的类型2、整体的引用位置为子组件3、使用该内容的位置：子...

在数据交互这一块，很多时候是要和后台进行沟通配合的，作为初学者或者纯前端的学习者，我们不可能经常有后台配合自己来展示，那么怎样才能模拟类似的效果呢？后台传来的值其实也是一种json格式的数据，我们只需要模拟json形式的内容即可。具体方法如下：1）封装一个json的文件，里面存放需要的数据，在webpack环境下放置在common文件夹中。数据如下：{ "name":"...

在开发中，我们大多要结合自己实际情况，去做符合本项目要求的样式，那么自定义css样式怎样覆盖原来已经写好的样式呢？今天主要讲的就是结合vue与elementui来写自己的自定义样式。引入自己写的css位置如下：1、局部引入：在各自vue文件中使用，互不干扰     style标签里面的 关键字scoped【限位标记】     添加这个关键字的作用：将这个style里面的样式都限制在...

在使用loading加载的过程中，elementui提供了两种样式，但是针对不同的项目，也是有着不同的需求，需要不同的或者特制的loading加载效果。解决思路如下：结合elementui本身的标签（某种意义上来说该框架的标签即为class），从浏览器最终的渲染效果出发，查看最终渲染成的元素。可以看到带el的标签最终在浏览器中以class的形式展示。如果我们没有svg图标，却又想要...

在使用dialog的时候，或多或少会遇到一个问题：当浏览器被缩放到最小的时候，dialog被挤变形啦，里面的内容如果是固定宽高的话，会变得额外的丑陋。怎样结合vue来改变这一现象呢？思路如下：浏览器的缩放，我们是无法控制的，但是我们可以改变的是我们的网页内容。1、给定一个最小宽度，当浏览器缩放到某一程度的时候，我们的内容就不在支持缩放的效果了。      即：min-width 设置成...

通常我们使用的是单个文件引入，但是这样就会有很多代码是重复的，怎样才能实现“按需“引入呢？1、常见的引入单个vue文件的写法：import Header from '@/view/layout/Header'; 2、实现”按需“引入的写法：”按需“引入多个vue文件的写法：import {Header,Footer,Content} from '@/view/layout';...

1、在本建立vue项目的文件下打开命令窗口2、输入： cnpm install sass-loader node-sass vue-style-loader --D 下载3、打开项目文件下的build文件，找到webpack-base-conf.js文件，配置以下内容即可module: { rules: [ { test: /\.vue$/, ...

1、子组件<template> <div class=""> {{form}} </div></template><script>export default { props:['form'], data () { return { msg: 'layout' } }}&lt..

 一、定时器的写法：（本例运用的是setInterval）（1）对定时器使用的基本理解  定时器名 = setInterval(“要执行的函数名”，定时时间毫秒); //定时器clearInterval(“定时器名”); //取消定时器（2）本例中应用的模式var id=setInterval(()=>...

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...

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>...

在使用vue进行双向绑定的时候，第一想到的肯定是官方语法｛｛msg｝｝，但是在input中如果这样想，那就错啦。错误的写法如下：<input type="text" value="{{item.age}}" />既然这种写法是错误的，那么怎样才能实现在input中的数据双向绑定呢？方法如下：用v-model进行绑定<input type="text" v-model="item....

之前的学习之中一直没有涉及到组件通信的问题，今天做了一个登录然后要结合跳转其他页面，但是结合vue单页面应用开发的设计，子组件在父组件上的显示与否是需要一个开关的，我将这个开关安装在父组件上，由子组件自己控制是否显示自己。而这就设计到组件之间的通信问题。本篇重点就落在通信问题上。父组件：<template> <div class="titlehead"> <el...

在vue中使用对象的情况有很多，怎样实现遍历对象中一组重复的内容，并显示出来呢？左侧导航的一种做法（1）原始数据构成，在data中的return函数内部       navTo:{    "operate":[               {"name":"衣服","path":'/one'},               {"name":"文具","path&q

在vue webpack中实现多层路由的步骤归纳如下：（1）在利用webpack生成的文件中找到components文件夹，在里面生成自己想要的vue文件；        engine.vue    iexhuast.vue（2）找到router文件下的index.js，引入你生成的vue文件        import Vue from 'vue'        import Router fr...

谈及组件，最开始，自己也不是很明白，但是在学习的过程中，逐渐明白了这个东西，它是一种可以重复使用的东西，可以减少很多无用功的东西，今天从组件的入门基础说起。1、基本环境的搭建问题        在webpack中，搭建的方式如下：        1）、首先有一个vue文件，如hello.vue文件        2）、其次，在对应的文件中引用这个文件        3）、在引用的文件中，加入com...

接着上一篇的内容，使用循环来完成router-link的生成，并可以实现界面的路由（1）html部分实现循环对路由的配置核心：对路径的配置，红色部分。<p v-for="(operate,path,index) in navTo.operate" class="nav" @click="change(index)"> <router-link :to="{ path: opera...

在解决这个问题上，遇到了很多错误的方案，一直没有跑通，有些是图片标记出现了，但是图片内容没有出现，这就很让人头疼了，下面，我讲解我操作成功的案例吧。1、目录结构如下图片放置在与src同级的static文件夹下，在这里，我放置在slider中2、数据配置如下： 注意引入的路径，直接从static文件中对应的地方引入。data () {    return {        product:[    ...

举一个简单的例子：1、结构部分内容（1）html 、css部分<div class="Classfily" v-for="(subtitle) in pdata.subtitle"> <el-row> <!--分类-->  <el-col :span="24">   <div class="g

在使用数据传输中，大多数采用的都是ajax技术，那么在vue中怎样使用ajax技术呢？本篇将带你入门vue axios中ajax技术。1、基本配置   （1）首先在你的vue项目下配置对应的文件axios    下载axios组件，最终放置在node_modules\axios\dist中         npm install axios -S    （2）配置main.js中的内容      ...

在网页中，我们会遇到很多在滚动条到底部的时候有数据正在加载的事件，那么怎样用vue去实现这样的内容呢？本篇只给出一个雏形，结合vue的生命周期用纯javascript写的一个监听函数，后续操作数据库的部分暂且不议。1、怎样用纯js判断滚动条是否到底部？    先了解几个关键词：    （1）滚动条到顶部的位置：scrollTop    （2）当前窗口内容可视区：windowHeight    （3...

前提环境：webpack （1）路由的配置在router下的index.js文件中配置路由及参数      本例以子路由为主：path:'/HelloWorld/engine/:id',name: 'engine',component:engine      此处的id为路由参数，前面的内容为路径。export default new Router({  routes: [    {      p...

问题描述：接着上一篇的router-view来讲，本次主要解决的是获取地址栏的http://localhost:8081/#/HelloWorld/engine/2中的参数id的值：2，怎样通过2来使用v-for遍历数组中对应的id为2的那一栏数据，注：仅显示id为2的这一项内容。即通过参数传递过来的值决定最终要显示的数组中的那一项内容。环境：webpack v-cli1、基本配置操作（1）rou...

之前有一篇文章中由于没有测试后台数据这一块，现在这篇为前一篇的补充，主要是解决数据通过ajax的传输问题，以及后台怎样获取到前端通过data传过去的值的问题。     首先用axios来写ajax形式的传输代码    （1）使用input中的v-model来赋值      var username = this.user;      var password = this.pass;      t...

前一篇的介绍中遗留了几个问题，而且部分内容即success、error那部分有误，具体内容以本篇的为主。本篇解决的问题如下：问题：1、后台获取前端数据的值；         2、前端渲染接收到的后台的值；         3、在axios中this的指向问题。1、后台获取到前台的值，首先在main.js中配置以下文件import axios from 'axios'import qs from '...

雏形部分接上一篇文章：https://blog.youkuaiyun.com/ColourfulTiger/article/details/82910505结合vue制作自定义的进度条，优势在于采用了vue特有的样式绑定，与双向绑定的方法，达到数据与进度条的进度一致。突破点：通过变量来动态改变属性对应的属性值。知识点补充：                  （1）看了一些文章采用动态的改变值的...