[转载]Vue框架学习（二）

Vue选项

什么是选项？

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

以上是官网对于选项的概念，简单的说，选项是一组由Vue定义好的对象，你可以将你的代码写在指定的选项中，从而获得一些 “特异功能” 。

注：由于选项是Vue规定好的，因此在使用中我们不能更改其名称，也不可以重复定义

常用选项

1. data选项

• 必须是一个函数，将组件需要使用的变量定义在此函数的返回值对象中，定义的变量将会获得一个“特异功能” ---- 响应式

<template><div><!-- 在这里使用插值表达式将name渲染到页面 -->{{ name } }</div>
</template><script>
export default {// data选项data(){return{// name是响应式的name:"Jay",} },
}
</script>

上面例子中的name就是一个响应式数据，在值发生改变时，视图（页面）上的name也会发生变化，那我们便可以通过操作name的变化去使视图发生变化，而不用进行繁琐的DOM操作，这也体现着Vue框架的 数据驱动 这一核心思想。

• 为什么数据要定义在data函数的返回值中，而不是定义在一个对象中？
  • 将数据定义在函数返回值中，可以确保每产生一个组件实例，都会调用一次函数，并返回一个新的对象，开辟一块新的空间。
  • 如果将数据定义在对象中，可能会出现类似于浅拷贝中出现的问题，即多个组件实例指向同一块空间，一个组件实例修改数据，则全部数据发生变化。

2. methods选项

• 此选项是一个对象，其中存放着该组件要使用的函数，比如事件的回调函数…

<template><div><!-- 添加点击事件，事件回调函数在methods中定义 --><button @click="add">点击加一</button> <p>{{ count } }</p></div>
</template><script>
export default {data(){return{count:0,} },// 在methods中定义函数（方法）methods:{add(){// 在函数中要使用data中的变量，需加thisthis.count++},}
}
</script>

通过点击事件改变count的值，从而使页面上的值随之变化，再次体现 数据驱动 的核心思想

3. computed 计算属性

• 计算属性，对象形式，顾名思义，在计算属性中保存着一系列需要经过运算得出的属性

<template><p>路程：{{ distance } } km</p><p>速度：{{ speed } } km/h</p><!-- 使用计算属性，与变量的使用相同 --><p>花费的时间：{{ time } } h</p>
</template><script>
export default {data() {return {distance: 1000,speed: 50,} },computed: {// 定义计算属性，类似于函数的定义，返回值就是该计算属性的值time() {return this.distance / this.speed} }
}
</script>

计算属性内部所依赖的数据发生变化时, 计算属性本身就会自动重新计算返回一个新的计算值并缓存起来。

计算属性内部所依赖的数据没有发生变化, 计算属性会直接返回上一次缓存的值。

因此上面例子中的distance（路程）与speed（速度）无论如何变化，time都会计算出正确的值。

4. directives 选项, 定义自定义指令( 局部指令 )

• 在上节，我们学习了一些Vue内置指令，功能十分强大，那么我们可以自己定义一些指令吗？
• 当然可以！我们可以在directives选项中创建自定义指令。

<template><!-- 使用自定义指令 --><div v-myshow="1"></div><div v-myshow="0"></div>
</template><script>
export default {// 在directives中定义一个自定义指令，来模仿v-show的功能directives: {//el:添加自定义指令的元素；binding：指令携带的参数myshow(el, binding) {if (binding.value) {el.style.display = "block";} else {el.style.display = "none";} }}
}
</script><style scoped>
div {width: 100px;height: 100px;background-color: red;margin: 10px;
}
</style>

像以上这种，在组件中定义的指令是局部指令，只能在本组件中使用，全局指令需要在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中进行注册，才能使用。

<template><!-- 使用组件 --><Test />
</template><script>
// 引入组件
import Test from './Test.vue'export default {// 注册组件components: {Test},
}
</script>

局部组件只能在当前组件内部使用，需要在任何组件中使用，需要在main.js文件中注册为全局组件

// 引入组件
import Test from './Test.vue'
// 注册全局组件，可在所有.vue文件中使用
app.component('Test',Test);

6. 其他

filters 选项, 定义过滤器，vue2中使用，Vue3中已经弃用
mounted 等生命周期函数选项，我们在下节进行详细讲解…