Vue.js

一 课程分类显示 宗旨：总的再次过滤 二 Cookie # export default new Vuex.Store({ state: { name:'', token:'', }, mutations: {}, actions: {} }) #全局数据 #赋值 methods:{ upup:function () { let _this=this this.$http.request({ url:'http://127.0.0.1:8000/login/', method:'post', data:{ name:_this.name, pwd:_this.pwd } }).then(function (response) { _this.$store.state.name=response.data.name _this.$store.state.token=response.data.token }) }, } #取值 < span class ="pull-right" v-if ="!this.$store.state.token" > Vuex状态管理器stoer介绍 vue-cookies -安装:npm install vue-cookies -使用: -store.js中导入import Cookie from 'vue-cookies' -取值:Cookie

第一步：在mail.js中引入 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 第二步：安装 cnpm install vue-infinite-scroll --save 第三步：使用 < div class ="schoolPlatformGroup" v-infinite-scroll ="loadMore" infinite-scroll-disabled ="scrollDisabled" > < ul style ="list-style-type:none" v-for ="(data,index) in cameraList" > < el-tag style ="float: left;color: #409eff;z-index: 999;margin-top: 2px;" > {{data.id}} </ el-tag > < li :id ="'platform'+data.id" class ="platformNameTag" style ="padding: 4px;margin-left: 40px;margin-right: 10px;background: #ffffff;" @click ="clickPlatform(data.id)" > 【{

vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()"> <li v-for="item in noticeList"> ... </li> </ul> <script> export default { data() { return { noticeList: [], animate:false, intNum: undefined, } }, created: function () { this.getNoticeData(); }, methods: { getNoticeData() { this.$http.get('/news/allList', { params: { 'pageNumber': 10, 'currentPage': 1 } }).then(res => { this.noticeList = res.data.items; this.ScrollUp(); }); }, ScrollUp() { this.intNum = setInterval(() => { this.animate=true;// 向上滚动的时候需要添加css3过渡动画 setTimeout(()=>{ this

目录 python基本数据类型 文件处理 函数 模块和包 异常处理 常用模块 面向对象 网络编程 并发编程 MySQL数据库 前端 VUE Django框架 权限管理 rest-framework linux基础 Git Redis Flask框架 爬虫 其他 python基本数据类型 【第一篇】 Python基础 之 变量、用户交互、if条件语句、while循环语句、编码、逻辑运算 【第二篇】 Python基础 之 int、bool、str、列表、元组、字典 【第三篇】 Python基础三 【第四篇】 思维导图 函数 【第一篇】 初始函数 【第二篇】 函数装饰器 【第三篇】 迭代器，生成器 【第四篇】 内置函数、匿名函数 【第五篇】 递归函数 【第六篇】 函数思维导图 【第七篇】 内置函数思维导图 常用模块 【第一篇】 正则表达式 【第二篇】 Python中常用模块一 【第三篇】 Python中常用模块二 【第四篇】 python常用uuid模块 【第五篇】 requests模块 【第六篇】 BeautifulSoup模块 【第五篇】 模块思维导图 面向对象 【第一篇】 初识面向对象 【第二篇】 面向对象的三大特性 【第三篇】 面向对象property属性、静态方法和类方法 【第四篇】 面向对象的进阶 【第五篇】 浅谈面向对象的认识 【第五篇】 面向对象思维导图 网络编程

刚开始使用Vue，里面的坑是一个接一个，今天就遇到一个axios POST传参的问题，我需要在请求中传递参数，然后按官方文档的格式开始操作，代码如下： axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 注：此处是官方示例：点击打开链接 打开控制台，报400，报错信息是：传递的参数不存在，但在请求中看的到参数，只是参数的格式是Request Payload，具体也没看懂是什么，总之知道就是参数格式不对，查阅资料找到两种解决办法，代码如下： 1. var qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 })); 2. var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params); 参考：https://github

简介     混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 钩子函数合并     同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子函数将在组件自身钩子函数之前调用 < body > < div id ="app" ></ div > </ body > </ html > < script src ="./vue.js" ></ script > < script > var Mixins = { created() { console.log( ' Mixins Created ' ) } } new Vue({ el: ' #app ' , mixins: [Mixins], created() { console.log( ' #app Created ' ) } }) // Mixins Created // #app Created </ script > 数据对象合并     数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先（组件的data中变量会覆盖混入对象的data中变量） < body > < div id ="app" ></ div > </ body > < script

前言 vue-cli 都到 3.0.3 了，所以是时候玩转一下 vue-cli 3 的新特性了。 1. vue-cli 3.0.3 以下的安装都是在 macOS 的环境下进行的，当然在 windows 和 linus 下也同理。 1.1 安装 vue cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 可以使用下列任一命令安装这个新 vue-cli 3.0.3 的包： npm install -g @vue/cli # OR yarn global add @vue/cli 你还可以用这个命令来检查其版本是否正确 (3.x)： vue --version 或者： vue -V 1.2使用图形化界面 你也可以通过 vue ui 命令以图形化界面创建和管理项目： vue ui 上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。 1.3 创建项目 1.3.1 默认型 新建文件夹，在该文件夹下打开命令窗口，输入以下命令进行新建项目，当然我起的项目名字叫 vue-webpack-demo vue create vue-webpack-demo 会让你选择默认

Ajax无法下载文件的原因 浏览器的GET(frame、a)和POST(form)请求具有如下特点： response会交由浏览器处理 response内容可以为二进制文件、字符串等 Ajax请求具有如下特点： response会交由Javascript处理 response内容仅可以为字符串 因此，Ajax本身无法触发浏览器的下载功能。 Axios拦截请求并实现下载 为了下载文件，我们通常会采用以下步骤： 发送请求 获得response 通过response判断返回是否为文件 如果是文件则在页面中插入frame 利用frame实现浏览器的get下载 我们可以为axios添加一个拦截器： import axios from 'axios' // download url const downloadUrl = url => { let iframe = document.createElement('iframe' ) iframe.style.display = 'none' iframe.src = url iframe.onload = function () { document.body.removeChild(iframe) } document.body.appendChild(iframe) } // Add a response interceptor axios

输入vue，选择编辑vue.json，插入json对象 { "Print to console" : { "prefix": "vue" , "body" : [ "<template>" , " <div class='$1'></div>" , "</template>" , "" , "<script>" , "export default {" , " name: '$1'," , " data(){" , " return {}" , " }," , " components: {}," , " created(){}," , " mounted(){}," , " methods: {}" , "}" , "</script>" , "<style lang='scss' scoped>" , "</style>" , "" ], "description": "Log output to console" } } 来源： oschina 链接： https://my.oschina.net/u/4328287/blog/3451383

Vue build打包之后，刷新页面出现404解决方案 参考文章： （1）Vue build打包之后，刷新页面出现404解决方案 （2）https://www.cnblogs.com/jasonLiu2018/p/11087538.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4438370/blog/4890789