Vue3入门

简介

API风格

Vue的组件按两种不同的风格进行书写：选项式API和组合式API

选项式API

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

<script >
export default {
  setup() {
    console.log("setup")
    // 定义一个变量
    const name = "张三";
 
    // 定义一个函数
    const pringLog = ()=> {
      console.log("pringLog")
    }
 
    // 如果想在template中使用该变量和函数，那么就需要以一个对象的形式将其返回出去
    return {
      name,
      pringLog
    }
  },
  beforeCreate() {
    console.log("beforeCreate")
  }
}
script>
 
<template>
  <div >
    {
  {name}}
 
    <div @click="pringLog">点我获取姓名div>
 
  div>
template>
 
<style scoped>
 
style>