Vue
文章平均质量分 79
Vue
I like study.
热爱技术
展开
-
Vue使用Vuex
state:页面状态管理容器对象。集中存储Vue components中data对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取,利用Vue的细粒度数据响应机制来进行高效的状态更新。原创 2019-10-03 13:11:22 · 196 阅读 · 0 评论 -
vue部署到服务器上访问.json文件返回404错误
问题描述部署到服务器上的.json不能访问,而在本地能访问原因iis服务器没有MIME类型没有添加.json类型解决方法原创 2019-10-13 20:23:36 · 835 阅读 · 0 评论 -
Vue实现视频播放
1.使用html的video标签(适合pc端,支持Ogg、MPEG4、WebM格式)(1)安装video.js插件cnpm install --save video.js(2)在main.js中导入video.jsimport Video from 'video.js'import 'video.js/dist/video-js.css'(3)使用<template>...原创 2019-10-10 00:07:00 · 49505 阅读 · 12 评论 -
Vue实现简单音乐播放
<template> <div> <aplayer autoplay :music="songs2[0]"> </aplayer> <audio :src="currentSrc" autoplay="" controls="" @ended="nextSong"> </audio> ...原创 2019-10-09 23:52:17 · 14054 阅读 · 4 评论 -
Vue兄弟组件之间的传值实现左侧菜单栏和右侧内容区域对应切换
goods.vue<template> <el-row type="flux"> <el-container style="height: 500px; border: 1px solid #eee" > <el-aside width="135px" style="background-color: rgb(238, 241, ...原创 2019-10-06 09:10:38 · 1016 阅读 · 0 评论 -
vue2用axios时报错:Cannot read property 'protocol' of undefined!
之前是这样写的import axios from 'axios'Vue.use(axios)修改import axios from 'axios'Vue.prototype.$axios = axios原创 2019-11-17 17:51:19 · 448 阅读 · 0 评论 -
Vue+NodeJs前后端分离实现
1.创建Vue项目使用vue-cli脚手架工具创建Vue项目vue init webpack myapp创建完成后cd myapp安装一些依赖cnpm install --save axios cnpm install --save styluscnpm install --save vue-loadercnpm install --save css-loader...原创 2019-11-17 18:40:10 · 10792 阅读 · 8 评论 -
Vue解决跨域问题
1.在前端解决在config/index.js配置proxyTable //解决跨域 proxyTable: { //第三方接口接口 '/apia':{ target:'https://api.caiyunapp.com',//目标接口域名 changeOrigin: true,//是否跨域 pathRewrite:...原创 2019-10-08 12:06:52 · 149 阅读 · 0 评论 -
BootStrapVue的使用
1.创建一个Vue项目vue create vue-blog2.运行Vue项目npm run serve出现以下界面3.安装BootstrapVue依赖cnpm install bootstrap-vue bootstrap axios3.引入BootstrapVue和 Bootstrap CSS在main.js中引入以下代码import BootstrapVue from 'bootstrap-vue'import 'bootstrap/dist/css/bootstra原创 2020-11-12 18:05:50 · 550 阅读 · 0 评论 -
vue安装vuex后报错There are multiple modules with names that only differ in casing.
安装vue之后报错There are multiple modules with names that only differ in casing(有多个模块的名称只有大小写不同)解决方法:删除node_modules重新安装原创 2020-02-23 14:15:34 · 260 阅读 · 0 评论 -
vue简单实现轮播图
一 准备数据(1)定义一个dataList,里面存放我们的图片dataList:['../../static/images/300.jpg','../../static/images/301.jpg'](2)currentIndex:来表示当时当前图片的索引currentIndex:0二、显示一张图片 <div class="banner"> <div c...原创 2020-02-16 20:20:25 · 3975 阅读 · 0 评论 -
Invalid default value for prop "value": Props with type Object/Array must use a factory function to
错误提示:Invalid default value for prop “value”: Props with type Object/Array must use a factory function to return the default value.(props default 数组/对象的默认值应当由一个工厂函数返回)错误代码:props: { link: { type: Obje...原创 2020-02-15 16:38:26 · 1357 阅读 · 1 评论 -
-Cannot use v-for on stateful component root element because it renders multiple elements
错误信息:Cannot use v-for on stateful component root element because it renders multiple elements原因:v-for用在文件的根元素上导致vue无法渲染解决方法:在v-for的外面加一层div...原创 2020-02-15 12:29:28 · 387 阅读 · 0 评论 -
Do not use built-in or reserved HTML elements as component id: header
错误:定义了一个header组件但是无法被其他组件引用原因:因为header为h5的标签,vue中规定:组件的名称不能和h5的标签名称相同关于vue的书写规范参考vue官网:https://cn.vuejs.org/v2/style-guide/...原创 2020-02-09 18:35:47 · 1501 阅读 · 0 评论 -
VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法
在axios里使用this.xxxx(xxxx为data里面定义的)报错TypeError: Cannot set property 'xxxx' of undefined主要原因是:在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。可以看下 Stackoverflow 的解释:解决办法:1、用ES6箭头函数,箭头方法可以和父方法共享变量2、在...原创 2019-09-11 19:51:28 · 8582 阅读 · 1 评论 -
vue.js学习(二)
1.条件语句v-if v-else-if v-else<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js条件语句</title> <script src="https://cdn.static...原创 2019-07-26 22:02:30 · 107 阅读 · 0 评论 -
Module build failed: Error: Cannot find module 'stylus'
在vue中使用stylus-loader时报错原因:项目没有安装stylus依赖,先在package.json中的devDependencies中添加"stylus-loader": "^3.0.2",然后在项目目录下cnpm install stylus安装stylus成功,启动项目 ,成功运行...原创 2019-08-04 16:20:08 · 917 阅读 · 0 评论 -
vue.js学习(一)
1.v-html <div id="app"> <h1>{{message1}}</h1> <p>{{message2}}</p> <p v-html="message3"></p> </div> <script type=...原创 2019-07-25 21:40:16 · 122 阅读 · 0 评论 -
windows下vue.js安装
1.安装npm安装后使用 npm-v可以查看npm版本如果npm版本过低升级npmnpm install npm -g2.使用淘宝镜像由于 npm 安装速度慢,所以使用淘宝的镜像及其命令 cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org3.安装vue全局安装vuecnpm install --...原创 2019-07-25 08:40:16 · 115 阅读 · 0 评论