Vue框架学习（二）
Vue选项
什么是选项？
使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如
data、methods和mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
以上是官网对于选项的概念，简单的说，选项是一组由Vue定义好的对象，你可以将你的代码写在指定的选项中，从而获得一些 “特异功能” 。
注：由于选项是Vue规定好的，因此在使用中我们不能更改其名称，也不可以重复定义
常用选项
1. data选项
- 必须是一个函数，将组件需要使用的变量定义在此函数的返回值对象中，定义的变量将会获得一个“特异功能” ---- 响应式
{{ name }}
上面例子中的name就是一个响应式数据，在值发生改变时，视图（页面）上的name也会发生变化，那我们便可以通过操作name的变化去使视图发生变化，而不用进行繁琐的DOM操作，这也体现着Vue框架的 数据驱动 这一核心思想。
- 为什么数据要定义在
data函数的返回值中，而不是定义在一个对象中？- 将数据定义在函数返回值中，可以确保每产生一个组件实例，都会调用一次函数，并返回一个新的对象，开辟一块新的空间。
- 如果将数据定义在对象中，可能会出现类似于浅拷贝中出现的问题，即多个组件实例指向同一块空间，一个组件实例修改数据，则全部数据发生变化。
2. methods选项
- 此选项是一个对象，其中存放着该组件要使用的函数，比如事件的回调函数…
{{ count }}
通过点击事件改变count的值，从而使页面上的值随之变化，再次体现 数据驱动 的核心思想
3. computed 计算属性
- 计算属性，对象形式，顾名思义，在计算属性中保存着一系列需要经过运算得出的属性
路程：{{ distance }} km
速度：{{ speed }} km/h
花费的时间：{{ time }} h
计算属性内部所依赖的数据发生变化时, 计算属性本身就会自动重新计算返回一个新的计算值并缓存起来。
计算属性内部所依赖的数据没有发生变化, 计算属性会直接返回上一次缓存的值。
因此上面例子中的distance（路程）与speed（速度）无论如何变化，time都会计算出正确的值。
4. directives 选项, 定义自定义指令( 局部指令 )
- 在上节，我们学习了一些Vue内置指令，功能十分强大，那么我们可以自己定义一些指令吗？
- 当然可以！我们可以在
directives选项中创建自定义指令。
像以上这种，在组件中定义的指令是局部指令，只能在本组件中使用，全局指令需要在main.js文件中定义，全局指令在任何.vue文件中都可使用。
注意: 当局部指令和全局指令冲突时, 局部指令优先生效.
var app = createApp(App)//定义全局指令
app.directive("myshow", (el, binding) => {if (binding.value) {el.style.display = "block";} else {el.style.display = "none";}
})
// 全局指令可在任何组件使用
5. components组件选项（注册局部组件）
- 在一个组件中我们可能会使用到其他组件，在将组件引入后，需要在
components中进行注册，才能使用。
局部组件只能在当前组件内部使用，需要在任何组件中使用，需要在main.js文件中注册为全局组件
// 引入组件
import Test from './Test.vue'
// 注册全局组件，可在所有.vue文件中使用
app.component('Test',Test);
6. 其他
filters 选项, 定义过滤器，vue2中使用，Vue3中已经弃用
mounted 等生命周期函数选项，我们在下节进行详细讲解…
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！