欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue3.0

程序员文章站 2022-05-16 22:14:05
...

 

 

 

 

一、vue3.0尝鲜

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue-next尝鲜</title>
  <script src="https://s1.zhuanstatic.com/common/js/vue-next-3.0.0-alpha.0.js"></script>
</head>

<body>
  <div id='app'></div>
</body>
<script>
  const { createApp, reactive, computed, effect } = Vue

  const RootComponent = {
    template: `
      <button @click="increment">
        {{ state.name }}今年{{state.age}}岁了,乘以2是{{state.double}}
      </button>
    `,
    setup() {

      const state = reactive({
        name: '徐同保',
        age: 18,
        double: computed(() => state.age * 2)
      })

      effect(() => {
        console.log(`effect 触发了! - ${state.name}今年${state.age}岁了,乘以2是${state.double}`)
      })

      const increment = () => {
        state.age++
      }

      return {
        state,
        increment
      }
    }
  }
  createApp().mount(RootComponent, '#app')
</script>

</html>

 

二、@vue/composition-api

 

https://www.npmjs.com/package/@vue/composition-api

装包:

yarn add @vue/composition-api

 

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueCompositionApi from '@vue/composition-api'

Vue.config.productionTip = false
Vue.use(VueCompositionApi)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.js:

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from '@vue/composition-api'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

加法:

<template>
  <div>
    {{data.count}}
    <div>
      <button @click="handleAdd(1)">加1</button>
      <button @click="handleAdd(2)">加2</button>
    </div>
  </div>
</template>

<script>
import { reactive } from '@vue/composition-api'

export default {
  setup() {
    const data = reactive({
      count: 0
    })

    const handleAdd = (step) => {
      data.count += step
    }

    return {
      data,
      handleAdd
    }
  }
}
</script>

<style>

</style>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关标签: web前端 vue