Vue 的响应式原理 数据发生改变,界面跟着更新,如图所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
NGINX 部署 Vue 项目 1. windows 下载 nginx: 官网链接https://nginx.org/点击下载稳定版本 stable version双击运行即可,在浏览器输入 localhost 回车来到以下界面:说明服务器启动成功。将打包的 dist 文件夹中的文件放到 html 文件夹内。刷新浏览器 localhost 如下:能够正常访问!...
Vue 组件的高级封装模式 一、传统模式我们在使用 vue 进行项目开发过程中,对组件的封装是不可避免的,组件式开发在很大程度上提高了代码的复用性,能够提高开发效率。一般情况下,我们使用最基础的封装模式,基本流程如下:创建 Xxx.vue 文件,对组件进行封装 通过 import 的方式将组件导入 import Xxx from '...' 对组件进行注册 componments:{ Xxx } 使用组件:<xxx/>示例:封装一个 Toast 弹窗组件1.创建 Toast.vue 文件&l...
项目开发的一些初始化工作 一、目录划分二、CSS 初始化新建 css 文件 normalize.css,GitHub 上搜索并下载下来:在 base.css 文件中引入 normalize.css 文件并配置一些基本样式,然后在 App.vue 文件中引入:@import "./assets/css/base.css";三、 配置文件夹别名在 vue.config.js 文件中添加以下代码:module.exports = { configureWebpack:{ resol.
Vue + Openlayers 使用 Overlay 添加 Popup 弹窗 最近使用 Vue 和 Openlayers 写了一个简单的小 dom ,用到了 Overlay 的弹窗功能,记录一下!创建元素: <div ref="popCon" id="popup" v-show="isShow"><!-- 弹出信息框 --> <span class="iconfont icon-guanbi" @click="closePop"></span> <ul id="info"> <h
Openlayers 坐标系全面解析 目录EPSG:4326 & EPSG:3857EPSG:4326 与 EPSG:3857 的坐标转换EPSG: 4490Openlayers 自定义坐标系(EPSG:4490 和 EPSG:4525)EPSG:4326 & EPSG:3857Openlayers 中常用的坐标系为 EPSG:4326 和 EPSG:3857,分别对应 WGS84 坐标系统中的地理坐标(经纬度)和投影坐标(X,Y)。EPSG:4326 通过经纬度记录坐标,方便存储,可读性高。Openl.
Vue + Openlayers 基本使用----加载天地图影像 前面学习了一些 Vue 的基本使用,接下来结合 Openlayers 进行 WebGIS 开发的相关内容学习!使用 Vue CLI 3 创建项目:vue create vue-openlayers安装 Openlayers 框架npm i -S ol创建组件:Map.vue<template> <div id="map"> </div></template><script>//导入相关配置信息impo
Axios —— 网络请求 安装框架:npm install axios --save基本使用:import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, render: h =&g
Vuex ——详细介绍 Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变化。可以理解为:将多个组件共享的变量全部存储在一个对象里面,然后将这个对象放在顶层的 Vue 实例中,让其他组件可以使用,它最大的特点是响应式。一般情况下,我们会在 Vuex 中存放一些需要在多个界面中进行共享的信息。比如用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等,这些状态信息,我们可以放在统一的地方,对它进行保存和管理。
Promise Promise 是 ES6 中的一个特性,是异步编程的一种解决方案。基本语法处理方式一:new Promise((resolve,reject) => { //异步请求操作 setTimeout(() => { //成功时调用 resolve() resolve('Hello World')//执行 resolve() 函数后,会调用 Then() 函数 //失败时调用 reject(),一旦调用 reject(),就不会执行 resolve()