
vue
文章平均质量分 52
光明小学王小雨
出来挨打
展开
-
v-model绑定vuex中的数据
思路:通过使用computed的get和set方法去获取和改变vuex中的value<template> <div> <input type="text" v-model="message"> </div></template><script>export default { computed:{ message:{ get(){原创 2021-12-13 14:18:46 · 1476 阅读 · 0 评论 -
VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出
参考:VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出一、安装vue-json-excelnpm install vue-json-excel -S二、main.js中引入import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)三、页面中使用代码<download-excel class = "export-excel-wrappe原创 2021-10-08 11:11:26 · 2899 阅读 · 1 评论 -
Vue点击按钮跳转页面的实现方法
1、跳转外部链接并覆盖当前页<el-button type="primary" @click="cimsInputClick">应用入口</el-button>cimsInputClick () { window.location.href = 'https:\\www.mscims.com' }2、跳转不覆盖当前页面,在新窗口打开<el-button type="primary" @click="cimsInputClick">应用入口&l转载 2021-09-02 16:11:07 · 9633 阅读 · 0 评论 -
VUE 实现复制内容到剪贴板功能
一、安装插件npm install vue-clipboard2 --save二、全局注入(main.js)import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)三、使用<ul class="file-list"> <li v-for="(f, index) of files" :key="index"> <span>[文件{{index + 1}}] {{f}}</原创 2021-09-02 15:21:39 · 161 阅读 · 0 评论 -
TypeScript基础学习 vue-element-admin js版本项目中引入ts混用(4)
1、安装typescript 、vue-property-decorator、vue-class-component、ts-loader因为最新的ts-loader 9 不支持 webpack 4,所以安装低一点的版本这里vue-class-component不装理论上也可以,但我项目里打包报错提示要装就先装一下吧npm install typescript vue-property-decorator vue-class-component --save-devnpm install ts-原创 2021-08-26 15:14:23 · 1550 阅读 · 1 评论 -
TypeScript基础学习 Vue中引用typescript(3)
参考vue-typescript-admin-element-ui 基于Vue+typescript版的后台管理系统模板。众所周知,js是一门弱类型的语言,尤其是在变量赋值时,永远都是给变量直接赋值各种类型值来初始化,线上一些隐藏的bug就冷不防会暴露出来。把这种错误扼杀在项目开发编译阶段而非上线阶段,所有就有了typescript超集的出现。那Vue中是怎么引用typescript项目的呢一、vue-property-decoratorvue-property-decorator在vue-class原创 2021-08-25 11:34:07 · 1703 阅读 · 0 评论 -
TypeScript基础学习 面向对象(2)
第二章:面向对象面向对象是程序中一个非常重要的思想,它被很多同学理解成了一个比较难,比较深奥的问题,其实不然。面向对象很简单,简而言之就是程序之中所有的操作都需要通过对象来完成。举例来说:操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象一切操作都要通过对象,也就是所谓的面向对象,那么对象到底是什么呢?这就要先说到程序是什么,计算机程序的本质就是对现实事物的抽象,抽象的反义词是具体,比如:照片是对一个具体的人的抽象,汽车模型是对具体汽车原创 2021-08-24 18:11:20 · 146 阅读 · 0 评论 -
TypeScript基础学习(1)
第一章 快速入门0、TypeScript简介TypeScript是JavaScript的超集。它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同原创 2021-08-24 18:07:01 · 159 阅读 · 0 评论 -
vue使用Moment插件格式化时间
参考vue使用Moment插件格式化时间vue中使用moment使用npm命令安装momentnpm install moment --save一、直接使用安装依赖后直接导入进行使用,不太方便,在要使用的每个组件中都需要导入import moment from 'moment'console.log(moment(val).format('YYYY-MM-DD HH:mm:ss'))二、在main.js中全局导入进行使用1、main.js 挂载 引入import moment fr原创 2021-07-16 11:40:05 · 2549 阅读 · 0 评论 -
vue-cli3和4 使用vue.config.js
#vue.config.jsvue.config.js 是一个可选的配置文件,在vue-cli3以后被隐藏到module文件夹中了,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。vue cli3.0项目中需要配置其他参数时,需要新建文件’vue.config.js’,(这文件名是固定这么写的),与packa原创 2021-06-17 18:22:45 · 368 阅读 · 0 评论 -
es6:=>(箭头函数)基本用法
es6:=>(箭头函数)基本用法转载 2021-06-04 10:44:05 · 610 阅读 · 0 评论 -
async和await
Vue-如何使用axios实现同步请求原创 2021-06-04 14:03:38 · 104 阅读 · 0 评论 -
vue moment库格式化处理日期
https://www.cnblogs.com/sylys/p/12157548.html原创 2021-02-18 16:06:20 · 150 阅读 · 0 评论 -
Django Vue 跨域问题
一、Django中设置使用pip安装pip install django-cors-headerssetting.py中设置INSTALLED_APPS = [ ... 'corsheaders']MIDDLEWARE = ['corsheader.middleware.CorsMiddleware', # 尽量放在csrf前面...]添加中间件,需要注意放的位置,在SessionMiddleware后面以及CommonMiddleware前面添加配置参数#原创 2021-02-12 13:44:32 · 1342 阅读 · 0 评论 -
十二、axios基本使用
参考 https://www.jianshu.com/p/f959366fadb8一、安装1、直接引用<script src="https://unpkg.com/axios/dist/axios.min.js"></script>2、在VUE CLI中使用进入项目然后安装axiosnpm install axios --save因为axios不是vue的插件,所以不能直接用use方法,需要将其加载到原型上。import axios from 'axios'如原创 2020-11-30 18:21:30 · 519 阅读 · 0 评论 -
十一、Vuex
参考 VueX(Vue状态管理模式)五分钟搞懂Vuex一、介绍1、官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。2、状态管理到底是什么?可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后,将原创 2020-11-30 11:18:32 · 401 阅读 · 0 评论 -
十、Promise
一、简介1、Promise是异步编程的一种解决方案。我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去。如果只是一个简单的网络请求,那么这种方案不会给我们带来很大的麻烦。但是,当网络请求非常复杂时,就会出现回调地狱。2、我们来考虑下面的场景(有夸张的成分):我们需要通过一个url1从服务器加载一个数据data1,data1中包含了下一个请求的url2我们需要通过data1取出u原创 2020-11-27 14:59:49 · 381 阅读 · 0 评论 -
九、模块化工程中使用vue-router
一、默认的vue-router结构使用vue-router的步骤:第一步: 创建路由组件第二步: 配置路由映射: 组件和路径映射关系第三步: 使用路由: 通过<router-link>和<router-view>创建一个vue cli项目vue create learnvuerouter在选择安装的loader里记得选择vue-router,如果没装的话创建项目后使用npm install vue-router --save装一下。选择html5的history模式原创 2020-11-25 19:06:51 · 428 阅读 · 0 评论 -
URL的hash和HTML5的history
URL的hash和HTML5的history转载 2020-11-25 15:24:20 · 157 阅读 · 0 评论 -
八、VUE CLI
一、介绍使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是什么意思?CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.Vue CLI是一个官方发布 vue.js 项目脚手架使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.准备工作安装NodeJS(可选原创 2020-11-24 13:53:52 · 156 阅读 · 0 评论 -
七、webpack 介绍
一、介绍前端模块化在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件,我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用(在后续我们会看到)。这就是webpack中模块化的概念。打包就是将webpack中的各种资源模块原创 2020-11-18 19:07:18 · 600 阅读 · 0 评论 -
ES6 对象增强写法
属性简写,会将变量名作为key,变量值作为value方法简写原创 2020-11-17 11:25:13 · 181 阅读 · 0 评论 -
六、nodejs安装和基本操作
一、nodejs 安装1、介绍简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。2、windows下安装参考菜鸟教程Node.js 安装配置安装完后打开命令行查看node版本二、Node.js 创建第一个应用在我们创建 Node.js 第原创 2020-11-11 11:38:38 · 219 阅读 · 0 评论 -
五、Vue路由
一、介绍首先我们来学习三个单词(route,routes,router):route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由;routes:它是个复数,表示多个的集合才能为复数;即我们可以理解为多个路由的集合,JS中表示多种不同状态的集合的形式只有数组和对象两种,事实上官方定义routes是一个数组;所以我们记住了,routes表示多个数组的集合;router:译为路由器,上面都是路由,这个是路由器,我们可以理解为一个容器包含上述两个或者说它是一个管理者,负责管理上述两个;原创 2020-11-10 15:17:05 · 546 阅读 · 1 评论 -
四、Vue生命周期
参考Vue - 生命周期详解vue2.0-vue实例的生命周期vue实例的生命周期原创 2020-11-02 18:13:49 · 137 阅读 · 0 评论 -
三、Vue组件
一、简介组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件注册一个全局组件语法格式如下:Vue.component(tagName, options)tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:<tagName></tagName>示例一...原创 2020-10-30 18:24:02 · 314 阅读 · 0 评论 -
二、vue自定义指令
参考教女朋友学习 vue中的指令及其自定义指令在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,开发人员仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。示例一、注册一个 v-focus 指令,实现了在页面加载完成之后自动让输入框获取到焦点的小功能。{% load static %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-10-30 17:20:36 · 346 阅读 · 0 评论 -
一、vue简单示例
一、django模板变量和vue冲突解决 {{ }}如果不可避免的在同一个页面里既有 django 渲染又有 vue 渲染的部分,可有 2 种方式解决方法一:采用 vue 的 delimiters 分隔符。new Vue({ delimiters: ["{[", "]}"] // 可自定义符号})方法二:建议把 vue 的部分用 {% verbatim %} 包起来。我这里使用这种方法见文档:https://docs.djangoproject.com/en/2.2/ref/templa原创 2020-10-28 18:13:30 · 5632 阅读 · 1 评论