Vue 单项数据流,dom解析等踩坑日记

·  阅读 295
Vue 单项数据流,dom解析等踩坑日记

过滤器 踩坑

// 注册
Vue.filter('my-filter', function (value,参数) {
  // 返回处理后的值
})

// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')复制代码

1:第一个参数必须为自身的值,后面可以加任意多的参数。数序颠倒就会出错。

2:在vue表达式中使用管道符,过滤器会失效(比如v-html,v-text),原因是在vue2.0里 管道符‘|’只能用在mousetache和v-bind中

怎么解决 请尝试:

{{ article | replaceUrl }}
替换成这个
v-text="$options.filters.replaceUrl(article)"复制代码

3:在vue2.0里 过滤器只能用类似函数的写法reverseString( 'I must tell you:'),括号内是参数,不同于vue1.0的用空格后加参数的写法" msg|reverseString 'I must tell you:' " 


过滤器使用全局过滤器时,必须定义在 Vue实例初始化前面,否则过滤器定义无效! 

对于子组件而言,父组件中自定义的过滤器在子组件中使用无效!可使用全局添加的过滤器或在子组件内部自定义过滤器!


双向绑定

Array发生变化 以下情况无法监听到:(见官网)

  1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength

不过官方提供了$set解决这些问题

解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)复制代码
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)复制代码

你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)复制代码

为了解决第二类问题,你可以使用 splice

vm.items.splice(newLength)复制代码

对于修改Object的属性也应该用$set


解析DOM模板注意事项

有些 HTML 元素,诸如 <ul><ol><table><select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li><tr><option>,只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:

<table>
  <blog-post-row></blog-post-row>
</table>复制代码

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法:

<table>
  <tr is="blog-post-row"></tr>
</table>复制代码


使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) ,如果你使用字符串模板组件,那这个限制就没有了。

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>复制代码

计算属性

见另一篇:vue 计算属性 修改自己?

props 单项数据流

vue props 单项数据流 和 双向绑定


分类:
前端
标签: