精华内容
下载资源
问答
  • 安装依赖 npm i esri-loader -S 页面中使用 <body> <div id="viewDiv"></div> </body> #viewDiv { padding: 0; margin: 0; height: 100%;...MapView通过将对象传递给构造..

    安装依赖

    npm i esri-loader -S

    页面中使用

    <body>
      <div id="viewDiv"></div>
    </body>
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    import {loadModules} from "esri-loader";    

    创建2D视图 

    MapView通过将对象传递给构造函数来创建一个新的并设置其属性,包括center和zoom,这些属性用于定义视图的初始范围

     MapView用于查看2D地图,SceneView用于查看3D地图

    mounted() {
         let options = {
            url: "https://js.arcgis.com/4.17/",
            css: "https://js.arcgis.com/4.17/esri/themes/light/main.css"
         };
         loadModules([
            "esri/Map",
            "esri/views/MapView",
         ],options).then(([Map,MapView])=>{
            let map = new Map({
               basemap: "topo-vector"
            })
            let view = new MapView({
               container: "viewDiv",
               map: map,
               zoom: 7,
               center: [108.17377929686404, 35.69178936670419]
             })
         })
    }

    最终代码:复制后,即可使用

    <template>
      <div id="viewDiv"></div>
    </template>
    
    <script>
      import {loadModules} from "esri-loader";
        export default {
         name: "demo",
          mounted() {
            let options = {
              url: "https://js.arcgis.com/4.17/",
              css: "https://js.arcgis.com/4.17/esri/themes/light/main.css"
            };
            loadModules([
              "esri/Map",
              "esri/views/MapView",
            ],options).then(([Map,MapView])=>{
              let map = new Map({
                basemap: "topo-vector"
              })
              let view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 7,
                center: [108.17377929686404, 35.69178936670419]
              })
            })
          }
        }
    </script>
    
    <style scoped>
      #viewDiv {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 95vh;
      }
    </style>
    

     最终结果图:

    展开全文
  • vue.js是基于javascript的,用于构建用户界面的渐进式框架,采用MIT开源协议。Vue的核心库只关注视图层,采用自底向上增量开发的设计,并且非常容易学习,非常容易与其它库或已有项目整合。 Vue.js 是一套用于构建...

    vue.js是基于javascript的,用于构建用户界面的渐进式框架,采用MIT开源协议。Vue的核心库只关注视图层,采用自底向上增量开发的设计,并且非常容易学习,非常容易与其它库或已有项目整合。



    Vue.js 是一套用于构建用户界面的渐进式JavaScript框架。Vue 只关注视图层, 采用自底向上增量开发的设计。相关推荐:《vue.js教程》

    Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

    Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

    Vue.js 的主要特点

    Vue.js 是一个优秀的前端界面开发 JavaScript 库,它之所以非常火,是因为有众多突出的特点,其中主要的特点有以下几个。

    1) 轻量级的框架

    Vue.js 能够自动追踪依赖的模板表达式和计算属性,提供 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API,使读者更加容易理解,能够更快上手。

    2) 双向数据绑定

    声明式渲染是数据双向绑定的主要体现,同样也是 Vue.js 的核心,它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

    3) 指令

    Vue.js 与页面进行交互,主要就是通过内置指令来完成的,指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

    4) 组件化

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

    在 Vue 中,父子组件通过 props 传递通信,从父向子单向传递。子组件与父组件通信,通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。

    在开发中组件和 HTML、JavaScript 等有非常紧密的关系时,可以根据实际的需要自定义组件,使开发变得更加便利,可大量减少代码编写量。

    组件还支持热重载(hotreload)。当我们做了修改时,不会刷新页面,只是对组件本身进行立刻重载,不会影响整个应用当前的状态。CSS 也支持热重载。

    5) 客户端路由

    Vue-router 是 Vue.js 官方的路由插件,与 Vue.js 深度集成,用于构建单页面应用。Vue 单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,传统的页面是通过超链接实现页面的切换和跳转的。

    6) 状态管理

    状态管理实际就是一个单向的数据流,State 驱动 View 的渲染,而用户对 View 进行操作产生 Action,使 State 产生变化,从而使 View 重新渲染,形成一个单独的组件。

    相关推荐:

    2020年前端vue面试题大汇总(附答案)

    vue教程推荐:2020最新的5个vue.js视频教程精选

    展开全文
  • 首先先要知道的是v-model的作用是实现...将数据响应到视图层的方式,在vue2使用的是Object.defineProperty()来实现,需要劫持到数据的变化,在数据变化的时候将其渲染到视图上: 第二步:视图层到数据层的响应 ...

    首先先要知道的是v-model的作用是实现数据的双向绑定,即:

     数据在视图层的双向响应。

    实现思路主要分为两步:

    第一步:数据层到视图层的响应

    将数据响应到视图层的方式,在vue2使用的是Object.defineProperty()来实现,需要劫持到数据的变化,在数据变化的时候将其渲染到视图上:

    A,首先需要遍历data的数据,获取到每个data的属性

    B,其次,获取到data的每个属性之后,对属性进行拦截。

    C,在拦截时,需要将其值反映到对应的视图标签上。

    第C步中又可以分为:

            a,获取到视图中每个节点的DOM对象, 

            b,遍历DOM对象,获取到每个DOM对象对应的node对象(节点对象)。

            c,遍历node对象,获取到node对象中含有v-model属性的节点

            d,将对应的data的属性值赋值给node节点的value值上

    代码实现为:

    <body>
        <div id="app">
            名字:<input type="text" v-model="name" value="12"><br>
            年龄:<input type="text" v-model="age" value="2323">
            <div class="sjkx">
                <h1 class="name">模拟v-model</h1>
            </div>
        </div>
        <script>
            let data = {
                name: '',
                age: '',
            }
            let view = document.getElementById('app')
            // 数据反映到视图方法
            function getVmodelNode(view, data) {
                // a,获取到视图中每个节点的DOM对象,
                let allDom = view.getElementsByTagName("*")
                let allDomArray = Array.from(allDom)//将伪数组转化成数组
                let attributeArray = []
                // b,遍历DOM对象,获取到每个DOM对象对应的node对象。
                allDomArray.forEach(nodeItem => {
                   //c, 遍历node对象,过滤获取到node对象中含有v-model的节点
                    Array.from(nodeItem.attributes).forEach(item => {
                        if (item.nodeName === 'v-model') {
                            //d,将对应的data的属性值赋值给node节点的value值上
                            nodeItem.value = data[item.nodeValue]
                        }
                    })
                })
            }
            //  A,首先需要遍历data的数据,获取到每个data的属性
            Object.keys(data).forEach(key => {
                // B,其次,获取到data的每个属性之后,对属性进行拦截。
                debugger
                WebServer(data,key,data[key])
            })
            function WebServer(data, key, value) {
                Object.defineProperty(data, key, {
                    get() {
                        return value
                    },
                    set(newValue) {
                        value= newValue
                        // C,在拦截时,需要将其值反映到对应的视图标签上。
                        getVmodelNode(view,data)
                    }
                })
            }
        </script>
    </body>

    第二步:视图层到数据层的响应。

    视图层响应到数据层的思路:当输入框的数据发生变化的时候,调用函数,将输入框的值赋值给data对应的属性上。

    实际上就是在第一步的第C步多加了一步:为对应的node对象绑定一个input事件,并将node的value赋值给data对应的属性上。

    <body>
        <div id="app">
            名字:<input type="text" v-model="name" value="12"><br>
            年龄:<input type="text" v-model="age" value="2323">
            <div class="sjkx">
                <h1 class="name">模拟v-model</h1>
            </div>
        </div>
        <script>
            let data = {
                name: '',
                age: '',
            }
            let view = document.getElementById('app')
            // 数据反映到视图方法
            function getVmodelNode(view, data) {
                // a,获取到视图中每个节点的DOM对象,
                let allDom = view.getElementsByTagName("*")
                let allDomArray = Array.from(allDom)//将伪数组转化成数组
                let attributeArray = []
                // b,遍历DOM对象,获取到每个DOM对象对应的node对象。
                allDomArray.forEach(nodeItem => {
                   //c, 遍历node对象,过滤获取到node对象中含有v-model的节点
                    Array.from(nodeItem.attributes).forEach(item => {
                        if (item.nodeName === 'v-model') {
                            //d,将对应的data的属性值赋值给node节点的value值上
                            nodeItem.value = data[item.nodeValue]
                            //视图层反映到数据层上,
                            nodeItem.addEventListener('input',(e)=>{
                                data[item.nodeValue]=e.target.value
                            })
                        }
    
                    })
    
                })
            }
            //  A,首先需要遍历data的数据,获取到每个data的属性
            Object.keys(data).forEach(key => {
                // B,其次,获取到data的每个属性之后,对属性进行拦截。
                
                WebServer(data,key,data[key])
            })
            function WebServer(data, key, value) {
                Object.defineProperty(data, key, {
                    get() {
                        return value
                    },
                    set(newValue) {
                        value= newValue
                        // C,在拦截时,需要将其值反映到对应的视图标签上。
                        getVmodelNode(view,data)
                    }
                })
            }
           getVmodelNode(view, data)
        </script>
    </body>

    这就是完整的模拟v-model的代码了。

    关于优化,可移步到:

    https://blog.csdn.net/qq_31539817/article/details/119992938

    这边文章,通过定义发布者模式来实现精确更新。

    顺着这个思路,vue中全部的指令源码都可以自己搞定,什么bind呀,什么v-text呀,甚至ref都可以自己搞定!!!!!!

     

    展开全文
  • 1. 安装:npm install --save js-md5 2. 引入:import md5 from 'js-md5'; 3.使用:md5("123"); //记得加双引号

    1. 安装:npm install --save js-md5

    2. 引入:import md5 from 'js-md5';

    3.使用:md5("123");    //记得加双引号

    展开全文
  • 我有一个用户可以上传图像的组件,我还想添加一个删除图像的功能.我添加了一个删除当前图像的按钮,但问题是表单也提交了,我想避免这种情况.我只需删除当前图像(如果存在).这是脚本:+ Remove imageexport default {...
  • FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 原因是 JavaScript堆内存不足,Node 是基于V8引擎,在 Node 中通过 JavaScript 使用内存时只能使用...
  • vue使用 zrenderjs绘制坐标轴 首先引入zrender.js 绘制y轴,x轴,以及散点 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <script type=...
  • javascript :只执行一次的函数

    千次阅读 2021-03-07 07:20:20
    在日常开发的时候,经常会碰到一种这样的情况:想让某个函数只执行一次,特别是在一些循环或定时执行的时候。直接上代码:function runOnce(fn, context) { //控制让函数只触发一次return function () {try {fn....
  • Vue项目绿盟RSAS漏扫,检测到目标站点存在javascript框架库漏洞 出现问题可能的原因有: jquery的版本过低。cnpm install jquery 使用jsencrypt进行加密或加签。 在node_modules文件夹中找到jsencrypt相关的文件...
  • vue.js是一套用于构建用户界面的渐进式JavaScript框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue ...
  • 问题:vue开发模式启动,95%报错JavaScript heap out of memory 我的解决办法: 在idea(用的开发工具)终端里执行两个命令, npm i increase–memory–limit increase–memory–limit 然后再启动,就好了! 总结:...
  • 解决2020版IDEA的JAVAScript中找不到vue.js问题 1、安装插件 打开IDEA的界面如下 步骤:(1)file——>setting——>plugins ​ (2)在搜索框搜索vue,然后vue.js——>install 新建project,在JavaScript中就...
  • 前端代码规范代码提交规范HTML规范CSS规范JavaScript规范注释命名规范运算符其他:Vue 代码规范常规vuex 代码提交规范 每次提交代码时,commit按规范进行备注,如:本次提交新增了新功能:feat: 新增xx功能 code...
  • 如果有阅读过一些TypeScript相关内容的的朋友应该很熟悉一句话:TypeScript 是 JavaScript 的一个超集 第一次看到这句话我心里就在想“这个超集又是什么???”通过一段时间的了解,其实换成通俗的话来讲就是:...
  • 文章目录前言一、前端vue项目打包1.安装Node.js2.项目打包二、服务器端1.服务器端安装nginx2.静态文件上传到服务器3.配置nginx.conf 文件4.出现404问题5.出现405问题6.出现(We’re sorry but “XXX” doesn’t work...
  • 解决vue报错JavaScript heap out of memory(内存溢出)&& “‘node --ma 1.我们全局安装 increase-memory-limit: npm install -g increase-memory-limit 2.进入工程目录(注意执行目录),执行如下: ...
  • vue-element-ui 项目 V8引擎对内存的使用的默认大小限制是1.4G,可以通过node.js命令设置限制来解决这个问题。修改package.json文件中内容,具体如下。 "serve": "npx --max_old_space_size=4096 vue-cli-service...
  • javaScript加密解密(function (r) { if (typeof exports === "object" && typeof module !== "undefined") { module.exports = r() } else { if (typeof define === "function" && define.amd) ...
  • 1、获取开发者的api-key ... 这个api-key也是一阵好找,按照提示,进入对应网页老是...我比较喜欢用vue开发,用vue开发的环境部署: https://developers.arcgis.com/javascript/latest/es-modules/ 2.1 安装@arcgis/c.
  • vue发布到nginx运行报错:We‘re sorry but agriculture doesn‘t work properly without JavaScript enabled。
  • QRCode.js:vue使用 JavaScript 生成二维码完整流程 QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。 1.安装插件 npm install qrcodejs2 ...
  • 问 题我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢?我的content组件代码:Clickexport default {data () {return {testvalue: ''}}}我的test.js代码:console.log('Test info')function ...
  • vue系列:Vue核心概念及特性 (一)

    千次阅读 2021-09-18 16:56:47
    博客也荒废了一段时间,接下来,我会陆续更新一些vue相关的文章,跟一家一起努力进步 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 特点: 易用,灵活,高效 渐进式框架 可以随意组合...
  • vue3.0项目报 v-model value must be a valid JavaScript member expression. 发生错误原因是 v-model内不能有中文字符 不能有回车换行字符等原因导致的 感觉这个非常不友好~~特别是对于习惯用中文命名的小伙伴!!...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 444,122
精华内容 177,648
关键字:

javascriptvue

java 订阅
vue 订阅