b57f94cff1
* #0: add vue3 demo * #0: add router for vue3 demo in main demo * #0: update package.json * #0: update name Co-authored-by: chaunjie <chaunjie@dingtalk.com>
75 lines
1.1 KiB
Vue
75 lines
1.1 KiB
Vue
<template>
|
|
<div class="hello-content">
|
|
<h1>{{ msg }}</h1>
|
|
<p>Vue version: {{ version }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted, onBeforeUpdate, getCurrentInstance, version } from 'vue';
|
|
|
|
export default {
|
|
name: 'HelloWorld',
|
|
props: {
|
|
msg: String,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
nameColor: 'orange',
|
|
};
|
|
},
|
|
|
|
setup() {
|
|
const { ctx } = getCurrentInstance();
|
|
|
|
const changeGlobalState = () => {
|
|
if (ctx.$setGlobalState) {
|
|
console.log('此处可设置全局state');
|
|
// ctx.$setGlobalState({name: 'chaunjie'})
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
console.log('mounted');
|
|
});
|
|
|
|
onBeforeUpdate(() => {
|
|
console.log('beforeUpdate');
|
|
});
|
|
|
|
return {
|
|
changeGlobalState,
|
|
version,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style vars="{nameColor}">
|
|
.name {
|
|
color: var(--nameColor);
|
|
}
|
|
</style>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
h3 {
|
|
margin: 40px 0 0;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
display: inline-block;
|
|
margin: 0 10px;
|
|
}
|
|
a {
|
|
color: #42b983;
|
|
}
|
|
h1 {
|
|
color: #64b587;
|
|
}
|
|
</style>
|