精华内容
下载资源
问答
  • vue中对于多重对象数据的监听,对象发生变化,存在监听到的现象     比如:item3.name发生变化的时候监听到 { item1: { item2: { item3:{ name: '' } } } } 解决方法   &...

    前言

        vue中对于多重对象数据的监听,对象发生变化,存在监听不到的现象
        比如:item3.name发生变化的时候监听不到

    {
      item1: {
        item2: {
          item3:{
            name: ''
          }
        }
      }
    }
    

    解决方法

        方法一:

        计算属性(推荐)
        先通过计算属性得到引用类型的内部某个字段,再使用侦听器监听该字段的变化

    computed: {
      name() { 
        return this.item1.item2.item3.name
      }
    },
    watch: {
      name(newV,oldV) {
        // do something
        console.log(newV,oldV)
      }
    }
    

        方法二:

        deep深度监听

     watch: {
      item1: { //深度监听,可监听到对象、数组的变化
        handler (newV, oldV) {
          // do something, 可使用this
          console.log(newV,oldV)
        },
        deep:true
        }
    }
    
    展开全文
  • vue 引用百度地图插件 Vue Baidu Map

    万次阅读 2020-03-01 17:52:29
    1:地图的引用 2:地图上标记点的画法 3:消息窗体的自定义画法 4:自带的点显示的窗体的屏蔽 全局注册: import Vue from 'vue' import BaiduMap from 'vue-baidu-map' ​ Vue.use(BaiduMap, {...

    插件:Vue Baidu Map

    安装:npm install vue-baidu-map --save

    难点:

    1:地图的引用

    2:地图上标记点的画法

    3:消息窗体的自定义画法

    4:自带的点显示的窗体的屏蔽

    全局注册:

    import Vue from 'vue'
    import BaiduMap from 'vue-baidu-map'
    ​
    Vue.use(BaiduMap, {
      // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
      ak: 'YOUR_APP_KEY'
    })
    <template>
      <baidu-map class="bm-view">
      </baidu-map>
    </template>
    ​
    <style>
    .bm-view {
      width: 100%;
      height: 300px;
    }
    </style>

    基础常量:

    ControlAnchor

    此常量表示控件的定位。

    常量描述
    BMAP_ANCHOR_TOP_LEFT控件将定位到地图的左上角
    BMAP_ANCHOR_TOP_RIGHT控件将定位到地图的右上角
    BMAP_ANCHOR_BOTTOM_LEFT控件将定位到地图的左下角
    BMAP_ANCHOR_BOTTOM_RIGHT控件将定位到地图的右下角

    Animation

    此常量表示标注的动画效果。

    常量描述
    BMAP_ANIMATION_DROP坠落动画
    BMAP_ANIMATION_BOUNCE跳动动画

     

    NavigationControlType

    此常量表示平移缩放控件的类型。

    常量描述
    BMAP_NAVIGATION_CONTROL_LARGE标准的平移缩放控件(包括平移、缩放按钮和滑块)
    BMAP_NAVIGATION_CONTROL_SMALL仅包含平移和缩放按钮
    BMAP_NAVIGATION_CONTROL_PAN仅包含平移按钮
    BMAP_NAVIGATION_CONTROL_ZOOM仅包含缩放按钮

    MapType

    表示一种地图类型。

    常量描述
    BMAP_NORMAL_MAP此地图类型展示普通街道视图
    BMAP_PERSPECTIVE_MAP此地图类型展示透视图像视图
    BMAP_SATELLITE_MAP此地图类型展示卫星视图
    BMAP_HYBRID_MAP此地图类型展示卫星和路网的混合视图

     

     

    我们项目中引用方式

    import BaiduMap from 'vue-baidu-map';
    import {BmlMarkerClusterer} from 'vue-baidu-map';
    Vue.use(BaiduMap, {
      ak: 'awun1LZFPXDBFSHKIb6Zawl8G15Buhno'
    ​
    });

     

    画页面引用:

    页面中选择点的效果实现:

    方式1:可以通过搜索地点选择地图上的位置;

    方式2:可以直接在地图上选择地点

    <baidu-map style="width:100%; height:100% ;" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true" :map-click="false" @click ="mapClickPoint">
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <bm-marker v-if='mapInfoFlag' :position="{lng: mapInfo.lng, lat:mapInfo.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
    </baidu-map>

    同时显示多个比标记点和自定义窗体的效果实现

    <baidu-map style="width:100%; height:100% ;" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true" :map-click="false">
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
        <bml-marker-clusterer v-if="mapInfoFlag == true" :averageCenter="true">
            <bm-marker v-for="(marker,index) of mapInfo" :key='index'  :icon="{url:marker.icon,size:{width:32,height:32}}" :position="{lng: marker.longitude, lat: marker.latitude}"  @click="clickMarker(marker,'1')" :offset={width:0,height:-16}></bm-marker>
         </bml-marker-clusterer>
        <my-overlay  v-if="infoWindow.show" :position="{lng: infoWindow.lng, lat: infoWindow.lat}" :userInfo="selectUser"  @backData="changeShow"> </my-overlay>
     </baidu-map>
     
     
      methods: {
            handler ({BMap, map}) {
                this.center.lng = 113.556598
                this.center.lat = 22.28312
                this.zoom = 10
            },
        }

    ready的用法

    地图组件渲染完毕时触发,返回一个百度地图的核心类和地图实例。百度地图组件是异步加载,请不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例,如有需要,请在所需组件的 ready 事件回调函数的参数中获取。

    设置经纬度和缩放等级

    :center="center" :zoom="zoom"

    开启滚轮缩放

    :scroll-wheel-zoom="true"

    在地图左上角加入地图类型控件

     <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>

    添加一个自定义图标的点

    <bm-marker v-if='mapInfoFlag' :position="{lng: mapInfo.lng, lat:mapInfo.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>

    在左下角加入比例尺控件

    <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>

    点聚合

    BmlMarkerClusterer 能够聚合它包含的所有 BmMarker 组件。

    属性

    属性名类型默认值描述
    gridSizeSize 网格大小
    maxZoomNumber 聚合的最大缩放级别
    minClusterSizeNumber 单个聚合的最小数量
    stylesArray[{url, size, opt_anchor, textColor, opt_textSize}][]聚合的样式风格集合
    averageCenterBooleanfalse单个聚合的落脚点是否是聚合内所有标记的平均中心
    <bml-marker-clusterer v-if="mapInfoFlag == true" :averageCenter="true">
            <bm-marker v-for="(marker,index) of mapInfo" :key='index'  :icon="{url:marker.icon,size:{width:32,height:32}}" :position="{lng: marker.longitude, lat: marker.latitude}"  @click="clickMarker(marker,'1')" :offset={width:0,height:-16}></bm-marker>
         </bml-marker-clusterer>

     

    去掉点击一下默认标记点显示百度地图的默认弹窗

    属性名类型默认值描述
    map-clickBooleantrue允许点击 该项仅在地图组件挂载时加载一次

    :map-click="false"

     

    自定义覆盖物

    BmOverlay 自定义覆盖物组件是一个高度订制化的组件,通过 draw 事件进行覆盖物的重绘。推荐的使用方法是将重绘逻辑相同的 BmOverlay 进行二次封装。自定义覆盖物仅在地图发生变化时触发 draw 方法重绘覆盖物视图,若需要定制数据视图同步策略,请手动触发 BmOverlayreload 实例方法。

    属性

    属性名类型默认值描述
    paneString 自定义覆盖物所在容器。包含 floatPanemarkerMouseTargetfloatShadowlabelPanemarkerPanemarkerShadowmapPane共 7 种合法值

    事件

    事件名参数描述
    initializeevent{BMap, map, el, overlay}覆盖物初始化时触发此事件
    drawevent{BMap, map, el, overlay}地图发生改变时触发此事件

    具体实现方式

     

    <template>
    <!-- floatPane、markerMouseTarget、floatShadow、labelPane、markerPane、markerShadow、mapPane 共 7 种合法值 -->
      <bm-overlay
    •    ref="customOverlay"
    •    :class="{sample: true}"
    •    :style="pointColor"
    •    pane="floatShadow"
    •    @draw="draw">
          <div  style="background-color: #fff;border: solid 1px #CFCFCF;     border-radius: 7px 7px 0 0;;border-bottom: none; width: 99%;    height: calc(100% - 12px);">
                    <div class='innerTitle'>
                      <div ><span class='title_icon-person'></span> </div>
                      <div class="nowrap" style="line-height: 36px;width: 190px;">
                        <span  class= 'title-userName'>{{userInfo.userName}}</span>
                      </div>
                      <div @click="closeOverLay" style="cursor: pointer;">
                       <span><i class="iconfont iconshanchu"></i></span>
                      </div>
                    </div>
                      <div  class='body-all'>
                        <ul class='ul-all' >
                          <li class="nowrap" >
                            姓名:<span >{{userInfo.userName}}</span>
                          </li> 
                          <li class="nowrap" >
                            性别:<span >{{userInfo.gender}}</span>
                          </li> 
                          <li class="nowrap" >
                            部门:<span >{{userInfo.orgName}}</span>
                          </li>
                          <li class="nowrap" >
                            电话:<span >{{userInfo.phone}}</span>
                          </li> 
                          <li style="    text-align: left;"  >
                              通话:
                            <span  @click="openVideo" class='tonghua'  >
                                <i class="iconfont iconbofang iconfize"></i>
                            </span>
                            <span  @click="openAudio" class='tonghua' >
                                <i class="iconfont iconyinpinwenjian iconfize"></i>
                            </span>
                            </li>
                        </ul>
                      </div>
          </div>
          <div class="bottom_icon-person" ></div>
      </bm-overlay>
    </template>
    <script>
    import { BmOverlay } from 'vue-baidu-map'
    export default {
      props: ['text', 'position', 'color','userInfo'], // 用来接受传入的值,用来定制样式
      components: { BmOverlay},
      data () {
        return {
          pointColor: '',
       }
      },
    ​
      methods: {
       // 这是百度地图的重绘函数,用于维持覆盖物的位置(这里的值貌似会影响拖拉时的偏移度)
       draw ({ el, BMap, map }) {
          const { lng, lat } = this.position
          const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
          el.style.left = pixel.x - 135 + 'px'
          el.style.top = pixel.y - 190 + 'px'
        },
        closeOverLay(){
          console.log("关闭按钮")
          this.$emit('backData','1')
        },
        openAudio(){
          var self = this;
          self.$emit('backData','2')
        },
        openVideo(){
          var self = this;
          self.$emit('backData','3')
        },
        init(){
          var self = this;
        },
      },
    ​
      created:function(){
            var self = this;
            self.init();
      },
      watch: {
          position: {
            handler () {
                this.$refs.customOverlay.reload()  // 当位置发生变化时,重新渲染,内部会调用draw
            },
           deep: true
        }
      },
    ​
     mounted () {
        this.pointColor = this.color // 这里我是用来获取传入的值来定义样式的,可能有点多余了,pointColor是组件中绑定的样式,color是传进来的样式。【这样就可以根据传入的样式来显示不同样子的点了】
      },
    }
    ​
    </script>
    ​
    <style  scoped>
    .sample {
      width: 250px;
      height: 200px;
      color: #000;
      box-shadow: 0 0 5px #fff;
      padding: 0px;
      background: transparent;
    }
    ​
    .content-ellipsis1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    ​
    .title-userName{
      color: #008AEB;
      font-size: 15px;
      font-weight: normal;
      margin-left: 10px;
      font-size: 15px;
    }
    ​
    .innerTitle {
      height: 36px;
      display: flex;
      border-radius: 7px 7px 0px 0px;
      background-color: #F4F4F4;
      border-bottom: solid 1px #E7E7E7;
      display:flex;
      border-radius: 7px 7px 0px 0px; 
    ​
    }
    ​
    .nowrap{
      width: 200px;
      line-height: 22px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
    }
    ​
    .iconfize{
      font-size: 25px;
    }
    ​
    .body-all{
      margin: 6px 15px;
      background-color: #E4EFF9;
      border-radius: 7px
    ​
    }
    ​
    .ul-all{
      margin-block-start: 0px;
      list-style-type: none;
      padding: 5px;
      margin-left: 10px;
      margin-bottom: 0px;
      padding: 5px;
    }
    ​
    .tonghua{
      cursor: pointer;
      margin-left:15px;
      width: 50px;
      height: 35px;
    }
    ​
    </style>

     

     

     

    展开全文
  • 今天在写分页功能时,发现父子组件传值时,子组件监听到父组件中数据的变化,传递的是一个引用类型的数据 其原因是引用类型共用一个内存地址,父子组件用的是同一个对象,故子组件监听变化,此时就需要做一个...

    今天在写分页功能时,发现父子组件传值时,子组件监听不到父组件中数据的变化,传递的是一个引用类型的数据

    其原因是引用类型共用一个内存地址,父子组件用的是同一个对象,故子组件监听不到变化,此时就需要做一个深拷贝,相关代码如下:

    其实param是一个引用类型

    将父组件中要传递的值做一个深拷贝,其中self.pageDatasCopy是self.pageDatas的深拷贝,self.pageDatas是父组件中的变量,

    子组件监听变化:(watch监听)

     

    转载于:https://www.cnblogs.com/yuwenjing0727/p/8963125.html

    展开全文
  • vue 数据类型 属性

    万次阅读 2019-03-28 16:22:42
    data export default { name: 'app', data () { return { message:"hi vue !" } }, created(){ this.$emit('mes', this.message) } } props ...这意味着能 (也应该) 在子组...
    • data

    export default {
      name: 'app',
      data () {
        return {
          message:"hi vue !"
        }
      },
      created(){
          this.$emit('mes', this.message)
      }
    }
    
    • props

    组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,需要通过子组件的 props 选项

    // simple syntax
    Vue.component('props-demo-simple', {
      props: ['size', 'myMessage']
    })
    
    // object syntax with validation
    Vue.component('props-demo-advanced', {
      props: {
        // type check
        height: Number,
        // type check plus other validations
        age: {
          type: Number,
          default: 0,
          required: true,
          validator: function (value) {
            return value >= 0
          }
        }
      }
    })
    
    • propsData

    var Comp = Vue.extend({
      props: ['msg'],
      template: '<div>{{ msg }}</div>'
    })
    
    var vm = new Comp({
      propsData: {
        msg: 'hello'
      }
    })
    
    • computed

    在数据未发生变化时,优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性,当相关数据没有变化是,它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。

    new Vue({
       el:"#myDiv",
            data:{
                firstName:"Den",
                lastName:"wang",
    
            },
            computed:{
                fullName:function(){
                    return  this.firstName  + " " +this.lastName;
                }
            }
    })
    

    setter 和 getter方法:(注意在vue中书写时用set 和 get)

    • setter 方法在设置值是触发。
    • getter 方法在获取值时触发
    computed:{
        fullName:{
        //这里用了es6书写方法
            set(){
                 alert("set");
            },
            get(){
               alert("get");
               return  this.firstName  + " " +this.lastName;
            },
        
        }
    }
    
    • methods

    var vm = new Vue({
      data: { a: 1 },
      methods: {
        plus: function () {
          this.a++
        }
      }
    })
    vm.plus()
    vm.a // 2
    
    • watch

    Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。具体的用法可以直接看下面的示例,简单直接。

    new Vue({
      el: '#myDiv',
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }
    })
    
    展开全文
  • 如果数组中包含着引用类型, 对数组中的引用类型再次进行监控 vue-array源码 /* * not type checking this file because flow doesn't play well with * dynamically accessing methods on Array prototype */ ...
  • vue检测到数据变化

    千次阅读 2019-07-15 15:40:25
    分为两种:基本数据类型引用数据类型 对于基本数据类型的观测可以使用watch,或者computed计算数据 然而引用数据类型 数组或者对象 需要深度监听 watch: { arr: { immediate: true, handler(val) { 。。。 } } }, 2...
  • Vue如何监听数组的变化

    千次阅读 2021-02-21 09:43:27
    Vue为什么能检测数组变动$set为啥能检测数组变动 Vue如何监听数组的变化? 理解: 使用函数劫持的方式,重写了数组的方法 Vue 将 data 中的数组,进行了原型链重写。指向了自己定义的数组原型方法,这样当调用...
  • vue3.0有哪些变化

    2020-07-09 09:58:45
    vue.js1.x-----vue.js2.x 引入了虚拟DOM vue.js2.x问题 1)源码自身的维护性 数据量大后带来的渲染和更新的性能问题 2)兼容性 想舍弃但为了兼容一直保留的鸡肋API ## ## **vue3.0的优化** #### 1)首先是源码...
  • 变化侦测主要分为两种类型,一种是“推”(push),另一种是“拉”(pull)。   Angular和React中的变化侦测都属于“拉”,这就是说当状态发生变化时,它知道那个状态变了,只知道状态有可能变,然后会发送一个信号...
  • 写文章容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于... 【Vue原理】依赖收集 - 源码版之引用数据类型 上一篇,我们已经分析过了 基础数据类型的 依赖收集 【Vue原理】依赖收集 -...
  • vue 监听data数据变化

    千次阅读 2017-12-11 16:24:00
    当被监听的数据发生变化是,函数被执行 created() { this.$watch("Withdrawals", function (newValue, oldValue) { if(this.Withdrawals==false){ console.log("123") } }) } data(){ retu.....
  • 在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化。 检测对象...
  • 1. 当数据属于基本类型时 , vue会自动检测并在页面重新渲染 <div id="app"> <p>{{ testData }} </p> </div> <script src="./vue-2.6.12.js"></script> <script>...
  • 下述组件传值指引用类型(数组或对象)传值。 准备:单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更...
  • vue检测对象和数组的变化

    千次阅读 2017-02-17 17:01:17
    在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化。检测对象变化...
  • vue 中是如何检测数组变化

    千次阅读 2020-07-28 11:12:45
    2.vue 将 data 中的数据,进行了原型链重写,指向了自己定义的数组原型方法,这样当调用数组 api 的时候,可以通知依赖更新,如果数组中包含着引用类型,则会对数组中的引用类型再次进行监控。 那为什么说vue无法...
  • 【 学习探索过程中记下的...Vue将data中的数组,进行了原型链的重写,指向自己定义的数据原型的方法,这样当调用数组API时,可以通知依赖更新,如果数组中包含着引用类型,会对数组中的引用类型再次进行监控。 ...
  • 数组并没有使用Object.defineProperty重新定义数组的每个属性,vue中是怎么检测到数组的变化? 数组方法(vue中改写的7个数组方法): push,pop,shift,unshift,sort,splice,reverse 理解: 1.数组的方法...
  • 父组件在向子组件进行传输内容的时候,如果传输的类型是array object,那么传递的是一个引用。如果父组件向子组件传递的是一个String,Number,boolean则传递的是一个值。下面对这两种情况进行代码演示。 在子组件里...
  • vue3.0的变化及与2.0的区别

    千次阅读 2021-07-12 15:35:31
    难看出,vue3.0与vue2.0之间生命周期函数在销毁的时候有变化: beforeDestroy --> beforeUnmount destroyed --> unmounted 其他的区别主要在于书写使用的语言上的差别 在ts中使用 class 类组件书写可以 ...
  • vue

    2021-01-07 19:18:56
    Vue.js 简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 (1)Vue是一个渐进式的框架,什么是渐进式的呢? 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。 或者如果你希望将更多的...
  • 首先是一个setup函数,这个类似vue2.x中生命周期beforecreate之前就创建的函数,摒弃了vue2.x的data以及methods方法,引用了Reactive():声明单一对象时使用, ref():声明单一基础数据类型时使用 reactive ref 接受...
  • 引用类型与基本类型 堆内存与栈内存 js中的数据类型大体可以分为基本类型和引用类型。 基本类型例如String、Number、boolean、null、undefined 即常见的字符串、数字、false、true。 引用类型object又包含 function...
  • 我想有一部分同学应该做到清楚的说明其实现原理。众所周知,如今技术更新迭代速度很快,据 Vue 作者尤雨溪表示 Vue3.x 在今年的下半年发布正式版本,视频地址在这里 VUE CONF 杭州之 3.0 进展 。如果你在使用 Vue ...
  • Vue Composition API(VCA) 在实现上也其实只是把 Vue 本身就有的响应式系统更显式地暴露出来而已。 这不是函数式,只是 API 暴露为函数。 3.0 Template 编译出来的性能会比手写 jsx 快好几倍。 ——尤雨溪 Vue2...
  • Vue

    千次阅读 2020-07-01 21:35:19
    参与网络通信和页面跳转 网络通信:axios 页面跳转:vu e-router 状态管理:vuex [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzJf0Ij8-1593610436880)(/Users/maliangcheng/...
  • 当我们改变data中数组里面是某一个元素,视图进行更新 带着解决这个问题,我们首先来到了vue官方文档: 当使用上面的方法对数组进行操作的时候,就会触发视图更新 但是现在问题假如我们并不是用这些方法对数组...
  • vue3学习—state的变化和使用

    千次阅读 2021-03-09 10:41:18
    sate的变化和使用一、state的变化和使用1、...vue2中的state之前做过笔记,懂得可以翻阅 深入剖析vuex. 一、state的变化和使用 本文部分借鉴自大佬的笔记. vue3中state获取状态的方法有多种,如下图所示,那么我

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,441
精华内容 4,976
关键字:

vue引用类型不变化

vue 订阅