VUE - 技术教程文章
怎么让 arcgis 4 弹出窗 漂亮 支持多个弹出窗 支持vue或者react【图】
无论arcgis 3还是 4 的弹出窗，都是要用什么PopupTemplate的模式，我觉得很恶心，你得输出outerHtml， 虽然用vue的 dom创建完成的innerHtml 通过事件发送给popupTemplate的content也行，但是esri 的样式你得改！当你想实现自由，就是风格非常好看的弹出窗的时候，就很麻烦，而且你要实现多个弹出窗也不好搞于是有了这个想法 1. 首先看Dom，esri 弹出窗不过也是Dom节点，他被放在esri-ui class的节点里面，每次移动或者旋转就是调用...
vue axios应用【代码】【图】
编写小的demo应用axios异步请求. 效果图示: 功能: 用户在输入框中输入信息进行搜索,并搜索状态随之改变(四种状态).项目目录: 代码:1.index.html<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>vue_demo</title><link rel="stylesheet" href="./static/css/bootstrap.css"></head><body><div id="app"></div><!-- built files will be auto inje...
Vue —— 移动端添加 fastclick【代码】
fastclick：处理移动端click事件300毫秒延迟。npm install fastclick -Smain.js 中引入，并绑定到bodyimport FastClick from ‘fastclick‘ FastClick.attach(document.body);原文：https://www.cnblogs.com/cnloop/p/9998821.html
vue中v-if和v-show的区别
v-if 根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-if和v-else之类，但是它们不能单独使用，要和v-if配合使用； v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。是真正的做...
初始化vue项目，报错This is probably not a problem with npm,there is likely additional logging output above
https://blog.csdn.net/ink_if/article/details/79015811参考别人的博客 初始化项目，vue init webpack-simple demo 然后npm install 再然后npm run dev 就报错了，最后找出是版本更新原因， 解决方案： npm install之后，运行 npm i -D webpack-dev-server@2.9.7原文：https://www.cnblogs.com/qianjin888/p/10086950.html
Vue计算属性【代码】
定义：Vue通过操作vm已有属性值，将计算得到的结果赋值给一个全新属性，这个属性就称为计算属性。原理：底层借助Object.defineProperty()提供的getter和setter来实现。方式：通过vm的computed属性进行定义。优势：与methods方式相比，内部有缓存机制，效率更高。注意：计算属性的getter和setter调用时机 第一次读取时当其依赖的属性发生变化时计算属性最终会绑定在vm之上如果计算属性需要提供修改功能，那么必须给它添加setter，且...
vue实现短信验证码登录【代码】【图】
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，最后先服务器发送请求，保存登录的信息，一个必不可少的功能思路1，先判断手机号和验证是否为空，2，点击发送验证码，得到验证码3，输入的验证码是否为空和是否正确，4，最后向服务发送请求界面展示1.准备工作这个会对input进行封装处理<template><div class="text_group"><div class="input_group" :class="{‘is-invalid‘: error...
vue框架搭建04-axios封装【代码】【图】
1、安装 axios npm install axios --save2、在src目录里新建目录结构index.js内容 // // axios封装// //1.引入axiosimport axios from ‘axios‘import { addPending, removePending } from "./cancleRequest.js"// // 2. 配置信息const config = { // 每次请求的协议、IP地址。 设置该配置后，每次请求路径都可以使用相对路径，例如"/admin/login" baseURL: "http://ztdoc.wisedu.com", // 请求超时时间 timeout: 10000...
vue下不同组件在其他元素div为绝对postion情况下进行侧边栏进行collapse变动情况处理
利用vuex中state数据动态绑定style数据 调用mutations配合collapse进行div属性变换达到动态变换 没用actions倒是组件里：<div class="center_box" :style="{‘left‘:this.$store.state.left_center_box+‘%‘}"> store.js：state:{ isCollapse:true, left_center_box:20, }, mutations:{ toggleCollapse(state){ state.isCollapse=!state.isCollapse; if(state.isCollapse==fal...
vue-ref、js获取dom子元素【代码】
querySelector的参数是css选择器，任何选择器都可以作为它的参数，这样就使得它非常方便灵活：比如获取class=‘test’的标签下的第一个子元素，可以这样写querySelector(‘.test > * ‘)，也可以指定子元素的类型querySelector(‘.test > span ‘)，或者是：classquerySelector(‘.test > #f_div‘)还可以使用querySelectorAll方法，这样会获取所有满足条件的元素，而不只是获取第一个元素。<div class="first"><span>张三</spa...
Vue 子组件接收父组件的值
1.父组件<template><div id="rightmenu8"><rightmenu7 ref="rightmenu7" @child="parent3" :age="age"></rightmenu7> </div></template><script>import rightmenu7 from "./RightMenu7.vue";export default { name: "rightmenu8",data() {return { age:18}},methods: {},components: {rightmenu7: rightmenu7}};</script> 2.子组件 <template><div id="rightmenu7" ></div></template><script>export default {props:[‘age‘...
Vue插槽【代码】
插槽内容Vue实现一套内容分发的API， 这套API基于当前的web组件规范草案，将<slot>元素作为承载分发内容的出口。 <navigation-link url="/profile">Your Profile </navigation-link>然后在<navigation-link>的模板中可能会写为： <a :href="url" ><slot></slot> </a>当组件渲染的时候，这个<slot>元素将会被"Yourt Profile"替换。插槽可以包括任何模板代码，包括HTML: <navigation-link url="/profile"><span ></span>Your Profile...
vue.js【代码】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><style>.active{width: 100px;height: 100px;background: green;}.text{background: red;}</style> </head> <body> <div id="app"><p>{{message}}</p><button @click="reverseMessage">reverse</button><button @click="say(‘what‘)">sayWhat</...
vue12----eCharts、HackerAttacks 黑客攻击【代码】
### eCharts 官方文档：基本介绍、示例、API文档、配置项 实例--->官方实例 文档--->教程、配置项手册 echarts基本使用：（App.vue） ①安装插件： npm install echarts（项目名不能和插件名相同） ②引入： import echarts from "echarts"; ③mounted中初始化（echarts.init()）：this.echartsObj=echarts.init(this.$refs.map); ④echartsObj.setOption()设置...
【Vue】组件插槽【代码】【图】
注意：2.6.0之后为具名插槽和作用域引入了统一语法v-slot,取代了slot和slot-scope两个目前已被废弃但未被移除且在文档中的特性。父组件模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在自作用域中编译的。插槽分为三类：1.匿名插槽（默认插槽），没有命名有且只有一个2.具名插槽，即slot带有name3.作用域插槽，子组件数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)匿名插槽(默认插槽，name为defau...
vue.js 过渡和动画【代码】【图】
Vue 在插入、更新或者移除 DOM 时，动态添加css类名来达到想要的动画效果1.transition标签给元素包裹一个transition标签，并设置name属性的值，这个值可以随意设置，但是他会决定Dom更新时自动添加的css类名这里name="xxx"作为演示<div id="app"><button @click="isShow = !isShow">点我切换显示隐藏</button><transition name="xxx"><p v-show="isShow">{{msg}}</p></transition> </div> (1)当点击按钮，将p元素由显示切换成隐藏时...
vue.js的实战架构【图】
一、配置开发环境 1、先安装Node和Webpack,如何安装请看这篇文章“Webpack之多页面开发”。 2、建立一个文件夹为:Vue-project，然后初始化生成package.json。运行以下指令:1npm init 初始化完成后，添加项目开发所依赖的包123456789101112131415161718192021222324252627282930"dependencies": { "vue": "^2.2.2", "vue-router": "^2.3.0", "vue-template-compiler": "^2.2.2"},"devDependencies": { "axios": "^0.15.3", ...
vue v-if控制显隐，页面加载出现闪现 v-cloak【代码】
<div id="divApp"> <div v-if="type === ‘A‘" v-cloak> A </div> <div v-else-if="type === ‘B‘" v-cloak> B </div> <div v-else-if="type === ‘C‘" v-cloak> C </div> <div v-else v-cloak> Not A/B/C </div> </div>[v-cloak] { display:none; } 原文：https://www.cnblogs.com/zhaomeizi/p/10782358.html
vuecli3.0 打包后路径改为相对路径方式【代码】
在项目根目录创建：vue.config.js 文件填入内容：module.exports = {publicPath: "" }; 之后build 的index.html 中的css/js 路径就都是去"/" 的相对路径访问了！原文：https://www.cnblogs.com/zjhblogs/p/12192973.html
vue通过地址下载文件【代码】
通过a标签// 创建a标签const link = document.createElement(‘a‘) // download属性 link.setAttribute(‘download‘, row.newName) // href链接 link.setAttribute(‘href‘, row.downloadPath) // 自执行点击事件link.click() document.body.removeChild(link)通过openwindow.open(row.downloadPath) 原文：https://www.cnblogs.com/lipengze/p/14612104.html
vue续集2【代码】【图】
1.前端路由 1.1为什么做单页面应用（1）传统的开发方式 url改变后，立马发送请求，响应整个页面，有可能资源过多，传统开发会让前端的页面出现 “白屏” 用户体验不好（2）SPA 单页面应用 ： 锚点值的改变后，不会立刻发送请求，而是在某个合适的时机，发送ajax请求，局部改变页面中的数据,页面不立刻跳转用户体验好1.2前端路由的原理<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body...
关于vue中页面路由跳转后,css残留没有销毁问题【代码】
最近在用vue写项目,发现独立组件style,在运行项目时,前一个页面的style会出现在新页面上,然后看了解决办法,需要在每个style后面添加一个scoped,这样就可以了,不需要担心css残留问题了<style scoped></style>原文：https://www.cnblogs.com/wjhaaa/p/9293710.html
Vue 官网文档 todolist的一些想法【代码】【图】
<div id="todo-list-example"><form v-on:submit.prevent="addNewTodo"><label for="new-todo">Add a todo</label><inputv-model="newTodoText"id="new-todo"placeholder="E.g. Feed the cat"><button>Add</button></form><ul><liis="todo-item"v-for="(todo, index) in todos"v-bind:key="todo.id"v-bind:title="todo.title"v-on:remove="todos.splice(index, 1)"></li></ul></div>在刚开始看这个例子的时候，看到 <form v-on:sub...
Vue.js — 列表渲染【代码】【图】
1.列表渲染1.1 v-for<!DOCTYPE html> <html><head><meta charset="utf-8"> <style></style><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body><div ><ul><li v-for="item in items" :key="item.id">{{item.message}}</li></ul></div><script>var vm = new Vue({el: ‘#app‘,data: {items: [{id: 1, message: ‘Foo‘},{id: 2, message: ‘Bar‘}]}});</script></body> </html> 我们可以...
Vue.js实现的计算器功能完整示例【图】
这篇文章主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js响应鼠标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘方、开方等功能,需要的朋友可以参考下，本文实例讲述了Vue.js实现的计算器功能。分享给大家供大家参考，具体如下：1. HTML部分代码<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet"type="text/css"href="css/css.css"rel="external nofollow"> <script type="text/javascrip...
vue中上传图片限制大小、宽高【代码】
imgReady(data.object, function () { if(this.width < 360 || this.height < 360) { document.getElementById("myImageShow").src = "../../public/img/background.png"; alert("图片大小不能低于360*360PX"); } if(this.width != this.height) { document.getElementById("myImageShow").src = "../../public/img/background.png"; alert("上传图片比例为1:1"); }});原文：https://www....
对vue响应式数据更新的误解【代码】
本文摘自https://segmentfault.com/a/1190000007787941?_ea=1459649，为个人笔记对于刚接触vue的同学会经常遇到数据更新了但是模板没有更新的问题，下面将结合vue的响应式特性以及异步更新机制分析常见的错误：异步更新带来的数据响应式误解异步数据的处理基本是一定会遇到的，处理不好就会遇到数据不更新的问题，但有一种情况是在未正确处理的情况下也能正常更新，这就会造成一种误解，详情如下所示：模板<div id="app"><h2>{{dat...
vue-自带动画
<template> <div class="hello"> <button @click="show = !show">切换</button> <P>-----------------------</P> <transition name="fade"> <div class="box" v-if="show">学院</div> </transition> </div></template><script>export default { name: ‘TransitionAndAnimateOne‘, data() { return { show: true } }}</script> <style scoped> .box{ width: 200px; height: 200px; ...
Vue猜坑记录【代码】
1、使用this.$emit 子组件向父组件传递事件以及携带数据在标签内调用 methods:{ } 中的方法时候是不能够加()的，一定是直接写方法名称即可, 否则传递的参数数据无效。 <list v-show="listShow" :listData="listData" @titleHandle = "showTitle"></list> 这里的titleHandle是监听子组件传递过来的事件(带有参数)，showTitle是父组件监听成功之后在父组件内执行的方法，【注意这里@titleHandle = "showTitle"的showTitle后面不能加(...
请求头出现provisional headers are shown 和 vue-cli 3.x配置跨域代理【代码】【图】
1、今天是这个问题打开搜索的项目页面报错超时错误最后在axios.js发现下面两行都注释了还是报错axios.defaults.timeout = 30000axios.defaults.headers.presetProperties = {} 后来差了各种资料估计请求没发出去代理问题provisional headers are shown最后定位代理失败，配置文件的也对，后来根目录下发现文件并没有改变，跟目录下，结果在src下也有vue.config.js，估计按快捷键保存的改的也是这个文件proxy（vue-cli 3版本的）pr...