vue | 易学教程

Vue的fetch的概述和使用

阅读更多关于 Vue的fetch的概述和使用

Fetch 基本概念（前端小白，刚学习vue，写的不好或是不对，请各位大佬多多指正！感激不尽！） Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能。 Fetch 的核心在于对 HTTP 接口的抽象，包括 Request ， Response ， Headers ， Body ，以及用于初始化异步请求的 global fetch 。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。除此之外，Fetch 还利用到了请求的异步特性——它是基于 Promise 的。 Fetch 的用法 1 <div id=”box”> 2 //当点击按钮的时候，控制台可以打印出URL里面的数据 3 <button @click=”handleClick()”>click</button> 4 </div> 5 <script> 6 New Vue({ 7 el:”#box”, 8 data:{ 9 10 }, 11 methods:{ 12 handleClick(){ 13 //fetch方法 14 //Promise对象 15 //第一个.then拿到的是请求头的相关信息 16 //url里面传一个json地址 17 fetch(“url”).then(res=>{ 18

vue 预览 pdf

阅读更多关于 vue 预览 pdf

自定义vue 预览 pdf 文件，使用的是pdf.js pdv-worker.js pdf.js下载链接参考样例一 Vue.component('pdf-viewer', { template: '<a-row><div ref="pdfViewContainer" style="width: 100%"><div id="viewer" class="pdfViewer"></div></div></a-row>', props: { path: { type: String } }, mounted: function () { if (!pdfjsLib||!pdfjsViewer||!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) { console.error("Can not load pdf viewer"); return; } pdfjsLib.GlobalWorkerOptions.workerSrc = this.getFullPath("path/to/pdf.worker.js"); let CMAP_URL = this.getFullPath("path/to/web/cmaps/"); let CMAP_PACKED = true; var pdfViewer = new pdfjsViewer

新随笔

阅读更多关于新随笔

（1） el 表明我们的Vue需要操作哪一个元素下的区域，'#demo'表示操作id为demo的元素下区域。（2） data 表示Vue 实例的数据对象，data 的属性能够响应数据的变化。（3） created 表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法。 Vue常用指令作者：劳卜链接：https://www.jianshu.com/p/78c9e5342990 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。来源： https://www.cnblogs.com/qiuyide/p/12397404.html

vue引用本地静态资源（图片、音频、视频）

阅读更多关于 vue引用本地静态资源（图片、音频、视频）

说明：本文章用于说明引用项目下本地资源（图片、音频、视频）的引用方式，从后台服务器获取的资源并不完全适用 1、第一种引用方式：直接在<template>中引用，src中使用相对地址 <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> </div> </template> 2、第二种引用方式：data中设置变量（要require路径），在<template>使用（特别说明：要使用:src，使用src会出错） <template> <div id="app"> <img alt="Vue logo" :src="logo"> </div> </template> <script> export default { name: 'SidebarLogo', data() { return { logo: require("../../../images/tllogo.png") } } } </script> 3、第三种引用方式：使用require拼接路径 <template> <div id="app"> <img :src="require('../../../images/tllogo.png')" alt=""> <img :src="require('../../../images/'+

vuex 配置和state应用

阅读更多关于 vuex 配置和state应用

vuex 1、安装 cnpm install vuex --save 2、使用创建store文件夹,创建js文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ //存储数据 state:{ (1)获取:在其他组件中,$store.state.键名/this.$store.state.键名 (2)在组件中尽量配合计算属性使用,通过mutations内的方法调用,因为计算属性可以设置set和get方法,或使用mapState方法来代替其中使用mapState来映射代替set和get方法: (1)在使用的组件中import {mapState} from 'vuex' (2)组件中三种方式使用mapState映射,模板内直接键名调用 1、computed:mapState(['键名1',...]) //相当于this.$store.state.键名;若使用双向绑定,需要设置监听事件配合e.target.value 2、computed:mapState({ 键名:'state中的键名',键名:(state)=>{return state.键名}},...,还可以设置方法来修改) 3、computed:{ //解构 ...mapState({

Vue.js 表单

阅读更多关于 Vue.js 表单

用 v-model 指令在表单控件元素上创建双向数据绑定 v-model 会根据控件类型自动选取正确的方法来更新元素输入框： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:#fff} .pink{background:pink} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <input type="text" v-model="message" placeholder="请输入。。。"> <p>{{message}}</p> </div> <script> new Vue({ el:'#demo', data: { message:"这是输入框" }, methods:{ } }); </script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:#fff} .pink{background:pink} <

Vue学习

阅读更多关于 Vue学习

前言使用vue框架有一段时间了，这里总结一下心得，主要为新人提供学习vue一些经验方法和项目中一些解决思路。文中谨代表个人观点，如有错误，欢迎指正。环境搭建假设你已经通读vue官方文档（文档都没读一遍（至少），那不建议动手撸码），在大致了解vue是什么东西，有什么用，核心概念之后我们就可以开始着手学习vue。首先搭建环境。学习vue，我的建议是通过官手脚手架起步。 >>>Installation $ npm install -g vue-cli >>Usage $ vue init <template-name> <project-name> >>>>Example: $ vue init webpack my-project 根据需要安装插件yes or no,一直回车，脚手架就生成了。接下来剖析脚手架结构。脚手架结构剖析再开始写项目之前，我们需要弄清什么地方写什么代码。 build文件夹 webpack配置文件。此处配置webpack规则。整个项目是通过webpack支持的。比如你要使用less，你需要在webapck规则里使用less。 src 文件夹撸码的地方～基本你所有的代码都在这一块完成。 assets文件夹存放web中引用的图片媒体资源。 components文件夹主要存放可复用组件，你可以在任意页面中复用这些组件。 router文件夹

vue 百度地图使用Demo

阅读更多关于 vue 百度地图使用Demo

1. 效果 2. 使用 2.1 npm 安装 npm install vue - baidu - map -- save 2.2 ak申请是在百度地图开发者平台申请的密钥详见百度地图开发者平台ak申请 2.3 main.js 引入 import BaiduMap from 'vue-baidu-map' Vue . use ( BaiduMap , { // ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */ ak : 'xxxxxxxxxxxxxxxx' } ) 3. demo案例 < template > < div class = " content " > < baidu-map class = " bm-view " :scroll-wheel-zoom = " true " :center = " location " :zoom = " zoom " > </ baidu-map > </ div > </ template > < script > export default { data ( ) { //这里存放数据 return { // 设置中心点经度纬度 location : { lng : 121.4095 , lat : 31.1796 } , // 中心点缩放大小

Vue中ios系统浏览器下select标签第一个无法选中

阅读更多关于 Vue中ios系统浏览器下select标签第一个无法选中

v-model双向绑定，当select的对应字段为null或者undefined的时候，点击确定第一项的默认选择失效，没有选中对应结果处理方式，增加请选择按钮 <select v-model="userDrawBank.provinceName" @change="selectFn(1)" > <option style="display:none" value="" disabled>请选择</option> <option :value="item.provinceName" v-for="(item,index) in provinceList" :key="index">{{item.provinceName}}</option> </select> 更多： Vue路由参数更新但是页面不刷新问题解决在Vue中使用腾讯地图API ElementUI 如何全局配置组件默认属性来源： oschina 链接： https://my.oschina.net/tianma3798/blog/3185018

Vue在点击内部元素时（获得焦点），怎样让外部div元素样式变化？

阅读更多关于 Vue在点击内部元素时（获得焦点），怎样让外部div元素样式变化？

问题： div内部有很多元素，div、 p、 span 、input等，各元素有嵌套，现在点击某元素时需要最外面这个div边框高亮，例如，点击了input开始输入假设html 结构如下 <div> <p>最外部div高亮测试</p> <div>用vue如何实现选中下面这个input最外面的div边框会高亮<br/> <input type=text placeholder="请输入内容"/> </div> </div> 解决要点 1. div要获得焦点，需要设置tabindex这个属性，值为-1（可以获得焦点事件，但不能用tab键选中，tabindex>=0时可以，这里设置为-1即可） 2.检测focusin和focusout事件并改变div的class(focus并不会向父级传播）在线演示代码 https://jsfiddle.net/f4rzn85o/3/ 来源： https://www.cnblogs.com/kuaiyuit/p/7354136.html

订阅 vue