vue文件的结构和API

1. vue文件的结构

script：控制模板的数据和行为（注意不要少了setup）

<script setup>
  import {
    ref
  } from "vue";
</script>

template：模板部分,由它生成HTML

<template>
  <h1>{{msg}}</h1>
  <br>
</template>

style：当前组件的CSS样式

<style scoped>
  h1 {
    color: red;
  }
</style>

2. vue的API

2.1 组合式（推荐使用）

参数介绍：

• setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
• ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。
• onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

<script setup>
    import {
        ref,
        onMounted
    } from 'vue'
    //声明响应式数据 ref 响应式对象有一个内部的属性value
    //在组合式api中，一般要把数据定义为响应式数据
    const count = ref(0); //声明响应式变量

    //声明函数
    function increment() {
        count.value++;
    }
    onMounted(() => { //声明钩子函数
        console.log("vue挂载完毕");
    });
</script>

<template>
    <!-- 写HTML元素 -->
    <button @click="increment">count：{{count}}</button>
</template>

2.2 选项式

<script>
    export default {
      data(){ //声明响应式对象
        return {
          count: 0
        }
      },
      methods: { //声明方法，可以通过组件实例访问
        increment: function(){
          this.count++ ;
        }
      },
      mounted(){ //声明钩子函数
        console.log('Vue mounted ...');
      }
    }
</script><template>
    <button @click="increment">count:{{ count }}</button>
</template>

 笔记参考