zoukankan      html  css  js  c++  java
  • vue踩坑

    1. 双向绑定的对象 改变或新增其属性 DOM不刷新问题

    var obj = {
        "attr1": "1",
        "attr2": [2]
    };
    new Vue({
      
    el: '#app', 
      data: {
        obj: obj
      },
    methods: {
        do: function(){
    obj.attr1 = 10; //视图刷新
          obj.attr2[0] = 20; //视图不刷新
    obj.attr2.length = 0; //视图不刷新
          obj.attr3 = 3; //视图不刷新
        }
      }
      ....
    })

    这是因为Vue 会在初始化实例时对属性执行 getter/setter 转化过程,并用computed来添加需要计算的属性,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

    对象obj新增的attr3属性没有经过初始化的getter/setter转化,obj.attr3的双绑不会成功,必须用VUe的 set() 方法, 

     Vue.set( obj, "attr3", 3 ); //视图刷新

    同时由于javascript的限制,直接用索引设置元素或者修改数组的长度,这两种变化都不能被检测到,要使用 $set() 或 vue 包装过的变异方法: push() pop() shift() unshift() splice() sort() reverse()

    2.vue中使用props传值注意: camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名

      Vue.component('child', {
        // camelCase in JavaScript
        props: ['myMessage'],
        template: '<span>{{ myMessage }}</span>'
      })
    
      <!-- kebab-case in HTML -->
      <child my-message="hello!"></child>

    3.VUE与Nunjucks同时使用 定界符冲突 将定界符改成 ${} 形式

      VUE1:

    Vue.config.delimiters = ['${', '}'];

    VUE2:

    var vm = new Vue( {  
            el: '#app',  
            data: {  
                childrens: {  
                    name: 'ljl',  
                    age: 18,  
                    sex: '女'  
                },  
                tdArray:["1","2"]
                isShow:true  
            },  
            delimiters:['${', '}']  
        } );  

    未完待续。。。

  • 相关阅读:
    centos配置ADSL拨号 配置阿里云的yum源
    强烈推荐:一个网页转安卓App的工具,可以在线云打包apk
    【html5】input标签capture属性不为人知的秘密
    国庆微信头像在线生成器,头像加国旗小工具
    这是一个玩法简单又充满刺激的安卓App游戏
    微信群二维码突破100人限制和7天不过期的方法
    Xcode9学习笔记84
    Xcode9学习笔记83
    Xcode9学习笔记80
    python 压缩文件.zip
  • 原文地址:https://www.cnblogs.com/jlliu/p/9055854.html
Copyright © 2011-2022 走看看