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中的变量，需加this
            this.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 等生命周期函数选项，我们在下节进行详细讲解…