一，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服务器去拿数据。这时候需要服务器做一个代理：即前端向其...
1、官网定义：v-model指令-----在表单input，textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上是语法糖，它负责监听用户的输入事件以更新数据。<template><div><div>v-model一般使用方式：</div><div><input v-model="message"><p>同步更新为: {{ message }}</p></div></div> </template><script>export default {data() {return {message: "初始值"}}} </script><style> </...
直接贴代码了：先上输入前的样子：<style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-block;width:150px;font-size:15px;color:#000;}</style></head><body><div id="example"><input type="text" id="searchText" placeholder="搜索i...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><form action="" method="post" @submit.prevent="sub"><input type="text" name="" v-model="user"/><input type="password" name="" v-model="pwd"/><br />性别：<input type="radio" name="sex" value="男" v-model="sex">男<input type="radio" name="sex" value="女" v-model="sex">女<br />爱好：<input name="Fruit" type="ch...
需求：通过不同的参数复用同一组件，实现动态加载数据和图片，同时，在页面刷新时，图片依旧可以加载成功。过程出现的bug和问题： 1、使用params传参后，再次刷新页面，参数丢失导致数据无法再次加载 2、改用query进行传参后，页面刷新后图片无法加载，这是由于图片的url是在created钩子函数调用查询数据api后才进行赋值，而赋值之后页面已经渲染完成，导致图片无法加载成功解决方案： 1、通过localStorage将数据持久化，...
本篇文章主要介绍了Vue2 SSR 缓存 Api 数据，内容挺不错的，现在分享给大家，也给大家做个参考。本文介绍了Vue2 SSR 缓存 Api 数据，分享给大家，具体如下：1. 安装缓存依赖: lru-cachenpm install lru-cache --dev2. api 配置文件config-server.jsvar LRU = require(lru-cache)let api if (process.__API__) {api = process.__API__ } else {api = process.__API__ = {api: http://localhost:8080/api/,cached: LRU({max: 1000,ma...
本篇文章主要介绍了vue项目优化之通过keep-alive数据缓存的方法，内容挺不错的，现在分享给大家，也给大家做个参考。<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符串或正则表达式。...
需求分析 背景： 1.数据列表页，滚动加载数据； 2.多条数据情况下，点击某一条，进入详细页进行编辑（修改，删除）操作； 3.保存返回上一页； 在上面的情况下，想要保持在上次浏览位置，并且保持数据是最新的； 解决办法 1.原始的办法：在点击详情页的时候，记住浏览位置，传递参数或者存到本地缓存，然后在详情页操作完毕后，返回的时候，路由守卫可以判断，是否详情页跳转回来的，然后让页面滚动到上次记录的位置； 思路是这样，...