关于Vue的学习笔记（三）

最新推荐文章于 2024-10-13 14:27:27 发布

komish

最新推荐文章于 2024-10-13 14:27:27 发布

阅读量70

点赞数

本文链接：https://blog.csdn.net/komish/article/details/118108452

版权

"Vue.js初学者指南，深入解析Vue实例的options，包括el、data、methods、computed和filters的用途。el指定DOM挂载点，data定义实例数据，methods存放可复用的方法，computed用于计算属性，提高效率，filters处理数据格式。通过mustache语法{{}

摘要由CSDN通过智能技术生成

关于Vue的一些基本参数、方法及其应用规则

options：

创建Vue实例的同时，我们需要对传入实例对象的options进行编写才能使我们的DOM得到渲染。

对于初学者（我）而言，Vue中options主要包括一下一些选项：

（选项：挂载类型）

el：（string|HTMLElement）

作用：决定之后Vue实例会管理哪一个DOM

data：（Object|Function）

作用：Vue实例对应的数据对象

methods：{[key:string]：Function}

作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

computed：{[key:string]：Function}

作用：对数据进行一些转化后显示，或需要将多个数据结合起来进行显示。与methods作用相似，但若是仅仅针对数据的处理，使用computed比methods效率更高，因为多次使用，methods将被调用同样多的使用次数，而computed经第一次调用后直接使用处理好后置于缓存中的数据进行使用。

filters：{[key:string]：Function}

作用：对数据格式进行统一的处理，与methods作用相似。

mustache{{}}

将创建好的Vue实例中的data文本数据插入HTML文本中，属于响应式，可像如下使用：

<div id="app">
  <h2>Hello {{name}}</h2>
  <h2>{{firstname}}{{lastname}}</h2>
  <h2>{{count * 2}}</h2>
</div>