vue3.0

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、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://vue-composition-api-rfc.netlify.app/#summary

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>

以上是 vue3.0 的全部内容， 来源链接： utcz.com/z/375047.html

回到顶部