vue | 易学教程

Vue初识

阅读更多关于 Vue初识

1、Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 2、引入Vue.js 初学，所以直通过CDN服务器引入vue库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue1</title>  <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> </head> 3、vue在js中语法 <script> var vm = new Vue({ el : "#app", data : { msg : "hello world!!!",

vue搜索历史记录缓存实现

阅读更多关于 vue搜索历史记录缓存实现

思路: 1.浏览器缓存永久保存搜索历史数据. 2.页面初始化将数据保存到页面变量中. 3.对搜索历史记录的怎加和删除,要同步到缓存中. ----------------直接看代码---------------- *前端使用的是vue,这里只是代码片段* 1.页面的 div  <div style="margin-top: 46px"> <div v-if="this.showFlag === true" class="search-history"> <div class="tip-words"> <div style="float: left;"> <h4>搜索历史</h4> </div> <div style="float: right;" @click="clearHistoryItems"> <img src="../../img/img/delete-1.png" width="16px"/> </div> </div> <p style="margin-bottom: 10px"> </p> <div v-for="(item,index) in searchHistoryList" :key="index" @click="searchByHistoryKeyWord(item)" class="history-keywords"

在vue中引入外部的css文件

阅读更多关于在vue中引入外部的css文件

在vue中引入外部的css文件在项目的src文件下，新建一个style文件夹，存放css文件。 1. 全局引入将外部的css文件放到style文件下，引入外部文件只需在main.js文件中 import './style/reset.css' 我引入的是清除默认样式的css文件 2. 局部引入 <style scoped> @import '../assets/iconfont/iconfont.css';这个分号一定要写，要不会报错 </style> 来源： https://www.cnblogs.com/yanl55555/p/12543992.html

vue之JavaScript封装

阅读更多关于 vue之JavaScript封装

导入js文件有很多种方式，我喜欢使用这种，感觉跟框架导入很相似。没有多余的沉湎。定义一个js文件，比如util.js import Vue from "vue"; //==============================StringUtil================================= const StringUtil = { //是否为空判断 isNull: function(text) { if (undefined == text) { return true; } if (text.length == "" || text.length == 0) { return true; } return false; } }; Vue.prototype.StringUtil = StringUtil; //==============================StringUtil================================= export default {}; main.js导入 import "../static/js/util.js"; vue调用方式 this.StringUtil.isNull("sfds") 来源： https://www.cnblogs.com/yanl55555/p/12543993.html

vue学习日记10

阅读更多关于 vue学习日记10

Echart 还是先下载安装 npm install echarts --save　 echarts官网 https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts vue也有封装好的echarts，在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。 v-charts官网 https://v-charts.js.org/#/ 以echarts为例： <template> <div> <div ref="chartDom" style="height:300px"></div> </div> </template> <script> import echarts from "echarts"; import { addListener, removeListener } from "resize-detector"; import debounce from "loadsh/debounce"; export

vue filters 金额转中文大写

阅读更多关于 vue filters 金额转中文大写

capitalAmount(amount: any) { // 汉字的数字 const cnNums = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"]; // 基本单位 const cnIntRadice = ["", "拾", "佰", "仟"]; // 对应整数部分扩展单位 const cnIntUnits = ["", "万", "亿", "兆"]; // 对应小数部分单位 const cnDecUnits = ["角", "分", "毫", "厘"]; // 整数金额时后面跟的字符 const cnInteger = "整"; // 整型完以后的单位 const cnIntLast = "元"; // 最大处理的数字 const maxNum = 9999999999999999.99; // 金额整数部分 let integerNum; // 金额小数部分 let decimalNum; // 输出的中文金额字符串 let chineseStr = ""; // 分离金额后用的数组，预定义 let parts; if (amount === "") { return ""; } amount = parseFloat(amount); if (amount >= maxNum) { // 超出最大处理数字

vue大文件上传详解及实例代码

阅读更多关于 vue大文件上传详解及实例代码

文件夹上传：从前端到后端文件上传是 Web 开发肯定会碰到的问题，而文件夹上传则更加难缠。网上关于文件夹上传的资料多集中在前端，缺少对于后端的关注，然后讲某个后端框架文件上传的文章又不会涉及文件夹。今天研究了一下这个问题，在此记录。先说两个问题：是否所有后端框架都支持文件夹上传？是否所有浏览器都支持文件夹上传？第一个问题：YES，第二个问题：NO 只要后端框架对于表单的支持是完整的，那么必然支持文件夹上传。至于浏览器，截至目前，只有 Chrome 支持。如果需要其它的浏览器支持则需要借助于插件，比如泽优大文件上传控件： www.webuploader.net 关于WebUploader的功能说明：大文件上传续传支持超大文件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。开源提供ASP.NET,JSP,PHP示例和源代码，其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。分片、并发分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。预览、压缩支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。解析jpeg中的meta信息

Vuejs右键弹出菜单

阅读更多关于 Vuejs右键弹出菜单

3 月，跳不动了？>>> 一、安装 npm install @xunlei/vue-context-menu 二、修改main.js import VueContextMenu from '@xunlei/vue-context-menu' Vue.use(VueContextMenu) 三、使用 <context-menu class="right-menu" :target="contextMenuTarget" :show="contextMenuVisible" @update:show="(show) => contextMenuVisible = show"> <a href="javascript:;" @click="new">新建</a> <a href="javascript:;" @click="del">删除</a> </context-menu> export default { name: 'basetable', data() { return { contextMenuTarget: document.body, //绑定的dom contextMenuVisible: false, } } } methods: { new(){ this.contextMenuVisible=false }, del(){ this

vue中的js绑定样式

阅读更多关于 vue中的js绑定样式

添加class 对象形式添加 activated为true时p标签的class为activated false时为空 <div id="app"> <p :class="{activated:activated}">内容部分</p> </div> <script> var app=new Vue({ el:"#app", data:{ activated:true } }) </script> 数组形式添加 activated的值是data中的内容即activated <div id="app"> <p :class="[activated,activated1]">内容部分</p> </div> <script> var app=new Vue({ el:"#app", data:{ activated:"activated" } }) </script> style绑定样式对象形式 <div id="app"> <p :style="styleObj">内容部分</p> </div> <script> var app=new Vue({ el:"#app", data:{ styleObj:{ color:"red" } } }) </script> 数组形式 <div id="app"> <p :style="[styleObj,styleObj1]">内容部分</p><

前端vue框架应用雏形

阅读更多关于前端vue框架应用雏形

一、环境准备：　　1.安装运行环境 node.js，安装完成后验证：node -v , npm -v；　　2.安装国内源：npm install -g cnpm --registry=https://registry.npm.taobao.org；二、创建工程：　　1.切换到文件目录下，DOS命令窗口运行： vue create 项目名；　　2.使用 webstorm 打开工程目录，在终端terminal下安装插件：　　全局安装vue-cli脚手架： cnpm install -g @vue/cli 　　安装element-ui前端组件库： cnpm i element-ui -S 　　安装路由： cnpm install vue-router 　　安装请求库： cnpm install axios -S 三、编写脚本：　　来源： https://www.cnblogs.com/qingyuu/p/12536431.html

订阅 vue