0
点赞
收藏
分享

微信扫一扫

vue3.0

梦幻之云 2022-07-01 阅读 178

 

 

 

 

一、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>

 

 

举报

相关推荐

0 条评论