Vue.js在使用中的一些注意知识点

前端之家收集整理的这篇文章主要介绍了Vue.js在使用中的一些注意知识点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍的Vue.js在使用中的一些注意知识点,对大家具有一定的参考价值,下面来看看详细的介绍吧。

  • 每个 Vue 实例都会代理其 data 对象里所有的属性
  • 注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
  • 除了 data 属性,Vue实例暴露了一些有用的实例属性方法。这些属性方法都有前缀 $,以便与代理的 data 属性区分。

模板语法

  • Vue.js 使用了基于HTML的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
  • 在底层的实现上, Vue 将模板编译成虚拟DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
  • Mustache里面只能是JS表达式,否则不会生效。
  • 指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
  • 过滤器设计目的就是用于文本转换,为了在其他指令中实现更复杂的数据变换,你应该使用计算属性

计算属性

条件渲染

列表渲染

表单控件

  • 对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值)。

组件

  • 在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例。
  • 使用组件时,大多数选项可以被传入到Vue构造器中,有一个例外: data 必须是函数。 原因的话,因为组件可能被多次调用,当data为普通对象时,data内的数据会被共享,当为函数的时候,则每个组件生成的为独立data作用域。
  • 在 Vue.js 中,父子组件的关系可以总结为 props down,events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。
  • 注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
  • Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是on和on和emit 不是addEventListener 和 dispatchEvent 的别名。
  • $refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

响应原理

vue中的数据双向绑定中,只有改变vue实例上的属性时才能动态更新试图。

当data中有一个属性为对象和数组时,直接修改对象和数组的某一项数据是没办法触发试图更新的。

数组解决方式:

对象只能用第一种方式。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/vue/39590.html

猜你在找的Vue相关文章