业务场景：在管理后台，在执行完，增，删，改，操作的时候。我们需要刷新一下页面，重载数据。在JQ中我们会用到location.reload()方法，刷新页面；在vue中，这里需要用到一个 provide / inject 这对用例。（其他方法：this.$router.go(0)，会强制刷新，出现空白页面体验不好）；原理是：通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果。代码如下：1：在父组件中加入<template><div id="app"><router...
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可<el-form :model="addUserForm" :rules="rules" ref="addUserFormRef" label-width="150px"><el-form-item label="用户名称：" prop="userName"><el-input v-model="addUserForm.userName" style="width: 400px"></el-input></el-form-item>这里prop设置的是字段名要和v-model绑定的一致，否则重置表...
很多时候，我们习惯于这样操作数组和对象: data() { // data数据return {arr: [1,2,3],obj:{a: 1,b: 2}};},// 数据更新 数组视图不更新this.arr[0] = ‘OBKoro1‘;this.arr.length = 1;console.log(arr);// [‘OBKoro1‘];// 数据更新 对象视图不更新this.obj.c = ‘OBKoro1‘;delete this.obj.a;console.log(obj); // {b:2,c:‘OBKoro1‘} 由于js的限制，Vue 不能检测以上数组的变动，以及对象的添加/删除，很多人会因为像上面这...
一、技术概述将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面，再传值给后端。该技术是Web开发必备，是前后端交互的纽带。难点在于获取后端数据并且防止数据联动。二、 技术详述1. 从接口获取后端数据(1) 仔细查看后端所传数据的类型。主要是区分数组和单个数据。查看后端的请求方式，区分post或者get。(2) 首先，在data中return一个xxxData:[]数组或一个变量xxxData:<类型>来接收后端传来的数...
本文来自网易云社区。前瞻当前前端界空前繁荣，各种框架横空出世，包括各类mvvm框架横行霸道，比如Angular、Regular、Vue、React等等，它们最大的优点就是可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是脏检查或数据劫持。那么本文就以Vue框架出发，探索作者运用Object.defineProperty来实现数据劫持的奥秘（本文所选取的相关代码源自于Vue v2.0.3版本的源码）。回顾一下Object.defineProperty语法 Ob...
需求：开发h5活动页 需要呈现效果是 自下往上循环滚动n条数据页面布局：<div class="scrollBar"><div :class="[‘winDetails‘, {‘animate-up‘: animateUp}]"><p v-for="item in lotteryAllList" :key="item.id">恭喜{{renderLockerPhone(item.userName)}}获得{{item.giveAmount/100}}元</p> </div></div>scss:.scrollBar {width: 31rem;height: 3.2rem;display: flex;align-items: center;background-color: rgb(255,34,0);b...
在网上的很多博客都是这样说的：在vue-cli3中，存放静态资源的位置已经变成存放在public文件夹中了但是我将文件放在我在根目录下新建的static文件夹也可以被获取到：json文件数据内容如下：Vue-cli3.0项目节省了很多文件，比如讲vue-cli3.0之前版本的build/dev-server.js配置放在了vue.config.js中而我们在Vue-cli3.0中没有找到config.js文件，我们要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）：config配置...
一，vue-resource请求数据介绍：vue-resource请求数据方式是官方提供的一个插件步骤：1，npm安装 npm install vue-resource --save或者使用cnpm淘宝镜像安装，会快很多。cnpm install vue-resource --save加--save是为了在package.json中引用，表示在生产环境中使用。因为我们在日常开发中，如果我们要打包代码给其他人或者上传到github，又或者要发布代码时，package.json就是安装所需要的包。如果只在开发环境中使用，则只...
获取数据的两种方式导航完成之后获取数据：先完成导航，然后在接下来的组件生命周期钩子created中获取数据。在数据获取期间展示一个loading加载中的状态提示。导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。导航完成之后获取数据(可展示loading)在组件的created钩子中获取数据。在获取数据期间展示一个loading状态，可以在不同视图间展示不同的loading状态。<template><div class="post">...
一、目录结构分析node_modules 项目所需要的各种依赖src 开发用的资源assets 静态资源文件App.vue 根组件main.js 配置路由时会用.babelrc 配置文件.editorconfig 编辑器的配置文件.gitignore 忽略的配置文件index.html html入口文件，一般写移动端在这里添加package.json 项目配置文件，管理名称描述作者版本号之类的readme.md 项目的说明文件webpack.config.js webpack的配置文件将.vue的文...
<template> <div> <el-button type="text" @click="dialogFormVisible = true">添加栏目</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="ID" > </el-table-column> <el-table-column prop="cname" label="栏目名称" ></el-table-column><el-table-columnprop="type"label="栏目类型"></el-table-co...
1.state.js 1 import {playMode} from ‘@/common/js/config‘2 const state = {3 singer:{},4 playing:false,5 fullScreen:false,6 playlist:[],7 sequenceList:[],8 mode:playMode.sequence,9 currentIndex:-1, 10} 1112 export default state2.getters.js 1 export const singer = state =>state.singer2 export const playing = state => state.playing3 export const fullScreen = state =>state.fullScreen4 expo...
2.1. 什么是双向绑定？Vue框架很核心的功能就是双向的数据绑定。 双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。这样以来，就彻底变革了之前Dom的开发方式，之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行...
本文来自网易云社区。前瞻当前前端界空前繁荣，各种框架横空出世，包括各类mvvm框架横行霸道，比如Angular、Regular、Vue、React等等，它们最大的优点就是可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是脏检查或数据劫持。那么本文就以Vue框架出发，探索作者运用Object.defineProperty来实现数据劫持的奥秘（本文所选取的相关代码源自于Vue v2.0.3版本的源码）。回顾一下Object.defineProperty语法 Ob...
在vue中使用axios实现跨域请求需求分析：在项目中需要抓取qq音乐的歌曲列表的数据，由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg。从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名)，而host的域名是c.y.qq.com（被请求页面的域名），由于两者不一样，所以不能通过前端直接发送请求给qq服务器去拿数据。这时候需要服务器做一个代理：即前端向其...