大前端学习笔记 -- Composition API

Composition API

文章内容输出来源:大前端高薪训练营

一、Composition API使用

1. 使用Vue3.0

先创建一个空文件夹,然后进入文件夹执行npm init -y,再执行npm install [email protected]安装vue3.0

创建index.html,vue3.0的使用

<body>
  <div id="app">
    x: {
  { position.x }} <br>
    y: {
  { position.y }} <br>
  div>
  <script type="module">
    import {
     createApp } from './node_modules/vue/dist/vue.esm-browser.js'

    const app = createApp({
    
      data () {
    
        return {
    
          position: {
    
            x: 0,
            y: 0
          }
        }
      }
    })
    console.log(app)

    app.mount('#app')
  script>
body>

2. setup、reactive的使用

  • createAPP:创建Vue对象
  • setup:CompositionAPI的入口
  • reactive:创建响应式对象
<body>
  <div id="app">
    x: {
  { position.x }} <br>
    y: {
  { position.y }} <br>
  div>
  <script type="module">
    import {
     createApp, reactive } from './node_modules/vue/dist/vue.esm-browser.js'

    const app = createApp({
    
      setup () {
    
        // 第一个参数 props,响应式对象,不能被解构
        // 第二个参数 context, attrs、emit、slots
        const position = reactive({
    
          x: 0,
          y: 0
        })
        return {
    
          position
        }
      },
      mounted () {
    
        this.position.x = 2
      }
    })
    console.log(app

你可能感兴趣的:(Vue,大前端,vue3.0,CompositionAPI)