vue 开发笔记
vue 开发记录
marked 插件的使用
import marked from "marked";
import hljs from "highlight.js";
import javascript from "highlight.js/lib/languages/javascript";
import "highlight.js/styles/monokai-sublime.css";
init(code){
marked.setOptions({
renderer: new marked.Renderer(),
highlight: function(code) {
return hljs.highlightAuto(code).value;
},
pedantic: false,
gfm: true,
tables: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false
});
return marked(code);
}
axios 的使用及封装
* 封装
import axios from 'axios';
import { Message } from 'element-ui';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='http://127.0.0.1:8000';
//http request 拦截器
axios.interceptors.request.use(
config => {
// 发送数据之前的操作
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 拦截器
axios.interceptors.response.use(
response => {
// 返回数据之前的操作
return response;
},
error => {
return Promise.reject(error)
}
)
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function fetch(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url,data = {}){
return new Promise((resolve,reject) => {
axios.patch(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url,data = {}){
return new Promise((resolve,reject) => {
axios.put(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
- 在main.js中注册方法
import {post,fetch,patch,put} from './axios'
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
- 调用
this.$fetch("/article/").then(response => {
this.articlelist = response;
});
markdown 标签过滤(使用正则)
gettext(code) {
text = codes
.replace(/(\*\*|__)(.*?)(\*\*|__)/g, "") //全局匹配内粗体
.replace(/\!\[[\s\S]*?\]\([\s\S]*?\)/g, "") //全局匹配图片
.replace(/\[[\s\S]*?\]\([\s\S]*?\)/g, "") //全局匹配连接
.replace(/<\/?.+?\/?>/g, "") //全局匹配内html标签
.replace(/(\*)(.*?)(\*)/g, "") //全局匹配内联代码块
.replace(/`{1,2}[^`](.*?)`{1,2}/g, "") //全局匹配内联代码块
.replace(/```([\s\S]*?)```[\s]*/g, "") //全局匹配代码块
.replace(/\~\~(.*?)\~\~/g, "") //全局匹配删除线
.replace(/[\s]*[-\*\+]+(.*)/g, "") //全局匹配无序列表
.replace(/[\s]*[0-9]+\.(.*)/g, "") //全局匹配有序列表
.replace(/(#+)(.*)/g, "") //全局匹配标题
.replace(/(>+)(.*)/g, "") //全局匹配摘要
.replace(/\r\n/g, "") //全局匹配换行
.replace(/\n/g, "") //全局匹配换行
.replace(/\s/g, ""); //全局匹配空字符;
return text;
}
}
vue 使用mockjs 模拟服务器数据
// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
let articles = [];
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}
return {
articles: articles
}
}
// Mock.mock( url, post/get , 返回的数据);
Mock.mock('/news/index', 'post', produceNewsData);
vue 开发笔记的更多相关文章
- vue开发笔记
1.一定要弄明白什么是数据驱动,以前jQuery操作dom的那种思维模式可以不去考虑,在类似框架中任何一个效果的完成都是由数据驱动来完成的. 2.以.vue作为扩展名的文件,是vue组件,他是一个类, ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- 【转】[总结]vue开发常见知识点及问题资料整理(持续更新)
1.(webpack)vue-cli构建的项目如何设置每个页面的title 2.vue项目中使用axios上传图片等文件 3.qs.stringify() 和JSON.stringify()的区别以及 ...
- vue学习笔记之:为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- Vue:实践学习笔记(3)——组件使用
Vue:实践学习笔记(3)——组件使用 全局注册 1.注册组件 Vue.component('my-component',{ //选项 }) 说明:my-component就是注册的组件自定义的标签名 ...
- Vue:实践学习笔记(1)——快速使用
Vue:实践学习笔记(1)——快速使用 Vue基础知识 0.引入Vue 官方地址:Vue的官方下载地址 Vue推荐博客:keepfool 在你的程序中快速引入Vue: <!-- 开发环境版本,包 ...
- vue开发调试工具vue-devtools安装
vue开发调试工具别人总结的非常好,所以直接把链接拿过来了,就当做个笔记了,也希望能帮到有需要的人,感谢“沉着前进”,来源(https://www.cnblogs.com/fighxp/p/78150 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
随机推荐
- PAT天梯赛 L2-020. 功夫传人 【DFS】
题目链接 https://www.patest.cn/contests/gplt/L2-020 思路 从师父开始 一层一层往下搜 然后 搜到 得道者 就更新答案 AC代码 #include <c ...
- Database: index
The whole point of having an index is to speed up search queries by essentially cutting down the num ...
- PS图片透明处理方法
// http://www.3lian.com/edu/2014/06-18/149890.html 今天想把图片背景做成透明效果,以前叫美工的妹纸帮忙做过,自己没留意学. 今天需要做这个东西,特别记 ...
- POJ1113 Wall —— 凸包
题目链接:https://vjudge.net/problem/POJ-1113 Wall Time Limit: 1000MS Memory Limit: 10000K Total Submis ...
- netstat参数记录
可以使用man netstat查看TCP的各种状态信息描述 ESTABLISHED socket已经建立连接 CLOSED socket没有被使用,无连接 CL ...
- SqL注入攻击实践
研究缓冲区溢出的原理,至少针对两种数据库进行差异化研究 缓冲区溢出原理 缓冲区溢出是指当计算机程序向缓冲区内填充的数据位数超过了缓冲区本身的容量.溢出的数据覆盖在合法数据上.理想情况是,程序检查数据长 ...
- 洛谷 P2919 [USACO08NOV]守护农场Guarding the Farm
题目描述 The farm has many hills upon which Farmer John would like to place guards to ensure the safety ...
- 【Lintcode】062.Search in Rotated Sorted Array
题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 ...
- python爬虫知识点总结(二)爬虫的基本原理
一.什么是爬虫? 答:请求网页并提取数据的自动化程序. 二.爬虫的基本流程 三.什么是Request和Response? 1.Request 2.Response 四.能抓取怎样的数据 五.解析方式 ...
- MySql 扩展存储引擎
MySql 扩展存储引擎 下面介绍几个列式存储引擎(都有两个版本:社区版.商业版): 一:TokuDB TokuDB 是一个高性能.支持事务处理的 MySQL 和 MariaDB 的存储引擎.Toku ...