vue基础中的注意事项，以及一些学习心得

vue中你不知道的东西、以及注意事项

• v-html

• 使用 v-html的时候该指令中的值会覆盖绑定标签中原有的值，且使用v-html的时候不要将他设置为给用户提供内容的地方，因为v-html很容易被XSS攻击

• v-bind

  • 使用v-bind绑定属性值为布尔值的属性时，如果数据为truthy，则该布尔值属性都不会被渲染出来
  • 如果数据值为其他任意存在的值，就意味着值为true

• v-if

  • 使用v-if绑定的标签，当其指令值为truthy的时候该标签是直接被删除掉了

  • 而当其指令值为其他任意存在的值时，就意味着值为true

  • 如果您现在有一个需求是让多个标签都使用v-if，则可以使用template标签，使用该标签包裹需要被一起隐藏或显示的标签，在该标签上绑定v-if即可

• v-show

  • 和v-if的区别在于v-show是将标签设置为 display:none;的

• 动态参数

  • 定义：在v-bind中，被绑定的属性被称之为参数，如 id、class、href、src...

  • 用法：使用方括号括起来的js表达式作为指令的动态参数

  • 注意事项：在使用动态参数的时候，需要避免使用大写的字符来命名，因为浏览器会把命名强制转换为小写，其次，动态参数有一些语法约束，如空格和引号放在动态参数中是无效的

• vue中复用性的问题

  • 因为vue会尽可能高效的渲染元素，通常会复用已有的元素。

  • 大家可能以前出现过这样的问题，

  • 
    
    
    切换isShow
    

  • 解决方案：在input标签中加入一个 key 属性，给该属性命名(字符串or数字)，加以区分即可。但是这不会导致label标签不复用，因为label标签没有key属性。

• v-for的注意事项：

  • 在v-for的语法中其实可以把in代替为of作为分隔符；

  • 数组更新检测：

    • 变异方法(变异方法就是改变了原数组的方法，即：push,pop,shift,unshift,splice,sort,reverse)，Vue可以监听到数组的变化，并在遍历的时候动态遍历
    • 替换方法(替换方法就是生成了新数组的方法，即：filter,concat,slice等等)，当使用替换方法时，可以用新数组替换原来的数组
    • 注意事项：当你利用索引直接添加一个数组项时、当你修改数组长度时，Vue不是响应性的
    • 解决方法： vm.lists.splice(index,num,newValue) or Vue.set(vm.lists,index,newValue)
    • 对象的变更检测也是如此，不能通过对象名.新属性名去手动添加新属性，但是也可以使用Vue.set(vm.lists,index,newValue) 的方法进行添加。

  • 在